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です。


コピーされたものをテキストエディタなどに張り付けてみます。

私が試したデザインの場合、上記のようなグラデーションを取得することが出来ました。
このような、細かい値の指定は見落としてしまうこともあるので、とても便利です!
 
 


 
うまく取り入れて、スピーディーかつ正確なコーディングに役立てられればと思います。