adobe-xd について
adobe-xdは、Adobe XDでのUI/UXデザイン、プロトタイプ作成、共同作業に使うスキルです。アートボードやコンポーネント、インタラクション、共有、開発者への引き継ぎを扱います。
主な機能
- 01アートボードとコンポーネントの作成
- 02リンク付き・アニメーション付きプロトタイプの制作
- 03デザインの共有とコメント収集
- 04開発者への引き継ぎ用アセットの書き出し
活用シーン
- 01Adobe XDでのUI/UXデザイン
- 02インタラクションや動きのプロトタイプ制作
- 03開発者向けデザイン素材の準備
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ full-stack-skills/ design-skills --skill adobe-xdインストール後、Claude Code で/adobe-xdを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yamlLICENSE.txt
詳細
このスキルを使うタイミング
次のようなことをユーザーが希望する場合は、このスキルを使ってください。
- Adobe XD で UI/UX デザイン、プロトタイプ作成、コラボレーションを行う
- コンポーネント、リピートグリッド、音声、アニメーションのプロトタイプを作成する
このスキルの使い方
- 操作:アートボード、コンポーネント、ステートを操作します。プロトタイプのリンクやアニメーションを設定し、共有やコメントを行います。
- 連携:Adobe エコシステムやプラグインを利用します。エクスポートや開発者への引き継ぎを行います。
- 参考資料:Adobe XD の公式ドキュメントを参照します(注:Adobe は Figma などの代替製品への移行を進めているため、新しいプロジェクトでは評価を検討できます)。
ベストプラクティス
- コンポーネントとデザインシステムの一貫性を保ち、プロトタイプをクリック可能にして、説明を十分に記載します。
- 納品用の注釈や画像アセットを用意し、バージョンと権限を管理します。
キーワード
Adobe XD、UI デザイン、プロトタイプ、Adobe
コメント
Markdown 対応