Adobe XDでCSS情報を効率的に取得する方法【デザインスペック】

Adobe XDでCSS情報を効率的に取得する方法【デザインスペック

こんにちはTERUです。
フリーランスでホームページやECサイト制作を仕事にしています。

読者の悩み

  • XDのデザインファイルからコーディング情報をもっと簡単に把握したい

本記事では、こういった疑問に答えます。

普段xdファイルからコーディングを行う際、CSSに必要な情報を確認しますが
一つ一つ確認するのは手間がかかります。

通常のコーディング方法はこちらを確認ください。

TERU

行間(line-height)や文字間(letter-spacing)を計算するのもめんどくさい。。

そこで、XDのデザインスペックを利用することでCSS情報の取得をもっと簡単にします。

そもそもAdobe XDって何?何ができるの?という方は「Adobe XDとは?できることや特徴について初心者向けに解説」の記事をご覧ください。

この記事を読んで分かること

  • XDファイルからコーディング情報を簡単に把握する方法が分かる。
  • XDのデザインスペック機能の使い方が分かる

本記事の信頼性

  • フリーランスとしてWordPress案件を中心としたWeb制作をメインに仕事をしている
  • Web制作会社にてディレクターの経験もあり
  • Web制作のフリーランスチーム(GrabAir)でも活動中
目次

デザインスペックとは?

デザインスペックは、元々デザイン情報をチーム内で共有するための機能です。
※もちろん一人で使うことに問題ありません。

利用することで、大きく3つのことができるようになります。

  • デザインへのコメント
  • CSS情報の確認
  • 画像の書き出し

「デザインへのコメント」は複数人で作業する際に、便利な機能です。

ここからは、デザインスペックの利用方法として下記の操作を説明します。

  • 共有リンクの作成
  • CSS情報の確認

共有リンクの作成【デザインスペックの利用】

(1)対象のXDファイルを開いて、画面左上の「共有」を選択します。

(2)画面右側に出てくるパネルにて、下記の情報を設定し、「リンクを作成」をクリックします。

リンク共有リンクのタイトルを設定します。
表示設定「開発」を選択します。
書き出し先「Web」を選択します。
リンクへのアクセス「リンクを知っているすべてのユーザー」を選択します。
リンク作成の設定項目

セキュリティで保護された非公開リンクを作成する場合は、「リンクへのアクセス」にて、「招待されたユーザーのみ」か「パスワードを知っているユーザー」を選択してください。

作成に数秒かかります。

(3)画面の右下にリンクが表示されれば、共有リンクの作成は完了です。

作成したリンクを全員で共有すれば、チームで利用できます。

CSS情報の確認【デザインスペックの利用】

デザインスペックでは、アセットに登録した「カラー」「文字スタイル」をCSSの変数として表示します。
そのため、まず初めにデザイン変数をダウンロードすることが必要になります。

デザイン変数のダウンロード

(1)作成した共有リンクにブラウザでアクセスします。

(2)対象のアートボードを選択し、右パネルの変数ボタンをクリックします。

デザイン変数のダウンロード2

(3)画面右下の「CSSをダウンロード」を選択します。

これでデザイン変数のダウンロードは完了です。

各オブジェクトのCSS確認

次に各オブジェクトのCSS確認方法についてです。

(1)対象のアートボードを選択し、右パネルの「スペック」を選択します。

各オブジェクトのCSS確認

(2)CSS情報を確認したいオブジェクトを選択すると、画面右下にCSS情報が表示されます。

※アセットに登録した「カラー」や「文字スタイル」は、変数で表示されます。

先ほどダウンロードしたCSSファイル(デザイン変数)は事前に読み込んでおきましょう。

注意事項

取得できるCSS情報は、完璧ではないので注意しましょう。
例えば、各パラメーターの単位など自分で計算しないといけない箇所もあります。

デザインスペックは、参考程度に利用するだけでも、コーディング効率は向上するので、ぜひ一度試してみてください。

共有リンクの削除方法

共有リンクを削除したい場合の手順は下記になります。

(1)対象のXDファイルを開いて、画面左上の「共有」を選択します。

共有リンクの削除方法

(2)画面右側に出てくるパネルで、リンクタイトル右側の下矢印→「リンクを管理…」を選択します。

共有リンクの削除方法2
共有リンクの削除方法3

(3)Creative Cloudの管理画面から共有リンクの一覧が確認できます。

(4)削除対象のリンクにチェックを入れて、「完全に削除」を選択します。

(5)確認画面が表示されるので、「完全に削除」を選択して完了です。

共有リンクの削除方法は、以上になります。

補足:Zeplinと比較してみた

デザインスペックと同じような機能を持っているZeplinというツールと比較してみました。

Zeplinの具体的な使い方は下記の記事で説明しています。

取得情報の比較

特定の箇所で、それぞれの取得情報を確認してみます。

デザインスペックの場合

デザインスペックの場合

Zeplinの場合

Zeplinの場合

結論、取得できる情報に違いはほとんどないです。
XDファイルに登録されたアセット情報を変数として利用するかしないかに違いがあります。

個人的には、下記の理由からZeplinを利用することが多いです。

  • デザインスペックは、デザイン変数の命名規則など、デザイン時点で設計しておかないと使いにくい
    →案件によって、デザイナーも変わるので難しい。。
  • XD以外のデザインファイル(PhotoshopやFigmaなど)でコーディングすることも多い

デザインからコーディングまで一括で案件を対応できる場合は、デザインスペックを上手に活用できると思います。

Adobe XDの関連記事

アートボード機能

コンポーネント機能

リピートグリッド機能

スタック機能

その他

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
目次
閉じる