Figma Makeを探る

Figma Makeとは?

Figma MakeはAI搭載の、プロンプトからコードへのツールで、アイデアや既存のFigmaデザインを機能的なプロトタイプ、Webアプリ、インタラクティブなUIとして具現化できます。会話を通じて、機能プロトタイプやWebアプリのアイディエーション、反復、機能強化を行えます。

Figma Makeを使用すると、以下を行うことができます。

• デザインの外観と操作感を機能的な形でプレビューする
• 提案やアイデアをプロトタイプに変えて、製品アプローチを洗練させる
• 解決しようとしている問題に対して、さまざまなソリューションを模索する

Figma Makeは、Figmaデザインを機能的なプロトタイプに簡単に変換するためのいくつかの機能を提供しています。

• 既存のFigma Design、コンポーネント、コミュニティコンテンツをプロンプトに添付する
• 会話を続ける中で、改善したいプレビューの特定の部分を明らかにする
• 同じ会話内でチームと協働し、生成されたコードを同時に修正する
• 他者と機能的なプロトタイプまたはWebアプリのプレビューを共有する
• 専用のURLを使用して機能的なプロトタイプまたはWebアプリをウェブサイトとして公開する

操作方法を探す

Figma Makeは、デザインから迅速にプロトタイプを生成するためのシンプルなインターフェースを提供します。Figma Makeには、モデルにプロンプトを送信できるAIチャットと、アプリの動作中のバージョンを確認し、コードを編集できるプレビューの2つの主要な領域があります。

AIとチャット

Figma MakeのAIチャットでは、Figma Designや画像を共有し、モデルと対話して機能的なプロトタイプやWebアプリを生成し、プロンプトを使って反復処理を行います。

Figma Makeにデザインを導入する

既存のデザインを使用してアプリを生成するには、デザインを添付をクリックし、使用するデザインを選択します。モデルにより多くのガイダンスを提供するために、複数のデザインを添付することができます。

デザインからフレームやコンポーネントをAIチャットに直接貼り付けることもできます。

画像を使用してFigma Makeで作成する

デザインファイルにまだ保存されていないアイデアがありますか？AIチャットに画像を提供して、アプリの作成を開始しましょう。画像を使用するには、 画像を添付をクリックして追加する画像を選択するか、画像をチャットに直接貼り付けます。

会話を通じてAIをガイドする

モデルに従ってもらいたいとっておきのアイデアや指示がありますか？AIチャットにアイデアを書き込み、Figma Makeで反復的に作業することでアイデアを具現化することができます。

会話と編集ツールで反復作業を行う

機能的なプロトタイプやWebアプリの強化は、AIチャットで会話を続けるのと同じくらいシンプルです。デザインや画像を添付し、プロンプトボックスに継続的に入力して会話の結果を反復します。

また、Figma Makeの編集ツールを使用して、機能的なプロトタイプやWebアプリの特定の場所を指摘して直接変更することもできます。要素によっては、パディング、マージン、色、テキストプロパティを変更できます。さらに、編集ツールを使用して実現したい特定の変更を指示することもできます。

機能的なプロトタイプ、Webアプリ、インタラクティブなUIを作成する

始める準備はできましたか? AIチャットを使用して生成を開始するために役立つすべての詳細が記載された「機能的なプロトタイプまたはWebアプリの作成と編集」をご覧ください。

機能的なプロトタイプまたはWebアプリを作成したら、Figma Designのプロトタイプと同様に専用のフルスクリーンプレビューで表示することもできます。

機能的なプロトタイプとWebアプリでの共同作業と共有

機能的なプロトタイプやWebアプリを作成したら、それをチームメイトやウェブ上の誰とでも共有できます。

機能的なプロトタイプやWebアプリのプレビューは誰とでも共有でき、きめ細かい権限を使用してアクセスを制御し、概念を安全に保つことができます。

準備が整ったら、機能的なプロトタイプやWebアプリをFigmaの専用URLで公開するか、独自のカスタムドメインを割り当てます。

Figma Makeの権限

権限によって、Figma Makeファイルで実行できるアクションや、機能的プロトタイプまたはWebアプリに変更を加えられるかどうかが決まります。

ベータ版期間中のFigma Makeファイルの共有

Figma Makeベータ版のユーザーのみが、Figma Makeファイルを作成、操作、閲覧できます。Figma Makeファイルをまだベータ版に参加していない人と共有した場合、404エラーページが表示されます。

Figma Makeファイルのオーナーと編集可権限を持つユーザーは、ファイルを公開ウェブで公開できます。Figma Makeファイルが機能的なプロトタイプやWebアプリとして公開されると、それらは公開ウェブで利用可能になります。ただし、サイトの訪問者はサイトの公開に使用されたFigma Makeファイルにアクセスすることはできません。

ファイルの作成

Figma Makeファイルを作成するには、Figma Makeベータ版へのアクセスと有料プランのフルシートが必要です。

コラボシート、開発者シート、または閲覧シートを持つユーザーは、共有されたFigma Makeファイルを閲覧できます。これらのユーザーはファイルを複製できますが、複製したファイルに変更を加えることはできません。

編集、閲覧、共有

権限に応じて、Figma Makeファイルで異なるアクションを実行できます。

• 編集可権限を持つユーザーは、AIチャットでデザインや画像を添付し、チャット履歴を確認し、プロンプトを書くことができます。これらのユーザーは全画面プレビューを表示できます。また、他の編集者や閲覧者をファイルに招待でき、Figma Makeファイルを公開ウェブに公開できます。
• 閲覧のみの権限を持つユーザーは、AIチャットでプロンプトを表示したり、チャット履歴を確認できますが、独自のプロンプトは作成できません。これらのユーザーは全画面プレビューを表示できます。また、他の閲覧者をファイルに招待できます。

次のステップ

Figma Makeの使用を開始するには、以下の記事を参照してください。

• 機能的なプロトタイプまたはWebアプリの作成と編集
• プロンプトにデザインと画像を添付する
• 機能的なプロトタイプまたはWebアプリをプレビューする
• 機能的なプロトタイプまたはWebアプリを公開、更新、または非公開にする

Figma Makeに関するご質問はありますか?

Figma Makeベータ版やFigma Makeの使用方法に関する質問は、Figma Makeに関するFAQをご覧ください。