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

キャンバスで直接アプリのアイコンを生成

実際のデザインのトークンやスタイルを活用し、Figma Designで直接AIを使用して、洗練されたアプリアイコンを作成しましょう。複数の方向性を同時に検討できるため、別のツールを行き来したり、一から作り直したりする必要はありません。

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

最初のコンセプトから最終的なアイコンまで、より迅速に

Figmaのエージェントは、実際のデザインシステムを使用してアプリのアイコンを生成するため、どのバリエーションも最初からブランドに沿ったものになります。

AIで生成されたデザインレイアウトが探索されているFigmaキャンバスAIで生成されたデザインレイアウトが探索されているFigmaキャンバス

高い忠実度で、さらに探求

実際のコンポーネント、色、およびスタイルを使用して、アイコンの複数の方向性を同時に生成します。すべてのオプションは、本番環境への準備が整ったベクターとしてキャンバスに配置されます。後で再構築する必要がある粗削りのプレースホルダーではありません。

デザイン全体に一括編集が適用されている様子を示すFigmaのAIエージェントパネルデザイン全体に一括編集が適用されている様子を示すFigmaのAIエージェントパネル

雑務を自動化して、集中力を維持

アイコンのバリエーションを手動で作成する面倒な設定をスキップします。必要な内容を説明し、エージェントにオプションを生成させ、アイコンを際立たせるためのクリエイティブな判断ができるようエネルギーを集中させましょう。

チームのフィードバックがデザインに統合されている様子を示すFigma AIエージェントパネルチームのフィードバックがデザインに統合されている様子を示すFigma AIエージェントパネル

チームの足並みを揃え、サイクルを完結

アイコンは、チームが作業している同じファイルに生成されます。すべての人がオプションやその背後にあるプロンプトを見て、すぐに作業を進めることができます。エクスポートや引き渡しの際に、情報が失われることはありません。

アイコンの背後にある機能

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

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

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

    エージェントにデザインライブラリを指定して、すべてのアイコンに汎用的なデフォルト設定ではなく、実際のカラートークン、スタイル、ブランド要素が使用されるようにします。

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

    プロンプトを並行して実行する

    アイコンの複数の方向性を探ります。大胆なオプション、ミニマルなもの、そして予想外のものを同時に生成し、すべてを同じキャンバスに表示します。

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

    共有可能なスレッド

    スレッドを共有すると、チーム全体が完全なプロンプト、コンテキスト、反復履歴を確認できます。ステークホルダーは、各方向性の背後にある考え方を理解しています。

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

    繰り返し可能なワークフローのためのスキル

    アイコン生成のワークフローを再利用可能なスキルに変換しましょう。新しいアプリのために再度実行するか、1つのコマンドを実行して、チームメンバーに引き継ぐことができます。

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

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

Notionのロゴ

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

  • エージェントを開く

    左のレールでエージェントを選択するか、CMD+Enterキーを押します。ターゲットプラットフォームに合わせてキャンバスにフレームを追加してください。

  • アイコンについて説明する

    必要な項目(アプリの目的、スタイルの方向性、ブランド要素)をエージェントに伝えます。エージェントにデザインライブラリを指定し、実際のコンポーネントが使用されるようにします。

  • キャンバスで確認する

    生成された画面をキャンバスで確認します。同じスレッドで微調整するか、並行スレッドを開いて別の方向性を試すことができます。

  • 微調整してエクスポートする

    すべてが編集可能なベクターとして生成されます。手動で詳細を調整するか、再度プロンプトを実行して必要なサイズでエクスポートします。

エージェントのエキスパートになる

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

    FigmaのAIエージェントの実際の動作を見て、自分のワークフローにどのように活用できるかをご確認ください。

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

    Figmaエージェントと一緒に作業を進める

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

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

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

    今すぐ見る

よくある質問

AIアプリのアイコンジェネレーターは、テキストの説明からアプリのアイコンを作成し、デザイナーが複数の方向性を迅速に探ることができるように支援します。Figmaのエージェントは、実際のデザインシステム(色、スタイル、ブランド要素)を使用して、デザインのキャンバス上で直接アイコンを生成するため、すべてのオプションが最初から本番環境で利用可能な状態になります。

エージェントを左側のレールから開くか、CMD + Enterを押して、必要なアイコン(アプリの目的、ビジュアルスタイル、ブランド要素)を説明してください。エージェントにデザインライブラリを指定し、実際のトークンが使用されるようにします。アイコンはキャンバス上で編集可能なベクトルとして生成され、微調整やエクスポートの準備が整います。

Figmaのエージェントは完全に編集可能なベクターとしてアイコンを生成するため、最終的な出力結果を自由に制御することができます。寸法を調整し、背景を削除し、iOSとAndroidストアに必要な正確なサイズでエクスポートすることができます。エージェントは方向性を迅速に探る手助けをしますが、最終的な仕上げはユーザーが行います。

iOSでは1024×1024ピクセルのアイコンが必要ですが、Androidでは512×512ピクセルを基準にしています。Figmaのエージェントはキャンバス上でアイコンをベクトルとして生成するため、品質を損なうことなく任意の解像度でエクスポートできます。プロンプトを入力する前にフレームサイズを設定するか、生成後にサイズを変更してください。

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

Powered by Fruition