読み込み中...
投稿日
Figma Makeを実際に触ってみる：Figma Make-a-thon 参加レポート
はじめに
先日、Figma公式コミュニティ「Friends of Figma Nagoya」が主催するイベント「Figma Make-a-thon@Nagoya」に参加させていただきました。Figmaの新しいAIツール「Figma Make」を実際に触ってみるハンズオン形式のワークショップで、デザイナー・エンジニア問わず、誰でもAIによるUI自動生成を体験できる内容でした。
Figma Makeとは
「Figma Make」は、Figmaが提供する生成AIツールの一つです。プロンプト（文章）を入力するだけで、その内容に沿ったコードが自動生成され、画面上に即座に表示されます。
単なるデザイン支援ではなく、インタラクティブなプロトタイプやWebアプリケーションを数分で生成できる点が特徴です。
- テキストプロンプトから即座にUIが生成される
- Figma上での操作が完結（追加プラグイン不要）
- 生成されたプロトタイプに対して、Point & Edit機能で直接修正を加えることができる
⚙️ イベント構成
与えられたお題に沿ってFigma Makeを用いたUIを生成し、チーム対抗形式で制限時間内に「どれだけ発想力とAI活用力を発揮できるか」を競いました。
各チームの作成したアイデアは、Friends of Figma NagoyaのXアカウント からご覧いただくことができます。
💡 体験したポイント
1. プロンプト設計の重要性
単に「ToDoアプリを作って」と指示するよりも、「モバイル用の、タスク一覧・追加・完了チェックができるToDoアプリを作って」と少しでも具体的に書くことで、生成結果の精度が大幅に変わることを確認しました。
2. コード生成の進化
生成されたコードをCodeタブで確認したところ、 Reactベースでコード生成がされており、レイアウト構造・コンポーネント分割も概ね整っていました。作成されたコードは全量ダウンロードが可能です。
以下は、作成されたコードで使用されていたライブラリまとめです。React+Vite、Tailwind CSS + shadcn/ui + Radix UIがデフォルトでは使用されるようです。
今後の展望
TIS内では２つの利用ケースに分けて「Figma Makeガイドライン」を整備していく予定です。
1. 要件検証の初速とUIインタラクションの仮説検証「０→１」
新規プロダクトや検証に最適な環境を構築します。デザイナーがプロンプト主導で高速生成することで、アイデア探索のリードタイムを劇的に短縮します。プロダクトオーナーやエンジニアとのコミュニケーションもスムーズになることが期待できます。
2. 既存デザインがあるシステムの追加開発「1.0→1.1」
確立されたデザインシステムを持つプロダクトにおいて、Figma Makeは限定的な利用になるかもしれません。既存コンポーネントとの一貫性を保ちながら新規機能の実装速度を向上するためには、Figma Make以外の機能との組み合わせが重要になります。(Figma variables、Storybookなど)
ガイドライン整備のロードマップ
Figma Makeガイドラインの整備は段階的なアプローチで進めます。
第一フェーズでは「0→1」ケースに焦点を当て、プロンプトエンジニアリングのベストプラクティスとデザイナー向けの実践マニュアルを策定します。AIによる出力は一定のばらつきを持つため、検証に耐えうる最低限の要件を定義し、それを満たすためのプロンプトパターンを蓄積します。
第二フェーズでは「1.0→1.1」ケースとして、既存デザインシステムとの統合手法を確立します。具体的には、Material UIをベースとしたFigmaのファイルからFigma variablesやDesign Tokensとの連携、既存Reactコンポーネントライブラリの参照方法、そしてFigma Make生成物の既存アセットへの変換プロセスを標準化します。この段階では、デザイナーとエンジニアの協働プロセスも再定義する必要があります。
いずれのケースにおいても、再現性やクレジットの節約の観点からテンプレートとガイドラインの整備が導入成功の鍵となります。guidelines.mdとテンプレートディレクトリの組織内標準化を行うことで、品質と開発速度の両立が可能になります。
まとめ
今回のワークショップでは、各チームが短時間で多彩なアイデアを形にしており、 AIが「創造の起点」として機能することを体感しました。また懇親会では、Figma Makeを業務にどう取り入れるかについて、 多くの参加者と具体的な意見交換ができました。
Figma はデザインと実装を接続する「共創基盤」です。Figmaロードマップの中でも開発プロセス全体を変える中核的な位置づけになる、その未来を先取りするようなイベントでした。
