マニュアル キャンセル

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

  1. Adobe XD ユーザーガイド
  2. はじめに
    1. Adobe XD の新機能
    2. よくある質問
    3. Adobe XD でのデザイン、プロトタイプ、共有
    4. 必要システム構成
      1. ハードウェアとソフトウェアの要件
      2. Adobe XD、Big Sur、Apple Silicon | macOS 11
    5. ワークスペースの基本
    6. Adobe XD でのアプリ言語の変更
    7. UI デザインキットへのアクセス
    8. Adobe XD のアクセシビリティ
    9. ショートカットキー
    10. ヒントとテクニック
    11. Adobe XD サブスクリプションオプション
    12. XD スタータープランへの変更
  3. デザイン
    1. アートボード、ガイド、レイヤー
      1. アートボードの基本を学ぶ
      2. グリッドとガイドを使う
      3. スクロール可能なアートボードの作成
      4. レイヤーの操作
      5. スクロールグループを作成する
    2. シェイプ、オブジェクト、パス
      1. オブジェクトの選択、サイズ変更および回転
      2. オブジェクトの移動、分散および整列
      3. オブジェクトのグループ化、ロック、複製、コピー、および反転
      4. オブジェクトの線、塗りおよびドロップシャドウの設定
      5. 繰り返しオブジェクトの作成
      6. 3D 変形を使って透視図を作成
      7. ブール演算を使用したオブジェクトの編集
    3. テキストとフォント
      1. 描画ツールとテキストツールの操作
      2. Adobe XD のフォント
    4. コンポーネントとステート
      1. コンポーネントによる作業
      2. 入れ子になったコンポーネントの操作
      3. コンポーネントへの複数ステートの追加
    5. マスキングと効果
      1. シェイプでマスクを作成
      2. ぼかし効果の操作
      3. グラデーションの作成と修正
      4. ブレンド効果の適用
    6. レイアウト
      1. レスポンシブサイズ変更とレイアウトの制約
      2. コンポーネントとグループへの固定パディングの設定
      3. スタックを使用して動的なデザインを作成する
    7. ビデオと Lottie アニメーション
      1. ビデオを操作
      2. ビデオを使用したプロトタイプの作成
      3. Lottie アニメーションを操作
  4. プロトタイプ
    1. インタラクティブプロトタイプを作成
    2. プロトタイプのアニメーション化
    3. 自動アニメーションでサポートされているオブジェクトプロパティ
    4. キーボードとゲームパッドでプロトタイプを作成
    5. 音声コマンドや音声再生を使用したプロトタイプの作成
    6. タイマートランジションの作成
    7. オーバーレイの追加
    8. 音声機能付きプロトタイプのデザイン
    9. アンカーリンクを作成
    10. ハイパーリンクの作成
    11. デザインとプロトタイプのプレビュー
  5. 共有、書き出し、およびレビュー
    1. 選択したアートボードの共有
    2. デザインおよびプロトタイプの共有
    3. リンクのアクセス権限を設定
    4. プロトタイプを操作
    5. プロトタイプのレビュー
    6. デザインスペックの使用方法
    7. デザインスペックの共有
    8. デザインスペックを確認する
    9. デザインスペックのナビゲート
    10. デザインスペックのレビューとコメント
    11. アセットの書き出し
    12. デザインスペックからのデザイン素材の書き出しとダウンロード
    13. エンタープライズ版のグループ共有
  6. デザインシステム
    1. Creative Cloud ライブラリと連携したデザインシステム
    2. Adobe XD でドキュメントアセットによる作業
    3. Adobe XD での Creative Cloud ライブラリの操作
    4. リンク化アセットから Creative Cloud ライブラリへ移行
    5. デザイントークンを使用する 
    6. Creative Cloud ライブラリアセットの利用
  7. クラウドドキュメント
    1. Adobe XD のクラウドドキュメント
    2. デザインの共同作業と共同編集
    3. 共有されたドキュメントの共同編集
  8. 統合とプラグイン
    1. 外部のデザイン素材
    2. Photoshop で作成したデザインアセットの操作
    3. Photoshop からのアセットのコピー&ペースト
    4. Photoshop のデザインの読み込みまたは起動
    5. Adobe XD での Illustrator アセットの操作
    6. Illustrator のデザインの起動または読み込み
    7. Illustrator から XD へのベクターのコピー
    8. Adobe XD のプラグイン
    9. プラグインの作成と管理
    10. XD への Jira の統合
    11. XD 用 Slack プラグイン
    12. XD 用 Zoom プラグイン
    13. XD から Behance にデザインを公開
  9. XD iOS 版および Android 版
    1. モバイルデバイスでプレビュー
    2. Adobe XD モバイル版に関する FAQ
  10. トラブルシューティング
    1. 既知の問題と修正された問題
      1. 既知の問題
      2. 解決済みの問題
    2. インストールと更新
      1. XD が Windows 上で互換性がないように見える
      2. エラーコード:191
      3. エラーコード:183
      4. XD プラグインのインストールに関する問題
      5. Windows 10 で XD のアンインストールと再インストールを促すダイアログが表示される
      6. 環境設定の移行に関する問題
    3. 起動時のクラッシュ
      1. Windows 10 で起動すると XD がクラッシュする
      2. Creative Cloud からログアウトすると XD が終了する
      3. Windows でのサブスクリプションステータスの問題
      4. Windows で XD を起動すると、アプリがブロックされたという警告が表示される
      5. Windows でのクラッシュダンプの生成
      6. クラッシュログの収集と共有
    4. クラウドドキュメントおよび Creative Cloud ライブラリ
      1. XD クラウドドキュメントで発生する問題
      2. リンクされたコンポーネントに関する問題
      3. ライブラリとリンクに関する問題
    5. プロトタイプ作成、公開、レビュー
      1. macOS Catalina でプロトタイプのインタラクションを収録できない
      2. 公開ワークフローの問題
      3. 公開されたリンクがブラウザーに表示されない
      4. プロトタイプがブラウザーで正しくレンダリングされない
      5. コメントパネルが突然共有リンクに表示される
      6. ライブラリを公開できない
    6. 読み込み、書き出し、その他のアプリの操作
      1. XD での読み込みと書き出し
      2. XD での Photoshop ファイルの使用
      3. XD での Illustrator ファイルの使用
      4. XD から After Effects への書き出し
      5. XD での Sketch ファイルの使用
      6. 書き出しに表示されないサードパーティ製品

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

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

XD のデザイントークン

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

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

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

準備

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

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

デザイントークンの作成

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

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

デザインモード

A. カラーパネル B. ダブルクリックして新しい名前を追加 

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

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

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

デザイントークンの共有

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

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

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

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

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

 

デザイントークンの表示

デザイントークンの表示

A. スペックを表示 B. 変数を表示 

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

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

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

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

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

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

詳細情報

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

視聴時間:4 分

次のステップ

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

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

コミュニティで質問

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

アドビのロゴ

アカウントにログイン