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

Figma Makeのご紹介: デザインをテスト、編集、プロンプトする新しい方法

Peter NgProduct Designer, Figma
Rohit ChouhanSoftware Engineer, Figma
Tom DuncalfSoftware Engineer, Figma
「このミュージックプレーヤーを作成し、新しいトラックごとにディスクを回転させて、プレーヤーを具現化する」と書かれたチャットボックス。右側に、トラックリストの隣にCDが表示されています。「このミュージックプレーヤーを作成し、新しいトラックごとにディスクを回転させて、プレーヤーを具現化する」と書かれたチャットボックス。右側に、トラックリストの隣にCDが表示されています。

本日、私たちはFigma Makeを発表します。これはプロンプトからコードを生成できる新機能で、高精度なプロトタイプの作成から、デザインやコードの細部に至るまで、素早く試し、イテレーションし、洗練させるのをサポートします。

Figma Makeのご紹介: デザインをテスト、編集、プロンプトする新しい方法を共有

デザインは問題解決の芸術です。しかし、問題解決は直線的なものではありません。どこから始めるか、どこで止めるか、どのように進化するかは、プロセスのどの段階にいるか、どこに進みたいかによって決まります。Figmaでは、アイデアから実用的な製品に至るまでのプロセスを容易にする方法を常に探しています。しかし、多くのすばらしいアイデアは、時間、ツール、または知識のギャップが原因で未開拓のままであることがよくあります。本日、Figma Makeをリリースします。これは、デザイナーやプロダクトチームがプロセスのどの段階にいても、デザインの方向性の検証、コードでの編集、コンセプトの試作など、さまざまな可能性を探れるプロンプトからコードを生成する新しいツールです。

デザインを「十分にリアル」な状態にして試せるようにするには、時間がかかったり、コーディングが必要になったりすることがあります。だからこそ私たちは Figma Makeを開発しました。デザインがどのように「感じられるか」を想像するだけでなく、実際に体験できるようにするためです。まずはデザインから始めて、それをどのように動かしたいかをプロンプトで指示するだけです。

モデルに関するメモ:

Figma Makeは現在Claude 3.7 Sonnetを使用しており、今後他のモデルを導入する予定です。

ゼロから始めず、デザインから始める

私たちは、生成AIが誰がどのようにデザインできるかを変革し、AIの時代ではデザインそのものがより重要になると信じています。それは、デザインプロセスがほとんどの場合、0-1ではないからです。デザインに対するインスピレーションは、初期のスケッチや完全に具体化されたプロトタイプなど、「0」からではなくどこからでも始められます。さらに、「1」がエンドポイントになることはめったにありません。

Figma Makeなら、ゼロから始める必要はありません。既存のFigma Designのフレームをコピーして、その構造とメタデータを保持したまま、モデルにデザイン自体を提供できます。次に、シンプルな自然言語プロンプトを通じて、Figma Makeはデザインの本来の意図を維持しながら、実際に使用可能なインタラクティブな体験に変換できます。

「設定パネルを開閉したときにアニメーションを追加する」と書かれたチャットボックスのプロンプト。右側には、クロスフェード、ストリーミング品質、ダウンロード品質、イコライザーなどのオーディオ設定が含まれている。「設定パネルを開閉したときにアニメーションを追加する」と書かれたチャットボックスのプロンプト。右側には、クロスフェード、ストリーミング品質、ダウンロード品質、イコライザーなどのオーディオ設定が含まれている。
自然言語プロンプトを使用して、デザインを実際の体験に変換できます。

静的なデザインを数分でインタラクティブなものに変換

静的なデザインでは伝えられる内容が限られているため、全員の足並みを揃えたり、実現可能性を評価したりすることは困難です。Figma Makeは、デザインプロセス全体を通じてチームに新たな可能性を提供します。

  • インタラクティブなプロトタイプの作成: 静的なデザインを完全にインタラクティブなプロトタイプに変換します。複雑なコードを使用せずに、アニメーション、インタラクティブなボタン、リアルタイムフィードバックを追加できます。
  • 動的データ: 実データを用いて機能をテストし、ファイルをアップロードして情報を動的に視覚化し、デザインが実際にどのように機能するかを体験できます。
  • レスポンシブに適応: フォームファクタ全体でデザインを変換。モバイルアプリのデスクトップ版を作成し、複数のプラットフォームでテストできます。

このレベルの制御と独自性に加えて、サードパーティーデータベースの統合とデザインシステムの適用が近日利用可能になり、構造的で機能的な探索が行えるようになります。

リアルタイムでマルチプレイヤー探索を行う

Figma MakeはFigmaプラットフォームに組み込まれ、デフォルトでコラボレーション対応しているため、デザイナーやプロダクトマネージャーが一つの信頼できる情報源の中で、アイデアの定義、イテレーション、ブラッシュアップを開始から完了まで行える強力なオールインワンツールとなっています。

チームメンバーは役割や技術的経験に関係なく、機能の追加、データの組み込み、新しいインタラクションモデルのテストをすべて同じファイルでリアルタイムで行うことができます。コードの障壁を取り除くことで、Figma Makeはチーム全員がデザイン体験に有意義に貢献するのを可能にします。

ポイント&プロンプトの精密さ

Figma Makeはデザイナーの自然なコミュニケーション方法に一致する直感的な編集アプローチを導入しています。要素を指定して、「このボタンでアニメーションをトリガーさせる」や「スクロール時にこの要素が反応するようにする」といった希望する変更を簡単に指示できます。この精密さにより、デザイン意図と機能実装の間にある従来のギャップが解消されます。この構造化されたアプローチは、インタラクティブな動作を追加しながらも、デザインシステムとコンポーネントの階層構造を保ち、プロセス全体を通じてデザインの忠実性を維持します。

タイムスタンプが選択され、AIプロンプトに「曲が再生されたときにタイムスタンプをアニメーション化する」と表示されます。タイムスタンプが選択され、AIプロンプトに「曲が再生されたときにタイムスタンプをアニメーション化する」と表示されます。
直感的な編集でデザインの意図を簡単に捉えることができます。

キャンバスからコードへのシームレスなワークフロー

Figma Makeは、Figma DesignからFigma Sitesまで、既存のFigmaワークフローに直接統合されています。これにより、初期コンセプトからインタラクティブなプロトタイプ、公開サイトまで、コンテキストを切り替えたり、異なるツールで作業を再構築したりすることなく、連続した道筋が生まれます。

デザインの可能性を広げる

デザインプロセスで非常に重要な、綿密に練られた反復的な作業を置き換えるのではなく、Figma Makeはそれを強化します。コンセプトの検証をより迅速に行い、方向性をより深く探り、アイデアをより効果的に伝えることができます。私たちの目標は、デザイナーが考えることと制作することをスムーズに行き来できるよう支援することです。アイデアを素早く検証しながらも、クラフトと意図を保ち、結果的により洗練されたプロダクトをより短時間で生み出せるようにすることです。

Figma Makeは専門知識のレベルに関係なく、迅速なアイデア出しをサポートし、より早くフロー状態に入れるようにし、さらにプロセス全体を楽しいものにすることを目指しています。皆さんが作り出すものを見るのを楽しみにしています。

Figmaを使った制作とコラボレーション

無料で始める