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

デザインの色をAIで変更する、キャンバスの中で

Figma Designで直接プロンプトを使用して、オブジェクトの再配色・パレット交換・トーン調整をキャンバス上で完結。レイヤーを1つずつ手動で選択する必要はなく、別のツールにエクスポートしてからインポートし直す必要もありません。

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

素早い再配色でデザイン作業に没頭

Figmaのエージェントが面倒な色の調整作業を代行してくれるので、すべてのレイヤーを1つずつクリックして回ることなく、パレットの調整に集中できます。

プロジェクトリストUIのライトモードとダークモードを並べた比較で、AIプロンプトバブルに「このデザインをダークモードに切り替えてください」と表示されています。プロジェクトリストUIのライトモードとダークモードを並べた比較で、AIプロンプトバブルに「このデザインをダークモードに切り替えてください」と表示されています。

デザインが生まれる場所で、色も変える

Figmaのエージェントは、キャンバス上でAI色変更ツールとして機能します。例えば、暖かいトーン、ブランドパレット、ダークモードのように、望む色の変化を説明し、ファイルを離れることなく実際のレイヤーに適用される様子を確認できます。

Figmaキャンバスには、「マイプロジェクト」画面がライトモードとダークモードで並んで表示されており、「この画面をダークモードにして」というAIプロンプトバーが表示されています。Figmaキャンバスには、「マイプロジェクト」画面がライトモードとダークモードで並んで表示されており、「この画面をダークモードにして」というAIプロンプトバーが表示されています。

繰り返し作業から解放され、創造的な判断に集中する

コンポーネント間のアクセントカラーの切り替え、フレーム全体の調整、ライトモードからダークモードへの切り替えといった反復的な色変更作業は引き渡して、本当に重要なデザイン上の判断に集中できます。

色変更は、チームが作業する同じファイル内で行われます。全員が更新されたパレットをすぐに確認し、そのまま作業を進められます。別途エクスポートする必要も、バージョンが混乱することもありません。色変更は、チームが作業する同じファイル内で行われます。全員が更新されたパレットをすぐに確認し、そのまま作業を進められます。別途エクスポートする必要も、バージョンが混乱することもありません。

チームをリアルタイムで同期させる

色変更は、チームが作業する同じファイル内で行われます。全員が更新されたパレットをすぐに確認し、そのまま作業を進められます。別途エクスポートする必要も、バージョンが混乱することもありません。

エージェントの背後にある機能

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

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

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

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

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

    並行プロンプト

    1つずつ順番に時間をかけて行わずに、複数のプロンプトを同時に実行し、指示を並行して評価します。

  • デザインに関するコメントが記載された、Figma AIの共有会話スレッドのスクリーンショットデザインに関するコメントが記載された、Figma AIの共有会話スレッドのスクリーンショット

    共有可能なスレッド

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

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

    スキル

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

Figmaはまるで自分の手の延長のような感覚です。キャンバス上でデザインのアイデアを練ると、後はエージェントが最後の仕上げを行ってくれます。デザインライブラリを接続させることで、デザインからコードへの移行がこれまで以上に速くなりました。

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

Notionのロゴ

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

  • ステップ1: エージェントを開く

    左のレールでエージェントを選択するか、CMD+Enterキーを押します。作業の開始点が欲しい場合は、キャンバスにフレームを追加します。

  • ステップ2: 必要としているものを説明する

    レイアウト、バリエーション、一括編集などといったプロンプトを入力します。デザインライブラリをエージェントにポイントして、エージェントが実際のコンポーネントとスタイルを使用するようにします。

  • ステップ3: キャンバス上でのレビュー

    出力を直接キャンバスで確認します。同じスレッドで微調整するか、別の方向を探求するために並行してスレッドを開始します。

  • ステップ4: 反復を続ける

    適切な結果が得られるまで再度プロンプトを試すか、手動で微調整します。繰り返しのワークフローを次回用に再利用可能なスキルに変換します。

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

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

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

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

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

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

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

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

    今すぐ見る

よくある質問

Figmaのエージェントを左ナビゲーションバーから開くか、CMD + Enterを押してください。変更したいカラー(ブランドパレット、ウォームトーン、ダークモードなど)をテキストで指示すると、エージェントがキャンバス上のレイヤーに直接適用します。外部ツールへの切り替えは不要です。

はい。Figmaのエージェントはコンポーネント、フレーム全体、複数の要素の色を一度のプロンプトで変更できます。レイヤーを1つひとつ手動で選択する必要はありません。

デザインライブラリをエージェントに連携すると、スタイル・トークン・変数を参照してブランドに沿った色を生成します。キャンバスに参考画像を追加すると、さらに精度が上がります。

Figmaのエージェントは、ベクターの生成時に、接続されたデザインライブラリを参照します。これは、出力結果が実際の色、スタイル、トークンを最初から使用することを意味します。一般的なアセットをブランドに一致させるためのスタイル変更にかける時間を減らし、デザインにより多くの時間を費やせます。

Figmaのエージェントは、すべての有料Figmaプランで利用可能です。これはFigma Designの左側のレールにあります。また、CMD + Enterで開くこともできます。現在のオープンベータ期間中はAIクレジットを消費しませんので、探求、実験、フィードバックの共有を試してみてください。