デザイントークンを使用する

デザインモードで次の操作をおこないます。

1. アセットパネルに移動します。「+」をクリックして、カラーや文字スタイルを表示します。
2. アセットのデフォルト名をダブルクリックし、新しい名前を入力します。 名前は、カラーや文字スタイルに対応する変数やクラスを作成するために使用されます。

 XD は、名前が変更されず、通常名称未設定で始まるカラーと文字スタイルの名前を自動的に作成します。

共有モードで次を実施します。

1. 「表示設定」ドロップダウンから「開発」を選択します。
   リンク共有機能は Web 用に書き出されたデザインスペックリンクでのみサポートされるため、「書き出し先 Web」が選択されていることを確認します。
2. 「リンクを作成」をクリックします。生成されたリンクをコピーして、開発者と共有します。詳しくは、デザインプロトタイプの共有を参照してください。

共有モードで作成されたリンクを検証する方法については、「デザイントークンの表示」を参照してください。

共有デザインスペックリンクにデザイントークンを表示するには、ブラウザーで共有リンクを開き、次の操作をおこないます。

• デザイントークンとその 16 進コードを表示するには、「</>」をクリックします。パネルに、対応するデザイントークンが表示されます。デザイントークンにカーソルを合わせると、16 進コードが表示されます。
• 変数を表示するには、「{ }」をクリックします。

共有デザインスペックリンクからデザイントークンをダウンロードするには、次の操作をおこないます。

1. ブラウザーで共有リンクを開きます。
2. CSS コードスニペットに移動するか、{ } 変数アイコンを選択します。
3. 「CSS をダウンロード」をクリックして、これらの変数を CSS コードスニペットとしてダウンロードします。ダウンロードしたスニペットにデザイントークンが含まれています。
4. ダウンロード後、スニペットをコピーして実装コードに貼り付けます。