デザイントークンを使用して、カラーや文字スタイルにカスタム名を割り当てる方法について説明します。

Adobe XD にデザイントークンを追加して、アセットパネルに表示されるカラーや文字スタイルにカスタマイズした共通の名前を付けることができます。

XD のデザイントークン

デザイントークンを使用すると、アセットの長く複雑な 16 進コードや CSS スニペットを覚えておく必要はありません。簡単に認識できるシンプルな名前を追加できます。 

デザインスペックを公開して他の関係者と共有すると、カスタマイズした名前が表示されます。

カスタム変数を割り当てない場合、Adobe XD はカラーや文字スタイルプロパティに「名称未設定」という接頭辞が付いた一意の名前とクラスを自動的に作成します。

準備

以下の条件を満たしていることを確認してください。

  • デザインスペックとデザインシステムの使用方法を理解している。
  • カラーや文字スタイルに関する共通の命名規則を開発者と共有する。

デザイントークンの作成

新しいアートボードや、既にカラーや文字スタイルを追加した既存のアートボードのデザイントークンを作成できます。

Adobe XD では、フォント名、サイズその他のプロパティの名前の変更をサポートしていません。

デザインモード
A. カラーパネル B. ダブルクリックして新しい名前を追加 

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

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

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

デザイントークンの共有

デザイントークンを作成した後は、デザインスペックを通じて開発者とデザイントークンを共有できます。

デザイントークンの共有
A. 「表示設定」で「開発」を選択 

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

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

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

 

デザイントークンの表示

デザイントークンの表示
デザイントークンの表示と確認

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

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

デザイントークンのダウンロード

デザイントークンのダウンロード
デザイントークンのダウンロード

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

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

詳細情報

デザイントークンの詳細については、このビデオをご覧ください。

視聴時間:4 分


次のステップ

デザイントークンの作成を開始し、利害関係者と共有しました。次のステップでは、デザインスペックの検査方法について説明します。

ご質問または共有するアイデアがある場合

ask_community

ご質問または共有するアイデアがある場合は、Adobe XD コミュニティフォーラムにぜひご参加ください。皆様からのご意見や作品をお待ちしております。