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

料金表をキャンバス上で生成

必要なプランをFigmaエージェントに伝えるだけで、実際のコンポーネントとスタイルを使ってFigma Design上に直接料金表が作成されます。テンプレートのカスタマイズも、別のツールを行き来する必要もありません。

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

デザインの完成度を高めながら複数のレイアウトを検討

初期の検討段階から最終的なハンドオフまで、実際のトークンを使い、チームと同期した状態を保てる料金表です。

AIが生成したデザインレイアウトを検討しているFigmaのキャンバスAIが生成したデザインレイアウトを検討しているFigmaのキャンバス

料金表を素早くチームで作成

Figmaエージェントは、実際のコンポーネント、カラー、タイプスタイルを使って料金表を生成します。作り直しが必要なプレースホルダーのボックスではありません。3段階プラン、機能比較、トグル形式のレイアウトを、1つのプロンプトでまとめて検討できます。

デザイン全体に一括編集を適用しているFigma AIエージェントパネルデザイン全体に一括編集を適用しているFigma AIエージェントパネル

単純作業を削減し、集中力を維持

列、機能行、バッジのスタイルの手動セットアップは不要です。プランを説明するだけでエージェントが構造を組み立ててくれるため、重要なポジショニングや価格設定の意思決定に集中できます。

チームのフィードバックをデザインに統合しているFigma AIエージェントパネルチームのフィードバックをデザインに統合しているFigma AIエージェントパネル

チームの足並みを揃え、認識のズレを解消

生成された料金表はすべて共有ファイルに反映され、すぐにフィードバックを得られます。関係者はスクリーンショットではなく実際のデザインを確認でき、開発者もすぐにトークンを確認できます。エクスポートで何かが失われることはありません。

料金表を支える機能

デザインチームの実際の働き方に合わせて作られた、Figmaエージェントならではの特長を詳しく見ていきましょう。

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

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

    エージェントをライブラリに接続すると、ボタンスタイル、カラートークン、間隔が自動的に取り込まれるため、すべての料金表が最初からデザインシステムに一致します。

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

    並行プロンプト

    水平レイアウト、縦型カード、機能比較グリッドを一度に検討できます。1つが完了するのを待つ必要はありません。

  • デザインへのコメントが付いた、共有されたFigma AI会話スレッドのスクリーンショットデザインへのコメントが付いた、共有されたFigma AI会話スレッドのスクリーンショット

    共有可能なスレッド

    スレッドを共有すると、チームは料金表の背景にあるプロンプト全体、コンテキスト、反復履歴を確認できます。スクリーンショットによるハンドオフや理由の欠落はありません。

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

    ワークフローをスキル化

    最も効果的な料金表のプロンプトを再利用可能な/コマンドにまとめておけば、新しいページに料金表が必要になったときにチームがいつでも実行できます。

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

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

Notionのロゴ

Figmaエージェントを使ってみる

  • エージェントを開く

    左サイドバーで「エージェント」を選択するか、CMD + Enterを押します。作業するフレームをキャンバスに追加します。

  • 料金プランを説明する

    必要なプラン数、強調したい機能をエージェントに伝え、実際のコンポーネントを使用するためにデザインライブラリを指定します。

  • キャンバス上で確認

    生成された料金表を確認します。同じスレッドで調整するか、別のレイアウトの方向性を検討するために並行スレッドを開始しましょう。

  • 反復を続ける

    再度プロンプトを入力して、機能行、トグルの状態、強調表示のスタイルを調整したり、手動で微調整したりできます。すべて編集可能な状態が保たれます。

エージェントを使いこなす

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

    Figma AIエージェントの実際の動作を見て、自分のワークフローにどう活かせるかを確認しましょう。

    詳細はこちら
  • 「開始」ボタンとサンプルのチャットプロンプト「Figma、読書アプリ用に異なるレイアウトを作成できますか?」が表示されたFigmaエージェントプレイグラウンドの導入画面「開始」ボタンとサンプルのチャットプロンプト「Figma、読書アプリ用に異なるレイアウトを作成できますか?」が表示されたFigmaエージェントプレイグラウンドの導入画面

    Figmaエージェントを使ってみる

    一括編集からフィードバックの反映まで、Figmaエージェントの機能をステップバイステップのガイド付きで実際に試せるプレイグラウンドです。

    始める
  • デザインワークフローでのFigmaエージェントの使い方

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

    今すぐ見る

FAQ

AI料金表ジェネレーターは、自然言語のプロンプトを使って、列、機能行、バッジ、CTAといった構造化された料金表レイアウトを、手動のセットアップなしで作成するツールです。Figmaエージェントは、既存のコンポーネントとスタイルを使ってデザインキャンバス上に直接料金表を作成するため、白紙のフレームではなく完成度の高い土台からスタートできます。

左サイドバーからFigmaエージェントを開くか、CMD + Enterを押します。必要なプラン、含める機能、目指すレイアウトのスタイルを説明します。エージェントはデザインライブラリを使ってキャンバス上に完全に編集可能な料金表を生成し、すぐに調整やハンドオフができる状態にします。

優れた料金表は、プラン間の違いを明確にし、最も人気のあるプランを強調し、機能を見やすく一覧化し、一貫したCTAを使用します。Figmaエージェントは、これらすべての要素を実際のボタン、カラー、タイプスタイルを使って組み立てられるため、レイアウトの仕組みではなく内容とポジショニングに集中できます。

はい。エージェントが生成した料金表はすべて、デザインシステムに紐づいた完全に編集可能なレイヤーとしてキャンバス上に反映されます。間隔の調整、コンポーネントの差し替え、コピーの書き換え、再度のプロンプトによる反復が可能で、何も平坦化されたりロックされたりすることはありません。

Figmaエージェントは、すべての有料Figmaプランでご利用いただけます。Figma Designの左サイドバーからアクセスできます。現在のオープンベータ期間中はAIクレジットを消費しないため、今のうちにぜひ試してフィードバックをお寄せください。