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

キャンバス上で画像をベクター化

Figmaのエージェントを使用して、JPEG、PNG、ラスターグラフィックを、Figma Design内で直接、スケーラブルで編集可能なベクターに変換します。別のツールを併用したり、手動でパスを再構築する必要はありません。

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

ピクセルから直接パスへ

Figma のエージェントは、ラスター画像をキャンバス上でベクターに変換し、デザインのフローを維持しつつファイルをそのまま保ちます。

デザインが存在する場所で直接ベクタライズ

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のキャンバスにJPEG、PNG、または他のラスター画像をドラッグ&ドロップするか、ファイル内の既存の画像を選択します。

  • ステップ2: 変換の説明を記入する

    エージェントにどのようにベクター化するかを指示します。たとえば、シェイプを簡略化する、詳細なアウトラインを描く、または特定の要素のみを対象とするなどです。具体的であるほど、良い結果が得られます。

  • ステップ3:ベクターを確認する

    キャンバス上で変換されたパスを確認します。満足な仕上がりでない場合は、同じスレッドで微調整するか、別のスレッドで他のアプローチを試してみてください。

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

    すべてがそのままベクターパスとして編集可能なので、アンカーを調整したり、シェイプを簡素化したり、必要な成果が得られるまで再度プロンプトを提示したりできます。

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

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

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

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

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

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

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

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

    今すぐ見る

よくある質問

画像のベクター化とは、ピクセルベースのラスターグラフィックを、数学的な曲線とシェイプでできたスケーラブルなベクターパスに変換することを意味します。ラスター画像は拡大するとぼやけますが、ベクターはどのサイズでも鮮明です。Figmaのエージェントは、この変換をキャンバス上で直接行い、JPEGやPNGを編集可能なパスに変換し、スケール、再着色、調整できるようにします。

はい、AIはラスターグラフィック内のシェイプ、エッジ、色を分析して、対応するベクトルパスを生成することによって画像をベクトル化できます。Figmaのエージェントは、Figma Design内で直接この作業を行い、画像を編集可能なベクトルに変換します。他のツールは必要ありません。結果はキャンバス上のパスとして配置され、手動で調整できます。

最も簡単な方法は、トレースを自動的に処理する、AI駆動のツールを使用することです。Figmaのエージェントを使用すると、ラスター画像をキャンバスに追加し、ベクトル化の形式を記述するだけで、その場でエージェントが変換を行います。パスが必要な形になるまで追加入力で調整できます。手動のトレースは不要です。

JPEG圧縮はノイズを引き起こし、クリーンなベクトル化を難しくする可能性があります。解像度が低い、または著しく圧縮された画像は、ギザギザなパスや、過度に複雑なパスを生成することがあります。グラデーションや微妙な陰影のある写真画像は、単色と明確なエッジを持つグラフィックよりも難易度が高くなります。Figmaのエージェントは、鮮明なソース画像で最良の結果を得られます。結果が詳細すぎる場合には簡略化を指示することもできます。

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