Figma Make

Author: Takashi

概要

Figma Make は、プロンプトからコードまで、思いつくものすべてのものを作成できる AI 駆動のツールです。静的なデザインを機能的なプロトタイプや Web アプリに素早く変換し、アイデアを実際に体験できる形にします。

主な機能

プロンプトによる機能的なプロトタイプ・Web アプリの生成
既存の Figma デザインから高忠実度のインタラクティブな体験を作成
リアルタイムでの共同編集とイテレーション
ポイント&プロンプトによる直感的な編集
Supabase との連携によるバックエンド機能の追加
Figma Sites との統合による Web 公開

利用条件

有料プランのフルシート（Full seat）で利用可能
他のシートやプランでも試用可能
can edit 権限が必要

基本的な使い方

1. Figma Make ファイルの作成

ファイルブラウザのドラフト（drafts）に移動
右上角の Make をクリック
新しい Figma Make ファイルが作成される

2. デザインの取り込み

既存の Figma デザインから：

+ をクリック
Import from Figma を選択
使用したいデザインを選択

フレームやコンポーネントを直接貼り付け：

Figma Design からフレームをコピーして AI チャットに貼り付け

画像からのアイデア生成：

+ をクリック
Upload image を選択
または画像を直接チャットに貼り付け

3. プロンプトの作成

効果的なプロンプトの要素：

コンテキスト: 何のためのアプリか
説明: 具体的な機能や要求
プラットフォーム: Web、モバイルなど
ビジュアルスタイル: デザインの方向性
UI コンポーネント: 必要な要素

例：

ECサイトのチェックアウトページを作成してください。
- モダンでミニマルなデザイン
- クレジットカード決済フォーム
- 商品確認セクション
- レスポンシブ対応

高度な機能

Supabase 連携によるバックエンド追加

Figma Make を Supabase に接続
ユーザー認証の追加
データベースでのデータ保存
プライベート API の接続
本格的な Web アプリとして公開

デザインシステムとの一貫性

Figma ライブラリからスタイリングコンテキストを追加
カスタムルールの設定
デザインシステムとの視覚的一貫性を保持

共同編集とイテレーション

チーム全体でのリアルタイム編集
ロールや技術的背景に関係なく全員が貢献可能
同一ファイル内での定義、イテレーション、洗練

他の Figma プロダクトとの連携

Figma Sites との統合

Figma Sites 内の任意のフレームを選択
Figma Make でインタラクションを追加
カスタマイズ、テスト、公開までシームレス

Figma Design との統合

デザインからコードへの継続的なワークフロー
コンテキストの切り替えなしに初期コンセプトから公開サイトまで

使用モデル

現在: Claude 3.7 Sonnet
将来: 他のモデルも導入予定

料金・権限

ファイル作成: 有料プランのフルシートが必要
編集権限（can edit）: デザイン添付、プロンプト作成、プレビュー、公開が可能
閲覧権限（can view）: プロンプト閲覧、履歴確認、プレビューのみ