AdobeXDの機能が知りたい
デザインスペックについて知りたい
コーディングする側からについての意見が知りたい
という方むけの記事です。
私はWebデザインとプログラム制作(フロントエンドエンジニア)の仕事をしています。
（1つのwebサイトのデザインもプログラム制作も両方やることがほとんどです。）
フリーランスで10年ほど、主に中小企業や商店むけのサイトを作っています。
今まではPhotoshopでデザインデータを制作していたのですが、webデータ制作ツールを変更しようと思い、AdobeXDを勉強中です。
AdobeXDってどんなソフト？という方はこちら
ちなみにこちらの本で勉強しています。
勉強する中で、AdobeXDにはデザイン、プロトタイプの機能の他に、デザインスペックの機能があることを知りました。
デザインスペックは、プログラム制作者むけの機能です。
(HTML、CSS、PHP)
詳しく書いていきたいと思います。
AdobeXDデザインスペックがコーディングに便利。使い方や特徴
AdobeXDデザインスペックとは
デザインデータの色情報やテキスト情報、marginなどの情報を確認するのに便利な機能です。使用感はこのような感じ。
要素をクリックするとmairginやwidth、カラー、フォント、詳細の情報が表示されます。
また、テキストのコピー、カラーのコピーなども可能。
右側の設定項目内の設定をワンクリックするとテキストやカラーがコピーできます。
AdobeXDデザインスペックの使い方
1.デザインデータを用意します。
2.共有から「デザインスペックを公開」を選択
3.タイトル、書き出し先（Web・iOS・Androd）を設定、（今回はWebです）
必要に応じて公開パスワードを設定します。「公開用リンク」を作成をクリック。
4.他の制作者に伝える場合は、「リンクをコピー」を、自分で設定する場合は、「ブラウザで開く」を、クリックします。
5.デザインスペックがwebページに表示されます。
カラーや文字スタイルなど画面右側に表示されます
テキストファイルはコピーしやすいように表示されます。
AdobeXDデザインスペックのメリットと注意点
デザインスペックのメリットはAdobeXDを持っていなくても確認することができる点だと感じます。(デザインスペック閲覧にはXDがいらない/Webブラウザのみで表示可能)
また、コーディングする側としては、marginが簡単に表示されるのは便利だなあと感じました。テキストやカラーコードがワンクリックでコピーされるのは便利かも。
（photoshopやillustratorだと少し測りにくいなあと感じていたので。）
ただ、デザイナーとフロントエンド制作担当者が違う場合、詳しい使い方など共有や理解が必要かもしれません。
まとめ
プロトタイプやデザインスペックなどXDはプログラマーとデザイナーの共有機能があって、特徴的と感じました。
仕事でもうすぐ実践的に使用していく予定なので、その際に気づくことがあれば追記していきたいと思います。
アップデートが多いソフトなどでまた新機能も出てくるかもしれませんね。
