コーディングの際、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です。

---

コピーされたものをテキストエディタなどに張り付けてみます。 私が試したデザインの場合、上記のようなグラデーションを取得することが出来ました。 このような、細かい値の指定は見落としてしまうこともあるので、とても便利です!    

---

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