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

At Atrae, Inc., we are working on improving UI implementation efficiency by combining Figma's structured approach (Variables, Components, Annotations) with AI. In this session, we will share insights gained from trial and error in actual development environments, including specific techniques to improve AI code generation accuracy and AI utilization strategies through proper separation of UI and business logic layers, along with implementation patterns.

《Flutter Alliance》 The first conference in Asia co-hosted by Flutter Seoul, Flutter Tokyo, and Flutter Taipei.
Note: https://atrae.co.jp/news/20251016/

1. Accelerating Flutter UI Development with 

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

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

3. Why Flutter with Figma Dev Mode, MCP & Claude Code?

but it can still speed up development


which is perfect for AI code generation

3

4. Agenda






4

5. Fundamentals of Figma Dev Mode MCP and Claude Code
01
5

6. What is Figma Dev Mode MCP?
The Value of MCP：


- Simplifies connections with a standard protocol

- AI autonomously reads and interprets Figma designs

Before : Custom implementation by each team → Complex & inefficient

With MCP : Standardization →
Anyone can use it instantly →
AI autonomously transforms design into code
※Available on the paid plan
6

7. Code Gen + Annotations: Enabling Dynamic Behavior
Get Design Tokens: colors/primary = #2196F3
Screenshots for Visual Reference
Acquire Structural Information
The Key Features of Figma Dev Mode MCP
※ Two Features We Don't Use
get_code_connect_map → Links Figma to React components (Not supported for Flutter)
create_design_system_rules→ Auto-generates rule files (Manual definition is sufficient)
7

8. Setup: 2 Important Notes

Local server (using desktop app) Recommended (All features available)
Remote Server : In a phased rollout with limited features
Use the official English docs (they are the most current)
Please follow the links below to set up
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. What is Claude Code?
A terminal-based AI coding agent from Anthropic
MCP Compatible
Ex)

Prompt : "Implement the ProductListScreen from Figma."
↓
Result : Handles design, implementation, and quality checks
It's not 100% perfect.

But it significantly reduces implementation time
9

10. Prerequisites for
Using Figma Dev Mode MCP & Claude Code
02
10

11. Prerequisites for Using Figma Dev Mode MCP & Claude Code

Structured collaboratively by designers and engineers
Design with AI UI code generation in mind
Clearly separate the UI layer from the business logic layer
11

12. The Future:
Designers and Engineers,
Collaborating on Figma together,
regardless of roles, is key
※Key takeaway:
Understanding both viewpoints is
more important than doing both roles.
12

13. Goal : Expand the scope of tasks handled entirely by AI
Key Points

For Figma-to-Code, focus solely on the UI layer first
Implement business logic with separate prompts/instructions
Providing too much information can decrease accuracy
13

14. Understanding and Structuring Figma
03
14

15. Prerequisites for Success
Structure = Less Noise = Accurate AI Generation
Define Figma Variables



15

16. What is Figma Variables?
Design Token Management
16

17. What is Figma Annotation?
Provides additional implementation context beyond the visual design
Ex)
Screen Transitions



18

18. Why use Figma Components?
Using components correctly...

design tokens
It also helps standardize the arguments
for reusable Flutter widgets
Current Status: Code Connect is
Not Supported

Figma Components

↕️

Automatic Flutter Code Linking

Improves AI pattern recognition
Ready for Future Code Connect
The Clear Benefit of Component
Organization
18

19. The Importance of Naming Convention
Figma layer names are accessible via MCP
→ Therefore, use a consistent, system-aligned naming scheme
Not good Naming

-
Frame 789
button copy 2
Problems：

Confuses the code
generation process
Good Naming

ProductList
ProductDetailScreen
PrimaryButton
Benefits：

Appropriate Variable Name
Generation
19

20. Tips for Generating Code with Claude
04
20

21. Design Principles for the AI Era
Key Takeaway: Design for AI Code Generation
In other words :
Separate the roles of the UI and Business Logic layers
This aligns with established best practices like the Flutter Architecture Guide,
Clean Architecture, and SOLID principles
21

22. Design System Integration
Key Definitions #1：Clearly Map Figma Variables to Flutter Code
Ex) colors/primary corresponds to DesignTokens.colors.primary
Key Definitions #2：Component Reuse Rules
Ex)
Criteria for reusing existing widgets
Naming conventions for new widgets
Property naming rules
22

23. Leveraging Claude Code's Custom Commands
Create custom commands
like /figma-mcp-create to save time on prompts
Example Flutter Conversion Rules

Material 3 Compliant
Use Cupertino for specific components like pickers
For design/architecture, please refer to the sample in ~.md
Utilize all four of Figma's core features
23

24. Example Flutter Implementation Patterns
05
24

25. Demo
Flutter 구현 패턴 예시
두 가지 접근 방식:
#1: /figma-mcp-create - Generate a new page from scratch ← Today’s Demo
#2: /figma-mcp-fix - Review diffs and apply Figma changes to existing code
Demonstrate the flow:
Select in Figma → Run Claude Code → Generate Flutter code
(※A comparison of the results will be shown separately)
25

27. 1: New Page Generation - The Importance of Structure
Structured Figma Design

（colors/primary, spacing/medium）
Fully Componentized
Clear Naming Conventions
5 mins (Generation) +
15 mins (Adjustments)
Unstructured Figma Design

（color: #000000）
Redundant variables
（color/primary, theme/primary）
Not componentized
Ambiguous naming
（Ex : Rectangle 123）
⚠️Leads to code that is difficult to
maintain
27

28. Unstructured Figma DesignStructured Figma Design
1: New Page Generation - The Importance of Structure
28

29. 1: New Page Generation - The Importance of Structure
Structured Figma: Generated Code Unstructured Figma: Generated Code
29

30. Structured Figma:
The Resulting UI
Unstructured Figma:
The Resulting UI
1: New Page Generation - The Importance of Structure
Original Figma
design
30

31. Command : /figma-mcp-create MainPage
Annotations Used
Screen transition
Floating navigation bar
Fixed 5 cards
Enable "pull to refresh"
Increment/decrement for the "like" button

Manual: 2 hours
AI: 40 mins
(10 min generation + 30 min adjustment)
31

32. Code Output UI Output
Reflected Features
Like count updates
Floating navigation bar
Pull to refresh
Screen Navigation
32

33. Ensuring the Quality of AI-Generated Code
06
33

34. Point 1: Human Oversight or a Validation System is Essential
AI is not always correct


That's why, to ensure AI output quality, a person or system
capable of identifying errors is essential
34

35. Solution : Proper Task Classification
Key Principle : Leverage Respective Strengths

（analyze, format, test）
Where AI Excels → Code Generation & Refactoring
（UI components, boilerplate code）
Human-Essential → Architectural Decisions & Final Review
（Security, performance, business logic）
️Clear classification achieves both efficiency and quality
35

36. Practical Methods for Quality Improvement

Adapt to new APIs via context7, MCP, etc
AI-Powered Code Review
Run the /review command multiple times in separate sessions
Leveraging Automation
Pre-commit : Run analyze, format, test
Completion: Use Claude Code's stop hooks
Final Human Verification
Focus on reviewing aspects that AI cannot judge
36

37. Point 2: Testing Strategy for AI-Generated Code
Reality : AI Struggles with Test Creation
Exception: Only Widgetbook (UI catalog) has high accuracy
A Practical Approach：
Widgetbook Tests → AI-Driven
Other Tests → Human-Led, AI-Assisted
Golden Tests → Automated Validation
Key Takeaway：
AI accelerates development,
but quality assurance remains a human responsibility
37

38. Summary
4 Key Takeaways

→Reduce noise with Variables, Components, Annotations, and clear naming conventions

→Let AI generate UI, humans handle business logic, and tools perform static checks

→Build a system for fast, consistent, high-quality implementation

→Combine static analysis, Golden Tests, AI reviews, and final human judgment
38

39. References
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. 2 Thank you for listening!
Yuta Asada
@bull_012