前提
本記事は以下の公式ページの補足として、実践的な注意点とポイントに絞って紹介します。
なお、公式ページは定期的に更新されていることを確認しているため、最新の情報は公式ページを参照することをおすすめします。
利用前の確認事項
- Devまたはフルシートのライセンスが必要
- Figmaデスクトップアプリの起動が必須（ブラウザ版は不可）
- GitHub Actions等のCI/CD環境では利用不可
- 設定メニューは以下のFigmaアイコンから開く
実践的な要点
- MCPサーバーはレイヤー構造を返してくれるわけではなく、Figmaがデザインをコードに変換した結果を返す仕組み
- 期待通りに生成されない場合は、ツールのドキュメントを読むと理由や改善案が見つかる
- (2025/08/05時点では)解説されていない
create_design_system_rulesでリポジトリを解析してコンポーネント設計ドキュメントを生成できる - アノテーションを使って特定フレームにプロンプトを仕込める
- 選択中のフレームを読み込んでくれる機能が意外と便利
- Flexboxを正確に表現するにはAuto Layoutの丁寧な設定が必要になる
- Code Connectを使うとコードベース内のコンポーネントを忠実に使ってくれるので実装がデザインとずれていたら当然生成されるUIもずれる
- Code Connectを使わなくてもプロンプトの工夫で対応可能な場合もある
- コード品質にこだわらなければページ丸ごと生成しても意外と再現度が高いのでプロトタイピングやペライチの実装には良さそう
Discussion