
デザインライブラリに接続
実際のコンポーネント、トークン、バリアブルを使用して生成および改良を行います。後で差し替える必要のあるプレースホルダーUIは使用しません。
メインコンテンツまでスキップ
Figmaのエージェントに変更内容(スペーシング、コピー、色、コンポーネント全体など)を指示すると、Figma Designのデザインレイヤーに編集が直接適用されます。一度説明を記入すれば、それがそのまま実行されます。
手動での調整は省略しましょう。Figmaのエージェントがプロンプトを読み取り、キャンバス上の既存のデザインレイヤーを更新するので、「これではない」と感じていたものが、求めるデザインに変わります。

手動で変更を加える代わりに、スペースの調整、コピーの書き直し、コンポーネントの入れ替えなど、変更の説明を記入すると、それ以上のクリックは不要になり、デザインに集中できるようになります。

プロンプトを使用して既存のデザインを編集します。実際のレイヤー、テキスト、コンポーネントに加えた変更を適用します。新しいものを生成して作り直す必要はありません。

プロンプトにガードレール(何を変更するか、何をそのまま保持するか)を決め、まず特定のレイヤーを選択します。これにより、エージェントは編集が必要な部分のみを編集し、それ以外の部分はそのまま保持します。
デザインチームの実際の働き方に合わせて構築された、Figmaのエージェントの特長を詳しくご紹介します。

実際のコンポーネント、トークン、バリアブルを使用して生成および改良を行います。後で差し替える必要のあるプレースホルダーUIは使用しません。

複数のプロンプトを同時に実行することで、並行して評価できます。時間をかけて指示を一つずつ評価する必要はありません。

スレッドを共有すれば、チームはデザインの背後にあるすべてのプロンプト、コンテキスト、反復履歴を確認できます。引き渡しは別途必要ありません。

チームのワークフローや規約を、誰でもいつでも実行できる再利用可能な/コマンドにまとめます。
Figmaはまるで自分の手の延長のような感覚です。私はキャンバス上でデザインの発想を行い、今ではエージェントが最後の一歩を担います。デザインライブラリを接続すると、デザインからコードへの移行がこれまで以上に速くなります。
Andy Madrick
Notion、プロダクトデザイナー
Figma Designでファイルを開き、変更するレイヤー、テキスト、フレームを選択します。
変更する内容と保持する内容をエージェントに指示します。たとえば「ボタンのラベルを更新して、スタイルは維持してください」のように記入します。具体的であるほど、良い結果が得られます。
キャンバス上で編集結果を確認します。満足な仕上がりでない場合は、同じスレッドで微調整するか、別のスレッドを試してみてください。
すべての項目が編集可能なので、目的の結果が得られるまで、手作業で微調整することも、プロンプトを続けることもできます。
編集プロンプトとは、既存のデザインレイヤー、テキスト、またはキャンバス上の画像を変更するためにFigmaのエージェントに入力する短いテキスト指示です。手動で編集する代わりに、更新する内容(スペースの調整、コピーの書き直し、コンポーネントの改良など)の説明を記入すると、エージェントがそれを適用します。「まだ完璧ではない」状態から「適切なデザイン」を得るための最速の方法です。
プロンプトが具体的であるほど、良い結果が得られます。要素、変更内容、維持すべき制約を指定します。たとえば「ボタンのラベルを『始める』に更新するが、スタイルは元のまま維持する」などです。「良くする」のような曖昧な指示では、エージェントに十分な詳細が伝わりません。したがって、言葉遣い、レイアウト、色、階層など、具体的に何を変えるべきか明示するように心がけてください。
プロンプトに安全策を追加します。変更しない部分をエージェントに指示します。たとえば、「背景は変更しない」、「コンポーネント構造はそのままにする」などです。また、プロンプトを入力する前にキャンバス上の特定のレイヤーを選択すると、エージェントはどれが対象か正確に理解します。
反復はフローの一部です。同じスレッド内でより具体的なプロンプトを続けるか、別の方向性を探るために並行して新しいスレッドを開くことができます。Figma Designでは複数のスレッドを同時に実行できるため、一つのアイデアから先に進めなくなることはありません。
Figmaのエージェントはすべての有料Figmaプランで利用可能です。Figma Designの左ナビゲーションバーから探せます。現在のオープンベータ期間中はAIクレジットを消費しませんので、ぜひ探求や実験を進めて、フィードバックをお寄せください。
Figmaのエージェントで迅速に構築する