adobe-xd

このスキルを使う場面

次のことを行いたいとユーザーが希望する場合は、いつでもこのスキルを使います。

• Adobe XD のアートボードやコンポーネントを使って、UI/UX デザインを作成または編集する
• トランジション、自動アニメーション、音声トリガーを使って、インタラクティブなプロトタイプを作成する
• リピートグリッド、コンポーネントの状態、レスポンシブリサイズを扱う
• 開発者への引き継ぎ用に、デザイン仕様やアセットをエクスポートする
• 共有ライブラリやデザイントークンを管理する、または共有リンクを使って共同作業する

このスキルの使い方

1. デザインの作成

1. アートボードを作成する：デバイスのプリセットまたはカスタムサイズを選び、画面ごとにアートボードに名前を付けます（例：「ログイン」、「ダッシュボード」）。
2. コンポーネントを作成する：要素を選択 -> 右クリック -> 「コンポーネントを作成」。カテゴリにはスラッシュ区切りの名前を使います（例：Button/Primary、Button/Secondary）。
3. 状態を追加する：コンポーネントを選択 -> 「デフォルトの状態」ドロップダウン -> 「新しい状態」で、ホバー状態やアクティブ状態を作成します。
4. リピートグリッドを使う：要素を選択 -> 「リピートグリッド」で、リストやカードグリッドを作成します。ハンドルをドラッグして、数や間隔を調整します。

2. プロトタイピング

1. プロトタイプモードに切り替えます。
2. トリガーとなる要素からターゲットのアートボードへコネクターをドラッグします。
3. トランジションを設定します。トリガー（タップ／ドラッグ／音声）、アクション（トランジション／自動アニメーション／オーバーレイ）、イージングを指定します。
4. 再生ボタン（Cmd+Enter / Ctrl+Enter）でプレビューします。

3. 開発者への引き継ぎ

1. 共有 -> 「開発用に共有」をクリックします。
2. 開発者は公開されたリンクから、余白、色、フォントを確認し、アセットをエクスポートできます。

Example prototype link setup:
  Trigger: Tap on "Login" button
  Action: Transition to "Dashboard" artboard
  Animation: Auto-Animate, 0.3s ease-out

ベストプラクティス

• 共有デザインライブラリを使って、コンポーネントの一貫性を保ちます。
• プロトタイプのすべての要素をリンクし、インタラクションについて明確に注釈を付けます。
• マルチ密度画面向けに、アセットを1x、2x、3xでエクスポートします。
• バージョン履歴と共有リンクを使って、チームで共同作業します。
• 注：Adobe は Figma を推奨し、XD の提供を終了しています。新しいプロジェクトでは移行を検討してください。

キーワード

adobe xd、UI デザイン、プロトタイプ、アートボード、コンポーネント、リピートグリッド、開発者への引き継ぎ、Adobe