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

キャンバスでスタイルを瞬時に変更

Figma Designの簡単なプロンプトで、画像、コンポーネント、フレーム全体などのデザイン要素の見た目を変えましょう。希望するスタイルを説明すると、エージェントがそのスタイルを直接レイヤーに適用します。

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

一からやり直さずに、新しい方向性を探る

既存の作品にスタイルの変更を適用し、プレースホルダーのモックアップではなく、実際のデザイン上でどのような見た目の違いが出るかを確認しましょう。

「Open Fashion」のEC商品詳細ページの2つのバージョン。AI生成コンテンツの適用前と適用後であり、プロンプトの吹き出しには「このWebサイトにリアルな説明文と画像を追加してください」と書かれています。「Open Fashion」のEC商品詳細ページの2つのバージョン。AI生成コンテンツの適用前と適用後であり、プロンプトの吹き出しには「このWebサイトにリアルな説明文と画像を追加してください」と書かれています。

デザインが生まれる場所で、スタイルも変換

Figmaのエージェントは、キャンバス上でAIスタイル変更ツールとして直接動作するため、別のツールに切り替えたり、一から作り直したりすることなく、デザインの趣きを変えたり、視覚的な表現を更新したり、新しい方向性を模索したりすることができます。

Dogearedアプリの4つのモバイルオンボーディング画面が並んで表示され、AIプロンプトの吹き出しには「ブラウンカラースキームとダークモードに切り替えてください」と書かれています。Dogearedアプリの4つのモバイルオンボーディング画面が並んで表示され、AIプロンプトの吹き出しには「ブラウンカラースキームとダークモードに切り替えてください」と書かれています。

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

手作業での再現は不要です。希望するスタイル(ヴィンテージ、ミニマル、大胆、イラスト調など)を指定するだけで、面倒な作業はエージェントに任せ、クリエイティブな判断に集中できます。

Figma AIチャットパネルには、博物館アプリの「Explore」画面に焦点を当てた、同様のコメント12件の概要が表示され、キャンバス上にコラボレーターのアバターが見えます。Figma AIチャットパネルには、博物館アプリの「Explore」画面に焦点を当てた、同様のコメント12件の概要が表示され、キャンバス上にコラボレーターのアバターが見えます。

変更点に対するチーム全体の認識を合わせる

スタイルの変換は、チームが作業している同じファイルで行われます。全員が更新された方向をすぐに確認し、そのまま作業を進められます。バージョンが混乱することも、アセットが喪失することもありません。

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

デザインチームの実際の働き方に合わせて構築された、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: リスタイルするものを選択

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

  • ステップ2: 新しいスタイルを説明する

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

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

    キャンバスの新しいデザインを確認します。まだ満足のいく仕上がりではありませんか?同じスレッドで微調整を行うか、別のスレッドで別の方向性を試してみてください。

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

    キャンバス上のすべての要素は編集可能なままなので、カラー、エフェクト、または詳細を手動で微調整したり、再度プロンプトして、納得の行くスタイルになるまで調整できます。

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

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

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

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

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

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

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

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

    今すぐ見る

よくある質問

はい、Figmaのエージェントは、デザインや画像のスタイルをキャンバス上で直接変換できます。希望のスタイル(ヴィンテージ、ミニマル、イラスト調、大胆など)を指定すると、エージェントが選択したレイヤーにそのスタイルを適用します。フレーム、コンポーネント、画像、その他のデザイン要素で動作し、すべて編集可能な状態を保ち続けることで、さらに洗練させることができます。

はい、Figmaのエージェントは、Figma Designの中でテキストプロンプトからベクター画像を生成します。出力は完全に編集可能で、他のベクターと同様に、パス、色、シェイプを調整することができます。変換ステップや別のツールは必要ありません。

プロンプトで、どのような見た目にしたいか具体的に述べてください。「もっと良くして」という代わりに、「温かみのあるレトロなカラーパレットに変えて」や「白空間を多く使用したクリーンでミニマルなスタイルに適用して」と伝えてみてください。キャンバスに参考画像を追加すると、エージェントに視覚的なコンテクストが得られ、しばしば結果が向上します。

もちろんです。Figmaのエージェントからのスタイル変換はすべて、キャンバス上の編集可能なレイヤーとして残ります。変更を完全に元に戻したり、特定の要素を手動で調整したり、同じスレッド内で再度プロンプトを提示して調整することができます。並行スレッドを開くことで、以前の作業を失うことなく、別の方向も探索できます。

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