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

プロンプトからプロトタイプ、そして完成へ: すべてのユーザーの皆様にFigma Makeをご利用いただけるようになりました

モダンなスタイルの抽象的なデジタルアートと、カラフルな光線、コードのようなテキスト、とげが突き出たえび茶色の円、オレンジ色のドット。モダンなスタイルの抽象的なデジタルアートと、カラフルな光線、コードのようなテキスト、とげが突き出たえび茶色の円、オレンジ色のドット。

本日、Figma MakeをはじめとするFigma AIの全機能と製品がベータ版から一般提供に移行しました。Figma Makeをどなたでもお試しいただけます。プロンプトをアプリに変換するツールを使用して、より大きな夢を描き、より迅速に開発し、共同作業の効果を高める方法をご紹介します。

プロンプトからプロトタイプ、そして完成へ: すべてのユーザーの皆様にFigma Makeをご利用いただけるようになりましたを共有

Figma Makeのリリース以来、私たちは皆さんの創造力をさらに高めるために、以下のような機能を追加してきました。

既存のFigmaライブラリのインポート: カラーパレット、使用ガイドライン、タイポグラフィ、主なスタイル要素をインポートすることで、プロトタイプとWebアプリのルックアンドフィールに一貫性をもたらします。

Supabaseとの統合: バックエンドデータベースに接続することで、より充実したプロトタイプとWebアプリを作成できます。

アイデアを実現することは、A地点からB地点に移動するような単純な話ではありません。探求から、イテレーション、調整、改良まで、アイデアを迅速に展開する力が必要です。それこそが、プロンプトをアプリに変換するツール、Figma Makeをリリースした理由です。Figma Makeにより、技術的な知識の有無にかかわらず、デザイナーや製品開発担当者の皆様に、自らインタラクティブで、完成度の高いプロトタイプを作成していただけます。これにより、はるかに短時間で、可能なソリューションを探り、共通の方向性を定め、デザインを繰り返し試行錯誤できます。とはいえ、大切なのは効率性だけではありません。Figma Makeを使用することで、チームの視野が広がり、より自信を持って開発を行い、デザインにより多くの意見を取り入れることができます。

本日、Figma Makeに加え、画像の生成・編集解像度の向上などのFigma AI機能がベータ版から、一般提供に移行することをお知らせできることを嬉しく思います。

Figma Makeファイルの公開機能はまだベータ版です。

  • フルシートを持つユーザーは、Figma Makeファイルを公開*または非公開で共有する機能も含め、AI機能とFigma Makeの全機能をご活用いただけます。
  • 閲覧、コラボ、Devシートを持つユーザーは、ドラフト内でFigma Makeファイルを無制限に作成し、プランごとに使用可能な製品でAI機能をお試しいただけます。
  • スタータープランのユーザーは、ドラフト内でFigma Makeファイルを無制限に作成し、最大3つのFigma Makeファイルをチームと共有できます。その他のAI機能は有料プランでのみご利用いただけます。

AIクレジットとその仕組みについて詳しくは、当社のヘルプセンター記事をご覧ください。

この変更により、すべてのシートでAIクレジットがご利用いただけるようになりました。今年の後半には、パワーユーザー向けに追加のAIクレジットを購入できる機能を導入する予定です。それまでは、フルシートのクレジット制限を厳密に適用しません。スタータープラン、閲覧、コラボ、Devシートを持つユーザーは、クレジット限度額が低く設定されています。また、限度額は変更される可能性があり、日次および月次で適用されます。

プラン別のフルシートAIクレジットの内訳は以下のとおりです

プロフェッショナルプラン: 3,000クレジット/月(現時点の推定で約50〜70件のMakeプロンプトの作成が可能)、ビジネスプラン: 3,500クレジット/月(現時点の推定で約60〜80件のMakeプロンプトの作成が可能)、エンタープライズプラン: 4,250クレジット/月(現時点の推定で約80〜100件のMakeプロンプトの作成が可能)。プロフェッショナルプラン: 3,000クレジット/月(現時点の推定で約50〜70件のMakeプロンプトの作成が可能)、ビジネスプラン: 3,500クレジット/月(現時点の推定で約60〜80件のMakeプロンプトの作成が可能)、エンタープライズプラン: 4,250クレジット/月(現時点の推定で約80〜100件のMakeプロンプトの作成が可能)。

これらの変更により、Figma AIとFigma Makeの機能を活用して業務を迅速化し、重要なことに集中できます。

Figma Makeで仕事を効率化

Figma Makeの機能は制作を支援するだけではありません。製品開発プロセス全体をサポートします。デザイナーはFigma Makeでより複雑なインタラクションをテストできます。また、エンジニアはデザインに忠実な成果物を、プロダクトマネージャーはアイデアの検証用に機能するモックアップを作成できます。Figmaでデザイン担当ディレクターを務めるGui Seizは次のように述べています。「デザイナー、エンジニア、プロダクトマネージャーが、そろって完成度の高い成果物を作成することで、チームがより充実した情報に基づいて議論を行えるようになります。こうしたアプローチによりマインドセットが変化することで、遊び心を持ち、リスクを取り、より興味深いソリューションを考え出せるようになります。」

こうしたアプローチによりマインドセットが変化することで、遊び心を持ち、リスクを取り、より興味深いソリューションを考え出せるようになります。
Figmaデザイン担当ディレクター、Gui Seiz

この変化は、Figmaのチームの働き方をすでに変えています。ここでは、チームが新しい方向性を探り、ビジョンを伝え、より多くの人を製品開発プロセス全体に巻き込むために、Figma Makeを活用する方法をいくつかご紹介します。

プロトタイプを作成する力を民主化する

アイデアを表現するのに、言葉はしばしば力不足です。Guiは「言葉は正確に意味を伝えられないため、デザインプロセスで大切な情報が失われることがある」と述べています。だからこそ、実際に見たり触れたりする体験が必要です。そこでプロトタイプが必要になるわけですが、作成には時間がかかることがあり、人によっては作成できない場合もあります。Figma Makeを使用すれば、自然言語プロンプトによって、誰でもアイデアをリアルなプロトタイプに変換できます。

RieはFigma Makeを使用して、Survey Traffic Calculatorのプロトタイプを作成しました(これらの数値はデモ目的でのみ使用されます。)

具体例を挙げると、Figmaでリサーチャーを務めるRie McGwierは、Figma Makeを使用して、8つのFigma製品に対するユーザーフィードバックを収集する30件のアンケート用にトラフィック計算ツールのプロトタイプを作成しました。「アンケート管理センターなしでは、アンケートを効率的に配信することはほぼ不可能です」とRieは説明しています。Rieは静的な図表を使用する代わりにFigma Makeを使用して週ごとのアクティブユーザー率、制約、オーディエンスの重複、回答率、再接触期間、希望サンプルなどのデータを入力して、数学モデルを作成および改良しました。このモデルはダッシュボードに活用され、特定の集団を過剰にサンプリングすることなく、アンケートにトラフィックを分散できるようリサーチャーをサポートしています。

 集団のサンプルレート、UIスライダー、アンケートメトリクスを表示する、Figma Makeで作成されたSurvey Traffic Calculatorのプロトタイプ。 集団のサンプルレート、UIスライダー、アンケートメトリクスを表示する、Figma Makeで作成されたSurvey Traffic Calculatorのプロトタイプ。
Figma Makeは、数学モデルとUIに集団のサンプルレートパラメータを組み込みました(これらの数値はデモ目的でのみ使用されます。)

Rieは次のように述べています。「このプロトタイプにより、私ほど細部に踏み込んでいない他のリサーチャー、リサーチリード、データサイエンティスト、データエンジニアでも問題に気付けるようになりました。」この発言は、MVPの作成に向けた議論のきっかけとなりました。「Figma Makeは同僚とのコラボレーションで生み出される魔法のような効果の代わりにはなれませんし、そうすべきでもありませんが、作業をサポートし、承認を得やすくし、新たなコラボレーション方法を生み出すことができます。」

Figma Makeは作業をサポートし、承認を得やすくし、新たなコラボレーション方法を生み出すことができます。
Figmaリサーチャー、Rie McGwier

アイデアに対する確信をより早く得る

Figmaでプロダクトマネージャーを務めるTara Nadellaは、製品に関する具体的な意思決定を行うために部門を横断してさまざまなチームの調整を行う必要がありますが、役割によって物の見方や優先順位が異なるためこれは容易なことではありません。Figma Makeは、全員の認識をすり合わせるための有形の成果物を作成するのに役立ちます。Taraは次のように述べています。「役職と関係なく私たち全員が担うことができる役割があります。それは、ユーザーの役割です。Figma Makeはコラボレーションのためのフォーマットです。プロトタイプを通じてアイデアを体験できるようにすることで、全員が自社製品のユーザーになり、開発すべき製品に関する確信を得ることができます。」

プロトタイプを通じて、全員が自社製品のユーザーになり、開発すべき製品に関する確信を得ることができます。
Figmaプロダクトマネージャー、Tara Nadella
Taraはデザインシステムのコンプライアンス状況を確認するデザインチェッカーインターフェースのプロトタイプを作成しました。

TaraはFigma Makeを使用して、今後公開する予定のデザインチェッカーインターフェースのプロトタイプを作成しました。各要素が複雑に関係する新しいUIだったため、プロトタイプを作成したことで書面によるPRDや設計仕様の作成に進む前に、仮定を検証し、時間を費やすべき箇所を正確に特定することができました。Taraは続けます。「プロトタイプを見ることで、曖昧な要素が多い状況でも比較的早くイメージを掴めました。方向性を決めるには、単なる知的作業だけでなく反応できるものが必要でした。」

Figma Designからデザインを直接取り込めるため、作業が大幅にスムーズになったとTaraは指摘します。「そうした基盤に基づいて製品を開発できることは、集中力を高め、迅速にコラボレーションを進めるうえで非常に重要でした。」インタラクティブなプロトタイプにより、チームは、新しいデザインワークフローを段階的に進むうえでデザイナーを導く、ウェルカムモジュールを作成できました。Taraは次のように述べます。「トーンやオンボーディングは通常仕上げの段階で考えるものですが、今回は、採用してもらうために最初から考える必要がありました。」

デザイナーと開発者のコラボレーションを強化する

デザインチームから開発チームへのハンドオフに向けて、早い段階で認識のすり合わせを行うすことが重要です。誤解や優先順位に関する対立があると、やり取りが何度も発生する可能性があります。FigmaプロダクトデザイナーのKelly HuとGiorgio Cavigliaが新しいオートレイアウトオプションであるグリッドに取り組んだ際、二人はFigma Makeを使用して、トラックのサイズ変更機能のプロトタイプと、右サイドバーのグリッドピッカーのプロトタイプをそれぞれ作成しました。プロトタイプの作成は複雑なコーディング作業のために数日かかっていましたが、Figma Makeを使用することでわずか1時間半で完了しました。

KellyはFigma Makeを使用してグリッドトラックのサイズ変更機能のプロトタイプを作成しました。

プロトタイプの作成はGiorgioとKellyが自らのアイデアを検証する役に立っただけでなく、エンジニアリング担当者と連携する際にも役立ちました。Giorgioは次のように述べています。「複雑なインタラクションや動作を伝えるには、頭で動作を想像してもらうよりも、プロトタイプを使った方がはるかに簡単です。」一方、Kellyは次のように付け加えます。「グリッドでは、マウスのヒューリスティックとマウスオーバーエフェクトが重要な役割を果たしました。」プロトタイプを作成したことで実装前に機能をシミュレートし、判断すべきポイントをより明確に把握できたため、、エンジニアと繰り返し試行錯誤する回数が減りました。

Giorgioは右サイドバーにあるグリッドピッカーのプロトタイプを作成しました。
プロトタイプを用意することで判断すべきポイントをより明確に把握できたため、エンジニアと繰り返し試行錯誤する回数が減りました。
Figmaプロダクトデザイナー、Kelly Hu

もう1つ例を挙げると、プロダクトデザイナーのNatasha TenggoroはFigma Makeによりエンジニアに実行可能なコードを見せることができたことが、複雑な動画再生UIの開発範囲と実現可能性を把握するのに役立ったと述べています。「先をはっきりと見通せたことで、曖昧な様子見の状態だった機能の優先度が高まりました。」Figma Makeにより、デザイナーの意図とエンジニアの作業の間のギャップを埋め、チームの状況に合わせることができました。

このたび、Figma Makeをすべての方にご活用いただけるようになりました。ぜひMakeを試して、新たな仕事の進め方を見つけてください。AIクレジットの仕組みについて詳しく学びFigmaコミュニティでプロジェクトをリミックスして今すぐ次のMakeを始めて、AIの力でアイデアを実現しましょう。

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

無料で始める