メインコンテンツまでスキップ

プロンプトでデザインを編集する

Figmaのエージェントに変更内容(スペーシング、コピー、色、コンポーネント全体など)を指示すると、Figma Designのデザインレイヤーに編集が直接適用されます。一度説明を記入すれば、それがそのまま実行されます。

  • AirBnb
  • Atlassian
  • Dropbox
  • Duolingo
  • GitHub
  • Microsoft
  • Netflix
  • The New York Times
  • Pentagram
  • Slack
  • Stripe
  • Zoom

編集内容の説明を記入する

手動での調整は省略しましょう。Figmaのエージェントがプロンプトを読み取り、キャンバス上の既存のデザインレイヤーを更新するので、「これではない」と感じていたものが、求めるデザインに変わります。

繰り返し作業を自動化して、集中力を維持

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

レイヤーの新規作成ではなく、既存のレイヤーを編集

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

すべての変更を管理する

プロンプトにガードレール(何を変更するか、何をそのまま保持するか)を決め、まず特定のレイヤーを選択します。これにより、エージェントは編集が必要な部分のみを編集し、それ以外の部分はそのまま保持します。

エージェントを支える機能

デザインチームの実際の働き方に合わせて構築された、Figmaのエージェントの特長を詳しくご紹介します。

  • スクリーンショット。Figma AIエージェントがコンポーネントライブラリに接続され、デザインにブランドトークンを自動適用しているスクリーンショット。Figma AIエージェントがコンポーネントライブラリに接続され、デザインにブランドトークンを自動適用している

    デザインライブラリに接続

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

  • スクリーンショット。Figmaで同時に複数実行されているAIデザインプロンプトスクリーンショット。Figmaで同時に複数実行されているAIデザインプロンプト

    並行プロンプト

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

  • スクリーンショット。共有されたFigma AI会話スレッドとデザインコメントスクリーンショット。共有されたFigma AI会話スレッドとデザインコメント

    共有可能なスレッド

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

  • スクリーンショット。デザインワークフローを自動化するためのFigma AIエージェントのスキルオプションスクリーンショット。デザインワークフローを自動化するためのFigma AIエージェントのスキルオプション

    スキル

    チームのワークフローや規約を、誰でもいつでも実行できる再利用可能な/コマンドにまとめます。

Figmaはまるで自分の手の延長のような感覚です。私はキャンバス上でデザインの発想を行い、今ではエージェントが最後の一歩を担います。デザインライブラリを接続すると、デザインからコードへの移行がこれまで以上に速くなります。

Andy Madrick
Notion、プロダクトデザイナー

Notionのロゴ

Figmaのエージェントの使用を始める

  • ステップ1:編集するものを選択

    Figma Designでファイルを開き、変更するレイヤー、テキスト、フレームを選択します。

  • ステップ2: 編集内容を説明する

    変更する内容と保持する内容をエージェントに指示します。たとえば「ボタンのラベルを更新して、スタイルは維持してください」のように記入します。具体的であるほど、良い結果が得られます。

  • ステップ3: 変更を確認する

    キャンバス上で編集結果を確認します。満足な仕上がりでない場合は、同じスレッドで微調整するか、別のスレッドを試してみてください。

  • ステップ4: 微調整を続ける

    すべての項目が編集可能なので、目的の結果が得られるまで、手作業で微調整することも、プロンプトを続けることもできます。

エージェントの専門家になる

  • Figmaデザインエージェントが登場

    FigmaのAIエージェントがどのように機能するかを実際に見て、自分のワークフローで活用する方法を確認してください。

    続きを読む
  • Figmaエージェントのプレイグラウンドの紹介画面。[開始]ボタンとサンプルチャットプロンプト「Figma、私の読書アプリのレイアウトをいくつか作成できますか?」があるFigmaエージェントのプレイグラウンドの紹介画面。[開始]ボタンとサンプルチャットプロンプト「Figma、私の読書アプリのレイアウトをいくつか作成できますか?」がある

    Figmaエージェントで作業する

    ハンズオンプレイグラウンドで、一括編集からフィードバックの実施まで、Figmaエージェントの機能をステップバイステップのガイダンスで紹介します。

    開始
  • デザインワークフローでFigmaエージェントを使用する方法

    Figmaチームによるステップバイステップのチュートリアルで、Figmaエージェントをデザインワークフローで使用する方法を説明します。

    今すぐ見る

よくある質問

編集プロンプトとは、既存のデザインレイヤー、テキスト、またはキャンバス上の画像を変更するためにFigmaのエージェントに入力する短いテキスト指示です。手動で編集する代わりに、更新する内容(スペースの調整、コピーの書き直し、コンポーネントの改良など)の説明を記入すると、エージェントがそれを適用します。「まだ完璧ではない」状態から「適切なデザイン」を得るための最速の方法です。

プロンプトが具体的であるほど、良い結果が得られます。要素、変更内容、維持すべき制約を指定します。たとえば「ボタンのラベルを『始める』に更新するが、スタイルは元のまま維持する」などです。「良くする」のような曖昧な指示では、エージェントに十分な詳細が伝わりません。したがって、言葉遣い、レイアウト、色、階層など、具体的に何を変えるべきか明示するように心がけてください。

プロンプトに安全策を追加します。変更しない部分をエージェントに指示します。たとえば、「背景は変更しない」、「コンポーネント構造はそのままにする」などです。また、プロンプトを入力する前にキャンバス上の特定のレイヤーを選択すると、エージェントはどれが対象か正確に理解します。

反復はフローの一部です。同じスレッド内でより具体的なプロンプトを続けるか、別の方向性を探るために並行して新しいスレッドを開くことができます。Figma Designでは複数のスレッドを同時に実行できるため、一つのアイデアから先に進めなくなることはありません。

Figmaのエージェントはすべての有料Figmaプランで利用可能です。Figma Designの左ナビゲーションバーから探せます。現在のオープンベータ期間中はAIクレジットを消費しませんので、ぜひ探求や実験を進めて、フィードバックをお寄せください。