edit-figma-design

Figma デザインを編集する

概要

このスキルでは、自然言語の説明から Figma のデザインを直接作成、または更新します。Figma ライブラリの検索とファイルの直接編集を組み合わせ、デザインを製品やコードベースにより適合させる必要がある場合に限り、Warp の幅広いエージェント機能を活用します。

このスキルを使用する場面

ユーザーが次のことを希望する場合に、このスキルを使用します。

• 書かれた説明から、Figma で新しい画面、フロー、コンポーネント、またはモックアップをデザインする
• テキストによるフィードバックをもとに、既存の Figma ファイルを調整または拡張する
• Figma で直接、初期段階のワイヤーフレームまたは高精度なデザインを作成する
• Figma のデザインを既存のデザインシステムまたは製品用語に適合させる

次の場合は、このスキルを使用しないでください。

• デザインから本番用コードを作成したい場合 — implement-design を使用します
• 実行中のページやアプリを Figma に取り込みたい場合 — figma-generate-design を使用します
• 既存の Figma のコンテキストを確認または取得するだけの場合 — pull-figma-content を使用します

前提条件

• Figma MCP サーバーが接続され、アクセス可能である必要があります。
  • search_design_system、create_new_file、use_figma が利用可能であることを確認します。
• 作業を進めるために必要な最小限の情報を集めます。
  • 何をデザインするか
  • 既存の Figma ファイルを使用するか、新しいファイルを作成するか
  • 既存のデザインシステムまたはコードベースに適合させるか
• ユーザーから作業を始めるのに十分な詳細が示されていない場合に限り、確認の質問をします。質問は簡潔にし、可能であればまとめて一度に尋ねます。

必須のワークフロー

次の手順を順番に実行してください。手順を省略してはいけません。

ステップ 1：Figma での作成依頼かどうかを確認する

実装を依頼されている場合は、作業を中止し、implement-design を参照してください。

スクリーンショットから Figma への変換や、ウェブページの取り込みを希望している場合は、作業を中止し、figma-generate-design を参照してください。このスキルはキャプチャをもとにしたワークフロー向けであり、このスキルはテキストからデザインを作成するためのものです。

ステップ 2：最初に保存先ファイルを決める

search_design_system と use_figma のどちらにも fileKey が必要なため、検索や編集を始める前に保存先を決めます。

ユーザーが既存の Figma URL またはファイルキーを指定した場合：

• fileKey を抽出して使用します。
• 返信時には、指定された URL を再利用します。

ユーザーが新しいファイルを希望する場合：

1. 依頼内容に基づいて、わかりやすいファイル名を決めます。
2. ユーザーがすでに planKey を指定している場合は、それを使用します。
3. 指定されていない場合は、Figma MCP の whoami ツールを呼び出して、認証済みの Figma ユーザーと利用可能なプランを確認します。これはシェルの whoami コマンドではありません。
4. プランが 1 つだけの場合は、その key を使用します。
5. プランが複数ある場合は、どのチームまたは組織を使用するかユーザーに尋ねます。
6. create_new_file(editorType="design", fileName=..., planKey=...) を呼び出します。
7. 返された fileKey と URL を保存します。最初に使用可能なドラフトができた時点で、URL を共有します。

ステップ 3：必要な場合に限り、適切なコンテキストを集める

Figma 以外のコンテキストがどの程度必要かを判断します。

ユーザーが探索的なコンセプト、ワイヤーフレーム、またはモックアップを希望しており、コードベースへの適合を求めていない場合は、Figma MCP 内だけで作業します。

ユーザーが既存の製品やデザインシステムにデザインを適合させたい場合は、Warp のエージェントコンテキストを必要に応じて活用します。

• AGENTS.md や WARP.md がある場合は、プロジェクトのルールを読みます
• セマンティックなコードベース検索、grep、ファイルの読み取りを使って、関連するコンポーネント、製品用語、レイアウトパターン、デザイントークンのソースを見つけます
• プロンプトが別のシステムにある製品要件や、明示的なインスピレーションの依頼などに直接依存する場合に限り、他の MCP ソースやウェブ検索を使用します
• このスキルの通常のワークフローでは、コードの編集、REPL コマンドの実行、またはコンピューター操作を行わないでください

ステップ 4：作成する前にデザインシステムを検索する

新しいコンポーネントやスタイルを作成する前に、解決した fileKey を使って search_design_system を呼び出します。

まず、再利用性の高いアセットを検索します。

• コンポーネントとコンポーネントセット
• 変数とトークンに似た値
• 色、タイポグラフィ、間隔、エフェクトのスタイル

ユーザーのドメイン用語と、プロジェクトのルールやコードベースの検索で見つかった名前から検索を始めます。

必要に応じて、返されたライブラリキーを使って後続の検索を絞り込み、すぐに検索範囲を広げるのは避けます。

一から作り直すよりも、一致するアセットを再利用してインポートすることを優先します。

ステップ 5：use_figma を安全に準備する

最初に use_figma を呼び出す前に、編集の順序を計画し、ツールで必須とされている Plugin API の制約に従います。

作成計画は段階的に進めます。

1. ページとフレームの構造を作成する
2. レイアウトと主要なセクションを整える
3. デザインシステムのアセットを再利用またはインポートする
4. 変数、スタイル、タイポグラフィを適用する
5. コンテンツを追加して仕上げる
6. ファイルの現状に基づいて、対象を絞って修正する

ステップ 6：小さな use_figma ステップでデザインを編集する

1 つの大きなスクリプトではなく、複数の小さな use_figma 呼び出しを使います。

適切なステップの区切り方：

• ページと最上位のフレームを作成する
• ヘッダー、サイドバー、ヒーロー、コンテンツ領域をレイアウトする
• 再利用可能なコンポーネントを 1 ファミリーずつインポートまたは配置する
• 色、テキストスタイル、間隔の変数を適用する
• 特定のセクションのコピー、状態、配置を更新する

各ステップの後に結果を確認し、前のステップが成功してから次に進みます。

コンポーネントのようなものを作成する場合は、ステップ 4 で見つかったインポート済みのライブラリアセットを優先します。

ステップ 7：デザインを渡し、次の選択肢を示す

最初に使えるドラフトができたら、次のようにします。

• Figma の URL があれば提示する
• 作成または更新した内容を大まかにまとめる
• Figma で修正するかユーザーに確認する

承認済みのデザインをコードで実装するようユーザーから求められた場合は、このスキルの使用を中止し、implement-design を参照します。

Warp エージェントのガイダンス

不要な作業を増やすのではなく、手動でプロンプトを入力する手間を減らすために、Warp の幅広い機能を活用します。

このスキルで Warp エージェントの機能を活用する例：

• リポジトリ内の既存のコンポーネント名やデザイントークンを見つける
• レイアウト、命名、ブランドに関する制約を定めているプロジェクトルールを読む
• ユーザーが明示的に利用している他の接続システムから、プロダクト要件を取得する

通常、このスキルでは不要なもの：

• シェルコマンドや REPL の利用
• コードの編集
• コンピューター操作による検証
• ユーザーから具体的な依頼がない状態での広範なウェブ調査

例

例 1：プロダクトの説明から新しいファイルを作成する

ユーザーの依頼：「デスクトップアプリ向けの請求概要画面を Figma でデザインしてください。既存のデザインシステムを使って、新しいファイルを作成してください。」

操作：

1. これはコードの実装ではなく、Figma での作成であることを確認します。
2. 必要に応じて whoami を呼び出してから create_new_file を呼び出し、作成先を解決します。
3. 請求に関する用語や既存のコンポーネントを把握する必要がある場合に限り、AGENTS.md または WARP.md を読み、コードベースを検索します。
4. 請求に関連する検索語句で search_design_system を呼び出します。
5. 小さな use_figma ステップで画面を作成します。
6. 新しい Figma ファイルの URL を提示し、修正するかユーザーに確認します。

例 2：既存の Figma ファイルを更新する

ユーザーの依頼：「この Figma ファイルにオンボーディングチェックリストを追加してください：https://figma.com/design/FILEKEY/Product?node-id=1-2」

操作：

1. 既存の URL から fileKey を抽出します。
2. 新しいものを作成する前に、チェックリスト、カード、バッジ、進捗状況に関するアセットをデザインシステムで検索します。
3. 段階的に use_figma を呼び出して、新しいセクションを追加します。
4. 同じ Figma URL を提示し、変更内容をまとめます。

例 3：純粋な探索的コンセプト

ユーザーの依頼：「Figma で、モバイル向けワークアウトプランナーの初期モックアップを作成してください。まだ私のコードベースに合わせる必要はありません。」

アクション：

1. 必要に応じて新しいファイルを作成します。
2. コードベースの検索とプロジェクトルールの確認は省略します。
3. 関連する Figma ライブラリのアセットを再利用する場合に限り、search_design_system を使用します。
4. 小さな use_figma のステップで、Figma 上にコンセプトを直接作成します。
5. ファイルのリンクを共有し、次に何を調整するか尋ねます。

よくある問題と対応

問題：既存のファイルを使うのか、新しいファイルを使うのかユーザーが指定していない

保存先を確定するための質問を一つだけします。fileKey を取得するまでは、search_design_system や use_figma を開始しないでください。

問題：create_new_file で利用できる Figma のプランが複数ある

どのチームまたは組織を使用するか、ユーザーに確認します。推測しないでください。

問題：既存のプロダクト規約に合わせるよう求められているが、依頼が曖昧

まずプロジェクトのルールを確認します。次に、依頼された画面に関連するコンポーネントと規約だけを収集するため、対象を絞ってコードベースを検索します。

問題：Figma のデザインと実装の両方を求められている

依頼の主目的が Figma 上での作成である場合に限り、まず Figma のデザインを作成または更新します。実装が主目的である場合は、代わりに implement-design を参照します。デザインの承認後、別のステップで実装を進めることができます。

問題：use_figma が失敗する、またはスクリプトが大きくなっている

タスクを複数の小さな use_figma 呼び出しに分割します。まず構造を作成し、次にスタイルを設定してから、対象を絞って修正します。

追加リソース

• Figma MCP サーバーのドキュメント
• Figma MCP サーバーのツールとプロンプト