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

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의 Flutter 지원이 제한적이라 간과되기 쉽지만, 그럼에도 개발 속도를 향상시킬 수 있습니다 AI와 MCP는 디자인과 엔지니어링 사이의 간극을 좁히고 있습니다 네이티브 앱은 일관된 디자인 시스템을 갖추는 경향이 있으며, 이는 AI 코드 생성에 매우 이상적입니다 Claude Code는 점차 주목받으며 많은 팀에서 도입하고 있습니다. 3
4. 아젠다 Figma Dev Mode MCP와 Claude Code의 기초 Figma Dev Mode MCP와 Claude Code 사용을 위한 전제 조건 Figma의 이해와 구조화 Claude를 활용한 코드 생성 팁 Flutter 구현 패턴 예시 AI 생성 코드의 품질 보증 4
5. Figma Dev Mode MCP와 Claude Code의 기초 01 5
6. What is Figma Dev Mode MCP? MCP의 가치:

 - 표준 프로토콜을 통해 연결 간소화
 - AI가 자율적으로 Figma 디자인을 읽고 해석 
 이전: 각 팀의 커스텀 구현 → 복잡하고 비효율적 
 MCP 도입 후: 표준화 → 누구나 즉시 사용 가능 → AI가 자율적으로 디자인을 코드로 변환 ※Dev Sheet 유료 플랜/구독이 필요합니다 6
7. get_design_context get_variable_defs get_image get_metadata 코드 생성 + 어노테이션: 동적 동작 활성화 디자인 토큰 가져오기: 예) colors/primary = #2196F3 시각적 참조를 위한 스크린샷 구조 정보 획득 Figma Dev Mode MCP의 주요 특징 ※ 참고: 이번 발표에서는 다루지 않는 기능 get_code_connect_map → Figma와 React 컴포넌트 연결 (Flutter 미지원) create_design_system_rules→ 규칙 파일 자동 생성 (수동 정의로 충분) 7
8. 설정: 2가지 중요한 참고 사항 MCP 설정 로컬 서버 (데스크톱 앱 사용) 권장 (모든 기능 사용 가능) 원격 서버: 일부 기능이 제한된 상태로 단계적 출시 중 공식 영어 문서 사용 (가장 최신 정보를 담고 있음) 아래 링크를 따라 설정해 주세요 MCP tools https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts → 로컬 서버 설정 https://developers.figma.com/docs/figma-mcp-server/local-server-installation/ 원격 서버 설정 https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/ 8
9. Claude Code란 무엇인가? Anthropic사가 개발한 터미널 기반 AI 코딩 에이전트 MCP 호환 예시)
 프롬프트: "Figma의 ProductListScreen 구현 요청" ↓ 결과: 디자인, 구현, 품질 검사를 모두 처리 100% 완벽하지는 않습니다.
 하지만 구현 시간을 크게 단축시킵니다 9
10. Figma Dev Mode MCP와 Claude Code 사용을 위한 전제 조건 02 10
11. Figma Dev Mode MCP와 Claude Code 사용을 위한 전제 조건 Figma에 엔지니어링 관점 도입하기 디자이너와 엔지니어가 협력하여 구조화 AI UI 코드 생성을 염두에 둔 디자인 UI 레이어와 비즈니스 로직 레이어를 명확하게 분리 11
12. Figma에 엔지니어링 관점 도입하기 지향점: 디자이너와 엔지니어가, 역할에 관계없이 Figma에서 함께 협업하는 것이, 바로 핵심입니다 ※핵심 요점: 양쪽의 관점을 이해하는 것이 두 역할을 모두 수행하는 것보다 더 중요합니다 12
13. AI UI 코드 생성을 염두에 둔 디자인 목표: AI가 전적으로 처리하는 작업의 범위 확장 핵심 포인트 UI와 비즈니스 로직 레이어를 명확하게 분리 Figma-to-Code 변환 시, 우선 UI 레이어에만 집중 비즈니스 로직은 별도의 프롬프트나 명령어로 구현 너무 많은 정보 제공은 정확도를 떨어뜨릴 수 있음 13
14. Figma의 이해와 구조화 03 14
15. 성공을 위한 전제 조건 구조화 = 노이즈 감소 = 정확한 AI 생성 Figma Variables 정의하기 Figma Annotations 추가하기 Figma Components 정리하기 네이밍 컨벤션 표준화하기 15
16. Figma Variables란 무엇인가? 디자인 토큰 관리 16
17. Figma Annotation이란 무엇인가? 시각적 디자인을 넘어 추가적인 구현 컨텍스트를 제공 예시) 화면 전환 스크롤 동작 애니메이션 목 데이터 (Mock Data) 18
18. 왜 Figma Components를 사용하는가? 컴포넌트를 올바르게 사용하면… 참조 및 디자인 토큰의 수 감소 재사용 가능한 Flutter 위젯의 인자(arguments) 표준화에 도움 현재 상태: Code Connect 미지원
 Figma Components
 ↕️
 Flutter 코드 자동 연결 더 적은 수의 디자인 토큰 AI의 패턴 인식 능력 향상 미래의 Code Connect를 위한 대비 컴포넌트 구조화의 명확한 이점 17
19. 네이밍 컨벤션(명명 규칙)의 중요성 Figma 레이어 이름은 MCP를 통해 접근 가능 → 따라서, 일관성 있고 시스템에 맞는 명명 체계를 사용해야 함 잘못된 네이밍 Rectangle 123 - Frame 789 button copy 2 문제점: AI가 노이즈로 해석함 코드 생성 과정에 혼란을 줌 올바른 네이밍 ProductCard ProductList ProductDetailScreen PrimaryButton 장점: AI가 역할을 이해함 적절한 변수명 생성 19
20. Claude를 활용한 코드 생성 팁 04 20
21. AI 시대의 디자인 원칙 핵심 요점: AI 코드 생성을 위한 디자인 다시 말해: UI와 비즈니스 로직 레이어의 역할을 분리하는 것 이는 Flutter Architecture Guide, Clean Architecture, SOLID 원칙과 같은 기존의 모범 사례와 일치합니다. 21
22. 디자인 시스템 통합 주요 정의 #1: Figma Variables를 Flutter 코드에 명확하게 매핑하기 예시) colors/primary는 DesignTokens.colors.primary에 해당 주요 정의 #2: 컴포넌트 재사용 규칙 예시) 기존 위젯 재사용 기준 새 위젯의 네이밍 컨벤션(명명 규칙) 속성(Property) 명명 규칙 22
23. Claude Code의 커스텀 커맨드(Custom Command) 활용하기 /figma-mcp-create와 같은 커스텀 커맨드를 만들어 프롬프트 입력 시간 절약 Flutter 변환 규칙 예시 Figma Variables는 Theme.of(context)를 통해 구현 Material 3 준수 피커(picker)와 같은 특정 컴포넌트에는 Cupertino 사용 디자인/아키텍처는 ~.md의 샘플을 참고하세요 Figma의 4가지 핵심 기능을 모두 활용 23
24. Flutter 구현 패턴 예시 05 24
25. 데모 Example Flutter Implementation Patterns Two Approaches： #1: /figma-mcp-create - 처음부터 새 페이지 생성 ← 오늘 시연할 내용 #2: /figma-mcp-fix - 변경사항(diff)을 검토하고 Figma 변경 내용을 기존 코드에 적용 데모 순서: → Figma에서 선택 → Claude Code 실행 → Flutter 코드 생성 (※결과 비교는 별도로 보여드립니다) 25
27. 1: 새 페이지 생성 - 구조의 중요성 구조화된 Figma 디자인 변수 사용 （colors/primary, spacing/medium） 완전한 컴포넌트화 명확한 네이밍 컨벤션(명명 규칙) 5분 (생성) + 15분 (수정) 구조화되지 않은 Figma 디자인 하드코딩된 값 （color: #000000） 중복된 변수 （color/primary, theme/primary） 컴포넌트화되지 않음 모호한 네이밍 （Ex : Rectangle 123） ⚠️유지보수가 어려운 코드로 이어짐 27
28. 구조화되지 않은 Figma 디자인 구조화된 Figma 디자인 1: 새 페이지 생성 - 구조의 중요성 28
29. 1: 새 페이지 생성 - 구조의 중요성 구조화된 Figma: 생성된 코드 구조화되지 않은 Figma: 생성된 코드 29
30. 구조화된 Figma: 결과 UI 구조화되지 않은 Figma: 결과 UI 1: 새 페이지 생성 - 구조의 중요성 원본 Figma 디자인 30
31. Figma Annotations를 활용한 동적 동작 구현 커맨드: /figma-mcp-create MainPage 사용된 어노테이션 화면 전환 플로팅 내비게이션 바 5개 카드 고정 "Pull to refresh" 활성화 "좋아요" 버튼의 증감(Increment/decrement) 수동: 2시간 AI: 40분 (10분 생성 + 30분 수정) 31
32. Figma Annotations를 활용한 동적 동작 구현 코드 출력물 UI 출력물 반영된 기능 '좋아요' 수 업데이트 플로팅 내비게이션 바 Pull to refresh 화면 내비게이션 32
33. AI 생성 코드의 품질 보증 06 33
34. 포인트 1: 사람에 의한 검토 또는 검증 시스템은 필수적 AI가 항상 옳은 것은 아님 "환각(hallucination)" 현상을 일으키기 쉬움 정적 분석에 실패하는 코드를 생성할 수 있음 따라서 AI 출력물의 품질을 보장하기 위해서는, 오류를 식별할 수 있는 사람이나 시스템이 필수적임 34
35. 해결책: 적절한 역할 분담 핵심 원칙: 각각의 강점 활용하기 자동화 가능 → 정적 분석 도구 & 스크립트 (분석, 포맷, 테스트) AI가 뛰어난 영역 → 코드 생성 & 리팩토링 (UI 컴포넌트, 보일러플레이트 코드) 사람이 필수적인 영역 → 아키텍처 결정 & 최종 검토 (보안, 성능, 비즈니스 로직) ️명확한 분류는 효율성과 품질을 모두 달성함 35
36. 품질 향상을 위한 실용적인 방법 최신 API 정보 계속 파악하기 context7, MCP 등을 통해 새로운 API에 적응 AI 기반 코드 리뷰 /review 커맨드를 별도의 세션에서 여러 번 실행 자동화 활용 Pre-commit: analyze, format, test 실행 Completion: Claude Code의 스톱 훅(stop hooks) 사용 사람에 의한 최종 검증 AI가 판단할 수 없는 측면의 검토에 집중 36
37. 포인트 2: AI 생성 코드 테스트 전략 현실: AI는 테스트 생성에 어려움을 겪음 예외: Widgetbook(UI 카탈로그)만이 높은 정확도를 보임 실용적인 접근 방식: Widgetbook 테스트 → AI 주도 그 외 테스트 → 사람 주도, AI 보조 Golden Tests → 자동화된 검증 핵심 요점: AI는 개발을 가속화하지만, 품질 보증은 여전히 사람의 책임으로 남음 37
38. 요약 4가지 핵심 요점 AI에게 정확한 정보만 제공하도록 Figma를 구조화하기 →Variables, Components, Annotations, 그리고 명확한 네이밍 컨벤션으로 노이즈 감소 AI, 사람, 도구의 역할을 각각의 강점에 기반하여 정의하기 →AI는 UI 생성, 사람은 비즈니스 로직, 도구는 정적 검사를 수행하도록 역할 분담 커스텀 커맨드와 MCP로 워크플로우를 표준화 및 자동화하기 →빠르고 일관되며 품질 높은 구현을 위한 시스템 구축 자동화와 다층적 검토를 통해 품질 보장하기 →정적 분석, 골든 테스트, 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