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

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

読者の悩み

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

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

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

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

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

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

Adobe XDは、2023年1月に単体販売が終了になりました。
今後は、Adobeが2022年9月に買収したデザインツール「Figma」の方に開発が注力していくかもしれません。

アドビが、同社のプロトタイピングツール「Adobe XD」の単体販売を終了したことが1月24日までに分かった。すでに、同社プロダクト一覧ページからAdobe XDの項目が消えている。ただし、「Creative Cloud」コンプリートプランには引き続き提供されており、契約すれば新規でのインストールも可能だ。

「Adobe XD」単体販売を終了、サポート継続へ　Figmaとのすみ分けは「何も決まっていない」 – ITmedia NEWS

Adobe XDをまだ持っていないという方は、Adobe CCを購入する必要があります。

Creative Cloudコンプリートプランを少しでも安く購入したい方は、「デジハリ経由でAdobe CCコンプリートプランを安く購入する方法」の記事をご覧ください。

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

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

本記事の信頼性

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

デザインスペックとは？

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

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

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

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

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

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

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

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

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

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

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

作成に数秒かかります。

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

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

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

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

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

（１）作成した共有リンクにブラウザでアクセスします。

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

（３）画面右下の「CSSをダウンロード」を選択します。

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

各オブジェクトのCSS確認

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

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

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

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

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

共有リンクの削除方法

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

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

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

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

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

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

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

補足：Zeplinと比較してみた

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

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

取得情報の比較

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

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

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

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

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

Adobe XDの関連記事

アートボード機能

コンポーネント機能

リピートグリッド機能

スタック機能

その他