adobexd

【コーディングに必要な情報を共有】AdobeXD「共有」で使える開発共有機能の使い方


今回は、AdobeXD「共有」で使える開発共有機能の使い方をご紹介いたします。

まだAdobeXDの共有機能を使った事が無い人は、基本的な使い方を以下にまとめています。

この記事は以下のような悩みの方にオススメです。

こんな悩みの方にオススメ
  • 効率的にデザインをコーディング出来ないだろうか?
  • デザインのやりとりをスムーズにする方法は無いかな?
  • AdobeXDの共有機能を使った事がない。

①コーディングに必要な情報を共有できる「開発共有」機能

AdobeXDの開発機能は、開発者とデザインスペックを共有するために使います。

開発者にデザインスペックを共有する事で、アートボード内の様々なオブジェクトの色や、テキスト、位置情報などを取得する事が可能です。

また、CSSコードの表示・コピーと変数の取得までする事が出来ます。

こんな事ができます💡
  • 素材の一括書き出し
  • テキストのワンクリックコピー
  • CSSコードの表示
  • アセットの変数管理

共有する前にアセットを追加しておく

共有のURLリンクを作成する前に、アセットにカラーや文字スタイル情報を追加しておきましょう。

アセットに追加しておく事で、コーディングをする人が変数で一括書き出しする事ができます。

アートボードを全選択して、右クリックからデザインのアセットを追加する事ができます。

共有パネルから開発用にURLリンクを生成する

デザインの準備ができたら、共有パネルから開発用のURLリンクを生成しましょう。

URLリンクの生成方法は、共有機能の基本操作をご覧ください。

開発用のURLを生成する際に、「書き出し先」と「ダウンロード可能アセット」を選択できます。

書き出し先は、「Web」「iOS」「Android」から選択出来るので、開発するコンテンツに合わせて選択します。

ダウンロード可能アセットにチェックを入れる事で、開発者がデザイン素材をダウンロードする事ができます。

URLリンクからデザインスペックを確認する

開発用にURLを生成できたら、開発者はデザインスペックを確認する事ができます。

デザインスペックでは、以下の事が確認できます。

  • ビューポートのサイズ
  • デザインのサイズ
  • デザイン素材
  • カラーアセット
  • 文字スタイル
  • テキスト
  • CSSコード

画面の詳細(デザインのサイズ)

ビューポートとデザインのサイズを数値で確認できます。コーディングのベース作成の際に便利ですね。

デザイン素材は一括でダウンロードできる

デザイン素材を選択すると、一括でダウンロードする事が可能です。
ダウンロードの際に、vectorデータ、bitmapデータが分かれて表示されるようになっています。

カラーアセット

カラーアセットでは、カラーパレットにマウスオーバーすると、デザインで使用されている箇所がハイライトになって確認する事ができます。

さらにクリックすると、カラーコードをコピーする事が可能です。

文字スタイルの確認

カラーアセットと同様に文字スタイルもマウスオーバーすることで、使用箇所がハイライトされます。

さらに、文字スタイルのパネルを開く事で、フォントファミリーや、フォントスタイル、カラー、文字の間隔、行送りの数値が確認できます。

テキストデータを取得する

デザインの要素をクリックする事で、デザインスペックの詳細を確認できます。

デザインスペックのコンテンツから、テキストをワンクリックでコピーする事ができます(便利!)

CSSコードを取得する

さらに要素の情報をCSSコードとして取得する事ができます。

CSSコードはコピーしたい箇所だけ選択すれば、選択するだけでコピーされます。

アセットをCSS変数で取得する

変数パネルから、アセットに追加された、カラーパレットと文字スタイルを変数としてダウンロードする事ができます。

コーディングの際に、アセット情報を一発で変数管理出来るのは便利ですね!

まとめ

以上、今回はAdobeXD「共有」で使える開発共有機能の使い方をご紹介いたしました。使い方の詳しい内容は、Youtubeにもアップしていますので、動画で確認したい方は是非見てみてください。