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

Figma Make

プロトタイプ、仕上げ、リリース。
アイデアはFigma Makeで現実になります。

デザインしてリリース

Makeをローカルで使用し、あらゆるコードベースで構築して、そのまま本番環境へリリースできます。近日公開。

すべての成果物はコードベースで構築されつつ視覚的に編集可能であり、コードとキャンバスの間を自由に行き来できます。

Figma Makeは、アイデアから完成した機能に至るまでのプロセスを大幅に短縮しており、これに代わるものは想像できません。

黒白のBrian Muehlenkampの顔写真
Brian Muehlenkamp

プロダクトマネージャー、Ticketmaster

あらゆるものを作成し、コントロールはそのままに。

Figma Makeは強力なパートナーであり、細部はあなたがコントロールできます。デザインコンテキストから始め、プロンプトで生成し、その後キャンバス上で編集できます。

リアルなプロトタイプをすばやく作成。

コードベースやデザインアセットから、あるいはゼロから開始できます。

あらゆるものを作成し、コントロールはそのままに。

  • ポップアップウィンドウには利用可能なMakeキットが表示されており、カーソルが「追加」ボタンにホバーしています。ポップアップウィンドウには利用可能なMakeキットが表示されており、カーソルが「追加」ボタンにホバーしています。

    すべてのMakeにデザインコンテキストを追加する。

    Makeキットやnpmパッケージを使ってデザインシステムを取り込み、FigmaのフレームやPDFなども紐付けることができます。

  • 細かなデザインディテールを仕上げる。

    Figma Makeのファイルをキャンバスにコピーし、納得いくまで調整できます。

作業がスムーズに流れるように設計されています。

あなたが愛用するプロダクトは、Figmaでデザインされています

Figma Makeのようなツールにより、プロトタイピングを迅速に行えるようになりました。以前はアイデアを考えてから実際の形にするまで6週間かかっていましたが、今ではわずか数時間で実現できます。

黒白のVishal Kapoorの顔写真
Vishal Kapoor

プロダクト担当SVP、Affirm

  • Airbnbのロゴ
  • Atlassianのロゴ
  • Dropboxのロゴ
  • Duolingoのロゴ
  • Githubのロゴ
  • Microsoftのロゴ
  • Netflixのロゴ
  • Pentagramのロゴ
  • Slackのロゴ
  • Stripeのロゴ
  • New York Timesのロゴ
  • Zoomのロゴ

Figma Makeの機能

  • ローカルのコードベースで使えるMake (ベータ)

    新規

    Figmaのデザインを、Makeのビジュアルソフトウェアエディタでローカライズされた本番対応アセットへ変換します。近日公開予定。

  • カスタムスキル

    新規

    最も頻繁に使用するワークフローを、Makeで再利用可能な一連の指示としてパッケージ化できます。

  • MCPコネクター

    MCPを介して外部ツールと接続し、他のアプリのドキュメント・タスク・データを、アプリやプロトタイプのコンテキストとして活用できます。

  • Makeキット

    ユーザーインターフェース用とプロダクトアイコン用の、2つの異なるデザインシステムライブラリ。ユーザーインターフェース用とプロダクトアイコン用の、2つの異なるデザインシステムライブラリ。

    npmパッケージ、ライブラリのスタイル、ガイドラインをFigma Makeと直接同期することで、高精度なプロトタイプを生成できます。

  • プランモード

    新規

    構築前に計画を立てましょう。生成を開始する前に意図を明確化し、構造化された編集可能な計画を作成します。

  • 添付ファイル

    Figma Makeのプロンプトボックスに「この動画をランディングページに追加」と入力されている。カーソルが美術館サイトツアーの動画をプロンプトボックスに添付している。Figma Makeのプロンプトボックスに「この動画をランディングページに追加」と入力されている。カーソルが美術館サイトツアーの動画をプロンプトボックスに添付している。

    デザイン、画像、動画、音声、テキストファイル、PDFをプロンプトに添付することで、AIの出力精度を高めることができます。

  • コメント

    Figma Makeファイル上のコメントに「このプロトタイプ、とても気に入っています。もう少しインタラクティブ性を追加するのはどうでしょうか?」と表示されている。Figma Makeファイル上のコメントに「このプロトタイプ、とても気に入っています。もう少しインタラクティブ性を追加するのはどうでしょうか?」と表示されている。

    Figma Makeで作成されたプロトタイプやWebアプリに対して、フィードバックをやり取りできます。

  • アノテーション

    要素を選択し、プロンプトを入力して、すべての変更を一度にモデルへ送信できます。

  • バージョン履歴

    Figma Makeのファイルドロップダウンに、選択可能な3つの異なるファイルバージョンが表示されています。Figma Makeのファイルドロップダウンに、選択可能な3つの異なるファイルバージョンが表示されています。

    すべてのAIおよび手動編集を追跡できます。プロジェクト内の任意のイテレーションをプレビュー、お気に入り登録、または復元できます。

  • 音声入力によるプロンプト

    Figma Makeにアイデアを伝えることで、プロトタイプを生成できます。

  • Makeモバイル

    モバイルインターフェース上に表示された完成済みのFigma Make。Makeの上にメニューが重ねて表示されており、コメントの閲覧・追加、フルスクリーンでのプレビュー、バージョン履歴の確認、ファイル共有といったオプションが選べます。モバイルインターフェース上に表示された完成済みのFigma Make。Makeの上にメニューが重ねて表示されており、コメントの閲覧・追加、フルスクリーンでのプレビュー、バージョン履歴の確認、ファイル共有といったオプションが選べます。

    携帯電話でMakeを開き、ネイティブに体験しながら、コンテキストの中で直接コメントの閲覧や返信ができます。

  • ポイントして編集

    カーソルがCTAボタンをハイライトしており、その下のAIプロンプトには「ホバー時にボタンを光らせてください」と表示されています。カーソルがCTAボタンをハイライトしており、その下のAIプロンプトには「ホバー時にボタンを光らせてください」と表示されています。

    プレビュー上で要素をクリックしながら、スタイル変更や差し替え、プロンプトによる修正を直接行うことで、プロトタイプを洗練できます。

  • テンプレート

    3つの異なるプロダクト画面。1つ目は黒い背景に、ぼんやりとした白い四角のアウトライン。2つ目はデータダッシュボード。3つ目は円形に配置されたライフスタイル画像のコレクション。3つの異なるプロダクト画面。1つ目は黒い背景に、ぼんやりとした白い四角のアウトライン。2つ目はデータダッシュボード。3つ目は円形に配置されたライフスタイル画像のコレクション。

    実績のあるワークフローを保存・再利用することで、1つのMakeを繰り返し使える作業プロセスに変換できます。

  • カスタムフォント

    コンピュータから、または組織内で共有されているカスタムフォントを追加できます。