BLOG

ブログ

2022.07.04

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

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

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

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

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

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

●画像の書き出し

●文字情報の取得

●要素情報の取得

●CSSの取得

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

画像の書き出し

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

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

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

1枚ずつ書き出す方法

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

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

ショートカットキー
Mac⌘ を押しながらクリック
WindowsCtrl を押しながらクリック

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

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

ショートカットキー
Mac⌘+E
WindowsCtrl+E

書き出す画像を複数選択して一気に書き出す方法

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

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

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

ショートカットキー
Mac⇧+⌘+E
WindowsCtrl+Shift+E

CSSの記述に役立つプラグイン

copy CSS from panel

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

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

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

参考:Adobe XD で使用できるすべてのショートカットキーを紹介します。

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

CONTACT

下記のフォームに必要事項を記入してください。※お問い合わせの際には個人情報保護方針のご確認をお願い致します。

会社名
お名前必須
ご住所
郵便番号
都道府県
市区町村
町名番地等
建物名
お電話番号必須
- -
メールアドレス必須
お問い合わせ内容必須
メッセージ