【JP】Accelerating Flutter UI Development with 
Figma Dev Mode MCP × Claude Code

株式会社アトラエでは、Figmaの構造化（Variables、Component、Annotation）とAIを組み合わせたUI実装の効率化に取り組んでおり、本セッションでは実際の開発現場での試行錯誤から得られた知見をもとに、AIによるコード生成の精度を高める具体的な手法と、UI層とビジネスロジック層の適切な分離によるAI活用戦略について、実装パターンとともにお伝えします。

《 Flutter Alliance 》
Flutter Seoul、Flutter Tokyo、Flutter Taipeiが共同主催するアジア初のカンファレンスです。
備考：https://atrae.co.jp/news/20251016/

1. Accelerating Flutter UI Development with 

Figma Dev Mode MCP × Claude Code
Yuta Asada
Flutter Alliance 2025

2. 自己紹介2
Yuta Asada
Atrae, Inc. @Japan
Co-Organizer of Flutter Tokyo
X: @bull_012
↓You can check today’s slide from X

3. なぜFlutterでFigma Dev Mode MCP × Claude Code？

なのでFlutterでは話題になりにくいが、工夫すれば開発を加速できる



3

4. アジェンダ






4

5. Figma Dev Mode and Claude Codeの基本
01
5

6. Figma Dev Mode MCPとは?
MCPの価値：


- 標準プロトコルによる接続の簡素化

- AIがFigmaのデザインを自動で解釈

Before : 各チームによる独自実装 → 複雑・非効率

MCP導入後： 標準化 → 誰でもすぐに利用可能 → AIが自律的にデザインをコードへ変換
※Dev Sheet（有料版）以上のプランの契約が必須です。
6

7. コード生成 + Annotation 動的な振る舞いも取得可能
デザイントークン取得 colors/primary = #2196F3
スクリーンショット 視覚的な参考情報
構造情報の取得
Figma Dev Mode MCPの主な機能
※ 使わない2機能
get_code_connect_map → FigmaとReactコンポーネントの紐付け（Flutter未対応）
create_design_system_rules→ ルールファイル自動生成（手動定義で十分）
7

8. セットアップの際の重要なこと

Local server (using desktop app) 推奨（全機能利用可能）
Remote Serverは段階的展開中で一部使えない
英語の公式ドキュメントを参照すること(最新であるため)
以下URLを参考にSetUpをしてください
MCP Tools
https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts
Local Server Setup
https://developers.figma.com/docs/figma-mcp-server/local-server-installation/
Remote Server Setup
https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
8

9. Claude Codeとは?
Anthropicが提供するターミナルベースのAI Coding Agent
MCP対応
例

"FigmaのProductListScreenを実装して"
↓
設計・実装・品質チェック完了


100%完璧ではない

しかし、実装時間を大幅に短縮
9

10. Figma Dev Mode MCP×Claude Codeを活かす前提条件
02
10

11. Figma Dev Mode MCP×Claude Codeを活かす前提条件

デザイナーとエンジニアが協力して構造化
AIがUIコード生成する前提で設計する
UI層とビジネスロジック層を明確に分離
11

12. 1. Figmaにエンジニアリングの視点を
今後: デザイナー ⟷ エンジニア
デザイナー、エンジニアの境界を意識せず
一緒にFigmaを考えることが大事に


※一人で両方できなくても
両視点を理解することが大事
12

13. 2. AIがUIコード生成する前提で設計する
目的：人間の介入なしにAIで完結できる部分を増やす
意識すべきポイント:
UI層とビジネスロジック層を明確に分離
Figma to CodeではまずUI層に集中
ビジネスロジックは別の指示で実装
過度な情報は精度低下の原因になる
13

14. Figmaの理解と構造化
03
14

15. 成功のための前提条件
構造化 = ノイズ削減 = 正確なAI生成

Figma Variablesの定義



15

16. Figma Variablesとは?
Design Token Management
16

17. Figma Annotationとは?
Figmaのデザインだけでは伝わらない実装に関する追加情報を付与できる機能
例
画面遷移



17

18. Figma Componentの活用
コンポーネントを正しく利用すると、

Flutterで共通Widgetを作る場合の引数も揃えれる
現状:Code Connect未対応

Figmaコンポーネント

↕️

Flutterコード の自動紐付け

AIのパターン認識向上
将来のCode Connect対応準備
Component整理には明確な価値
18

19. 命名規則の重要性
Figmaのレイヤー名 = MCPで取得可能

システムに沿った命名を
悪い命名

-
Frame 789
button copy 2
問題：

コード生成時に混乱
良い命名

ProductList
ProductDetailScreen
PrimaryButton
利点：

適切な変数名を生成
19

20. Claude Codeで実際のコードを作る時に意識すること
04
20

21. これからのAI時代に求められるデザイン原則
改めて重要なこと: AIがUIコードを生成することを前提にした設計
つまり、UI層とビジネスロジック層の役割を分けて作ること
これはFlutter Architecture guide、Clean Architecture、SOLID原則など
本来推奨されている良い設計そのもの
21

22. デザインシステムとの紐付け
定義しておくもの①：Figma Variablesが、Flutterのどこに対応するかを明確にする
例) colors/primaryはDesignTokens.colors.primaryに対応する
定義しておくもの②：コンポーネントの再利用ルール
例) 既存のウィジェットを使う条件、新規作成時の命名規則、プロパティの命名ルール
22

23. Claude Codeのカスタムコマンドの活用
/figma-mcp-create などのコマンドを作成

毎回のプロンプトを省略可能
Flutter変換ルール例

成、ファイルは~.dartにある。
Material 3準拠
特定のpickerなどではCupertinoを使う
設計は~の~mdのサンプルを読んでください
Figmaの基本機能の4つを全て使ってくださ
い
23

24. Flutter実装パターンの例
05
24

25. 実装デモ
Flutter実装パターンの例
2つのアプローチ：
/figma-mcp-create - ページ全体を新規生成 ← （← 本日のデモではこちらを使用）
/figma-mcp-fix - 差分を確認後、Figmaの変更を既存コードに反映
Figma選択 → Claude Code実行 → Flutter生成の流れをお見せします
※生成結果の比較は別途行います
25

26. 26

27. パターン1 - 新規ページ生成：構造化の重要性
構造化されたFigma

spacing/medium）
Component化済み
明確な命名
5分生成 + 15分調整
構造化されていないFigma

似たvariablesの乱立（color/
primary, theme/primary）
非Component化
曖昧な命名（例: Rectangle 123）
⚠️ 保守困難なコード
27

28. パターン1 - 新規ページ生成：構造化の重要性
構造化されたFigma 構造化されていないFigma
28

29. パターン1 - 新規ページ生成：構造化の重要性
構造化されたFigmaの生成コード 構造化されていないFigmaの生成コード
29

30. パターン1 - 新規ページ生成：構造化の重要性
構造化されたFigmaの出力UI 元 構造化されていないFigmaの出力UI
30

31. パターン2：Figma Annotationを活用した動的な振る舞いの実装
コマンド: /figma-mcp-create MainPage
今回入れたAnnotation
画面遷移
navigationBarはfloating
カードは5枚固定
pull to refreshしてください
いいねのincrement,decrement
手動実装：2時間
→ AI生成：10分＋手動調整30分
31

32. パターン2：Annotationを活用した動的な振る舞いの実装
コードの出力 UIの出力

いいねの数字反映
navigationの反映
pull to refreshの反映
floatingも反映
32

33. AIコード生成の品質担保
06
33

34. 注意点1：AIのミスを判断できる仕組み/人が必要
AIは必ずしも正しいとは限らない。


そこでAI出力品質の担保のために
AIのミスを判断できる仕組み/人が必要になる
34

35. 対策：作業の適切な分類 重要：それぞれの得意領域を活かす

（analyze, format, test等）
AI得意領域 → コード生成・リファクタリング
（UIコンポーネント、ボイラープレート）
人間必須 → アーキテクチャ判断・最終レビュー
（セキュリティ、パフォーマンス、ビジネスロジック）


分類を明確にすることで効率と品質を両立
35

36. 対策例：品質向上の具体的手法

context7 MCP等で最新APIに対応
AIコードレビュー
/reviewを別セッションで複数回実施
自動実行の活用
コミット前：analyze, format, test
作業完了時：Claude Codeのstop hooks
人間の最終確認
AIでは判断できない部分の見極め
36

37. 注意点2: AI生成コードのテスト戦略
現実：AIはテスト作成が苦手
例外：Widgetbook（UIカタログ）のみ高精度
実践的アプローチ：
Widgetbook → AI主導
その他のテスト → 人間主導、AI補助
Golden Test → 自動検証 →意図しない変更を検出
重要：AIで開発は加速するが、品質保証は人間の役割

プロジェクトの性質とチームに合わせた活用を
37

38. まとめ
持ち帰ってほしい4つのこと

→Variables、Component、Annotation、命名規則でノイズを削減

→UI生成はAIに、ビジネスロジックは人間が、定型チェックは静的解析に

→毎回同じ品質で、高速に実装できる仕組みづくり

→静的解析、Golden Testによる視覚的検証、AIレビュー、人間の判断
38

39. 参考文献
Figma Documentation:
Guide to the Figma MCP Server

https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server
Figma Dev Mode API

https://www.figma.com/developers/api#dev-mode
Add Measurements and Annotate Designs

https://help.figma.com/hc/en-us/articles/20774752502935-Add-measurements-and-annotate-designs
Guide to Variables in Figma

https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma
Guide to Components in Figma

https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma
Guide to Naming Conventions in Figma

https://help.figma.com/hc/en-us/articles/360040314193-Guide-to-naming-conventions-in-Figma
Flutter Resources:
Material Design 3 for Flutter

https://m3.material.io/develop/flutter
Flutter Material Design Guidelines

https://docs.flutter.dev/ui/design/material
Flutter Widget Catalog

https://docs.flutter.dev/ui/widgets
Flutter App Architecture

https://docs.flutter.dev/app-architecture
Protocol & Tools:
Model Context Protocol (Anthropic)

https://www.anthropic.com/news/model-context-protocol
39

40. ご清聴ありがとうございました！
Yuta Asada
@bull_012
40