【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/

Transcript

1. Accelerating Flutter UI Development with 
 Figma Dev Mode MCP × Claude Code Yuta Asada Flutter Alliance 2025
2. Introduction 2 Yuta Asada Atrae, Inc. @Japan Co-Organizer of Flutter Tokyo X: @bull_012 ↓Y ou can check today’s slide from X
3. Why Flutter with Figma Dev Mode, MCP & Claude Code? Figma Dev Mode MCP's limited Flutter support makes it overlooked, but it can still speed up development AI and MCP are bridging the gap between design and engineering Native apps tend to have a consistent design system which is perfect for AI code generation Claude Code is gaining traction and is being adopted by many teams 3
4. Agenda Fundamentals of Figma Dev Mode MCP and Claude Code Prerequisites for Using Figma Dev Mode MCP & Claude Code Understanding and Structuring Figma Tips for Generating Code with Claude Example Flutter Implementation Patterns Ensuring the Quality of AI-Generated Code 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. get_design_context get_variable_defs get_image get_metadata 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 MCP Setup 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 Bring an Engineering Perspective to Figma 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. Bring an Engineering Perspective to Figma 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. Design for AI UI Code Generation Goal : Expand the scope of tasks handled entirely by AI Key Points Clearly separate the UI and Business Logic layers 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 Add Figma Annotations Organize Figma Components Standardize Naming Conventions 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 Scroll Behavior Animations Mock Data 18
18. Why use Figma Components? Using components correctly... Reduces references and the number of 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 Fewer Design Tokens 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 Rectangle 123 - Frame 789 button copy 2 Problems： AI interprets it as noise Confuses the code generation process Good Naming ProductCard ProductList ProductDetailScreen PrimaryButton Benefits： AI understands the role 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 Figma Variables should be implemented via Theme.of(context) 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 Uses Variables （colors/primary, spacing/medium） Fully Componentized Clear Naming Conventions 5 mins (Generation) + 15 mins (Adjustments) Unstructured Figma Design Hard-coded values （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 Design Structured 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. Implementing Dynamic Behavior with Figma Annotations 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. Implementing Dynamic Behavior with Figma Annotations 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 It is prone to "hallucinations" It may generate code that fails static analysis 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 Automatable → Static Analysis Tools & Scripts （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 Stay Updated with the Latest APIs 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 Structure Figma to feed the AI only accurate information →Reduce noise with Variables, Components, Annotations, and clear naming conventions Define roles for AI, humans, and tools based on their strengths →Let AI generate UI, humans handle business logic, and tools perform static checks Standardize and automate your workflow with custom commands and MCP →Build a system for fast, consistent, high-quality implementation Ensure quality through automation and multi-layered reviews →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