MENU
CLOSE
システム Edit : 2022.01.14 Update : 2024.11.07

Adobe XDでデザイン(CSS)を確認してコーディングする時に便利なプラグイン「Copy CSS to Clipboard」

コーディングの際、XDで作られたデザインカンプを基にマークアップを行うことはよくあります。
その際に、デザインを手動でクリック&目視で読み取ってcssに置き換えると、複雑なものだと時間がかかったり、css指定漏れが出てしまうこともあるかと思います。そんなときに自動でcssを抽出してくれる便利なXDのプラグインを見つけたので、ご紹介します。
私の場合、box-shadowの指定や背景に細かいグラデーションを付ける時などによく使っています。

プラグイン「Copy CSS to Clipboard」のインストール

xdでアイテムを開いた状態で、メニューバーの「プラグイン」>「プラグイン参照」をクリック。
すべてのプラグインの中から「Copy CSS to Clipboard」で検索し、「入手」を押します。
プラグインの取得は完了しました。 xd内、左下のプラグインパネルを押すと、無事インストールできていることが確認できました。

使ってみる

例えば、以下のようなデザインがxdでつくられていたとします。赤枠内に青で囲まれた長方形がありますが、ここにはグラデーションが施された長方形が潜んでいます。
先ほどの長方形を選択した状態で、メニューの「プラグイン」>「Copy CSS to Clipboard」>「Copy CSS」を押下します。 「Shift + Ctrl + Alt + C」でもOKです。
コピーされたものをテキストエディタなどに張り付けてみます。 私が試したデザインの場合、上記のようなグラデーションを取得することが出来ました。 このような、細かい値の指定は見落としてしまうこともあるので、とても便利です!    
  うまく取り入れて、スピーディーかつ正確なコーディングに役立てられればと思います。

Miki Kohinata

大学時代、将来独立することを決めエンジニアの道へ。就職したIT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。