弊社ではwebデザインを作成する際にAdobe XD（以下XD）をメインに利用していますので、HTML・CSSコーディングを行う際にもXDを使うことになります。

XDで作成されたデザインカンプからコーディングに必要な情報を確認するにはプロパティインスペクタを利用することになりますが、手動、目視での作業だとどうしてもミスがおきてしまいます。
デザインスペックを作成して確認することもできるのですが、共有リンクを作成するのにもひと手間かかりますし、IE11のような古いブラウザでは使えないプロパティが含まれている場合は都度修正が必要です。

何か良い方法はないかと調べていたところ、「Copy CSS to Clipboard」というプラグインを見つけたのでご紹介したいと思います。

Copy CSS to Clipboardの紹介

peterflynn/xd-copy-css-code: Adobe XD plugin to quickly copy CSS styles to the clipboard

Githubに掲載されている情報によりますと

となっています。

目的のオブジェクトを選択した状態でプラグインを実行すると、クリップボードに必要なCSSの情報をコピーしてくれますので、ミスを減らし効率的にコーディングを行うことができます。

Copy CSS to Clipboardのインストール

Adobe XD プラグインのインストール方法は、画面左上のメニューボタンをクリックし、メニューの「プラグイン > プラグインを参照」を選択します。

検索画面がダイアログで表示されますので、メニュー中央の「参照」をクリックします。

検索エリアが表示されますので「Copy CSS to Clipboard」と入力してEnterキーを押します。

検索結果からプラグインをインストールします。※先頭に表示されないようなのでスクロールして探してください。

これでプラグインのインストールは完了です。
画面左下のアイコンをクリックしプラグインパネルを表示すると「Copy CSS to Clipboard」がインストールされていることが確認できます。

Copy CSS to Clipboardの使い方

インストールが完了したら実際にプラグインを利用してみます。サンプルとして下記のようなボタンのスタイルを取得してみます。

プラグインの実行は対象のオブジェクトを選択してプラグインパネルのメニューをクリックするだけです。

またマウスオーバーで表示されるツールチップにもあるように、「Shift+Ctrl+Alt+C」のショートカットでも実行できます。

ボタンの背景となるオブジェクトを選択してプラグインを実行すると、下記のようにCSSの各プロパティがクリップボードにコピーされます。

width: 400px;
height: 100px;
border-radius: 50px;
background: #cfe2ff;
border: 6px solid #b6d4fe;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);

テキストを選択した場合も同様に各プロパティがコピーされます。

font-family: Meiryo;
font-weight: bold;
font-size: 30px;
text-align: left;
color: #084298;

font-familyはちょっと余計な気もしますが、XDのデザインデータを元に情報がクリップボードにコピーされるのでミスも防げますしプロパティ名を記述する手間も省けて一石二鳥ですね。

特にグラデーションやボックスシャドウは指定が面倒で「Ultimate CSS Gradient Generator」のようなサービスを利用していたので手間が省けて助かります。

※2021年1月時点ではグラデーションは線形グラデーションのみに対応しているようです。

おまけ

インストールしたプラグインは「プラグイン > 開発版 > 開発フォルダを表示」で開かれるフォルダと同じ階層にある「plugins」というフォルダに格納されます。

XDのプラグインはJavaScriptで記述されていますので、インストールしたプラグインのソースコードを確認してオリジナルのプラグインを作成する際の参考にすることも可能です。（webpack等でバンドルされている場合は解読が難しいですが。。。）

最後に

いかがでしたでしょうか。XDのプラグイン「Copy CSS to Clipboard」のインストールから実行までの手順を紹介しました。

筆者はコーディングを行う際にこのプラグインを利用するようになってからミスが1～2割ほど減ったように感じています。（当社比）

「Copy CSS to Clipboard」以外にも便利なプラグインはたくさん公開されています。開発スタイルにあったプラグインを上手に活用して、快適なXDライフを送りましょう。

この記事を書いた人

なかもとソリューション事業部 マークアップエンジニア

企画・営業部を経て、システムエンジニア、マークアップエンジニアとしてweb サイト制作、webアプリケーション開発の上流から下流まで幅広く携わる。ユーザビリティ、アクセシビリティを意識したセマンティックなマークアップとより良いユーザー体験を追及して日々奔走中。三度の飯よりwebが好き。

この執筆者の最新記事

この執筆者の記事一覧

• 2024年9月20日WEB:not()否定擬似クラスを使ってCSSセレクタに！（否定条件）を追加しよう
• 2024年7月31日WEB:nth-child()擬似クラスで指定した順番・範囲の要素を取得する
• 2024年5月23日WEB脱Sassへの第一歩！CSSでネスト機能（Nested Rules）を使う方法
• 2024年3月21日WEBCSSでもifが使いたい！:has()擬似クラスを使ってCSSセレクタに条件分岐を書く方法