こんにちは！
クラウドソリューション開発部の大川です。
今回は、Figma の AI プラグイン Layermate を使って「要件から UI をチャットで一気に起こす」ワークフローを検証しました。
結論から言うと、プロトタイピングの初速を劇的に上げる道具としてかなり実用域。
特に、画面間での文脈維持やレイヤー構造（Auto Layout含む）の出力が優秀でした。
一方で、複雑なレイアウトやコンポーネントの厳密な再利用は現時点で工夫が必要な印象です。
Layermateで何ができる？
Figma 上で AI と会話しながら UI を生成・編集できるプラグインです。
自然言語で「こういう画面がほしい」と伝えると、Figma 内にレイヤーとして直接配置してくれます。
- 既存レイヤーを選択して参照（コンテキスト）として渡せる → 自分のファイルのスタイルに寄せた生成が可能
- アイコンの自動選定など、細部もある程度任せられる
料金プラン（2025年8月時点）
https://www.layermate.ai/pricing
| プラン | 価格 | 主な制限/枠 |
|---|---|---|
| Free | $0 | 1日 5メッセージまで、応答長は短め |
| Pro | $20/月 | 1,000,000 tokens/月、長文応答 |
| Boost Pack | $10/回 | 500,000 tokens（2ヶ月有効、Proに追加購入） |
※「メッセージ数（回数）」と「トークン（内容量）」の2軸制約がある点に注意。まずは Free で手触り確認、チーム運用は Pro＋必要に応じて Boost Pack が現実的です。
検証環境と前提
対象：Figma UI3 ＋ Layermate
使い方：Figmaのファイル上でプラグインを起動し、チャットで指示
インストール手順
- Figma ファイル上で右クリック → アクション → Layermate を検索してインストール
- 初回は Layermate の画面で “Continue with Figma” によりサインイン
- Figma ファイル上で右クリック → アクション → Layermate | Create designs with AI Chat を選択して起動
実際に生成してみた
題材は「IoT デバイスの稼働監視ダッシュボード」。
|
1 2 3 4 5 6 |
IoTデバイスの稼働監視ダッシュボードを作ってください。 対象は製造現場の監視で、主要KPIは 稼働率/停止件数/平均復旧時間 です。 上部にKPIカード3つ、左にサイドナビ、右にアラートリスト。 中央は日別トレンドチャートと、下にデバイス一覧テーブルをAuto Layoutで。 Gridは8pt、余白16pt、UIは明るめの工業系ブルー基調で、アイコンは適切に選んでください。 |
生成結果
- 画面骨子＋主要UI部品が一度に出力
- Auto Layout が効いた状態で配置
- レイヤー名が適切で後工程の修正がやりやすい
-アイコンは自動選定され、モックの完成度が高い
さらに「同じスタイルでデバイス詳細ページを」と依頼すると、前の文脈を引き継いだ画面が生成されました。
よかった点
- 文脈を保った画面追加（一覧 → 詳細 → 新規作成など連続生成に強い）
- レイヤー構造・Auto Layout・命名が整っており整理が速い
- アイコン自動選定によりモック段階でも説得力がある
まとめ
- プロトタイピングの初速アップに最適：文脈維持機能と、整ったレイヤー構造のおかげで、初期デザインの作成が劇的に速くなる
- 改善の余地：複雑なレイアウトやコンポーネントの厳密な再利用にはまだ工夫が必要ため、今後のアップデートに期待
UIデザインのプロトタイピングを効率化したい方は、まずは無料プランで試してみてはいかがでしょうか？
終わりに
エコモットでは一緒にモノづくりをしていく仲間を募集中です！
弊社に少しでも興味がある方、ぜひ下記の採用ページをご覧ください！
