2022.07.04

【初級編】XDからコーディングしてみよう！

XDでデザインを作成すると効率化につながる　という記事を作成させていただきました。

動画で学ぶ　XDでできること

では、コーディングではどうでしょうか？

この記事では、XDからコーディングする方法や、より便利になるプラグインなどをご紹介します。

XDからコーディングする方法

上記のようにデザインデータからコーディングする場合は通常、以下の4つが必要になります。

●画像の書き出し

●文字情報の取得

●要素情報の取得

●CSSの取得

今回は特に作業効率UPが期待できそうな、画像の書き出し・CSSの取得（一部）ついてご説明します。

画像を書き出すには2通りの方法があり、

【1枚ずつ書き出す方法】と【書き出す画像を全て選択して一気に書き出す方法】です。

個人的には、Illustratorやphotoshopより簡単に一度に書き出しができる点が魅力的と感じました。

1枚ずつ書き出すには、まず対象となる画像を選択しますが、グループ化されているオブジェクトは、目的のオブジェクトが選択状態になるまでダブルクリックを繰り返さないとなりません。

しかし、ショートカットキーを使えば1回のクリックで選択できます。

Illustratorのグループ選択機能のようなもので、グループ内やリピートグリット内であっても1クリックで画像を選択することができます。

書き出したい画像を選択した状態で、以下のショートカットキーを押すと保存できます。

書き出したい画像を全て選択し、一気に書き出すこともできます。

画像を選択し、レイヤーの「書き出し対象にする」アイコンをチェックします。

全て選択できたら以下のショートカットで書き出します。

copy CSS from panel

次にHTML・CSSを記述となりますが、上記はCSSデータを表示してくれるプラグインで、Copy CSSをクリックすれば要素のCSSを表示できるので、スタイルシートに貼り付けることができます。

不要な記述がある場合が多く適宜修正が必要ですが、グラデーションや角丸などを使ったボタンやカードの実装に便利ですね。

また、意外にXDの効率化に必要なのがショートカット。覚えると作業が楽になるのでおすすめです。

プランニングA WEBチーム　野々下