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

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?

그럼에도 개발 속도를 향상시킬 수 있습니다


이는 AI 코드 생성에 매우 이상적입니다

3

4. 아젠다






4

5. 01
5

6. What is Figma Dev Mode MCP?
MCP의 가치:


- 표준 프로토콜을 통해 연결 간소화

- AI가 자율적으로 Figma 디자인을 읽고 해석

이전: 각 팀의 커스텀 구현 → 복잡하고 비효율적

MCP 도입 후: 표준화 → 누구나 즉시 사용 가능 → AI가 자율적으로 디자인을 코드로 변환
※Dev Sheet 유료 플랜/구독이 필요합니다
6

7. 코드 생성 + 어노테이션: 동적 동작 활성화
디자인 토큰 가져오기: 예) colors/primary = #2196F3
시각적 참조를 위한 스크린샷
구조 정보 획득
Figma Dev Mode MCP의 주요 특징
※ 참고: 이번 발표에서는 다루지 않는 기능
get_code_connect_map → Figma와 React 컴포넌트 연결 (Flutter 미지원)
create_design_system_rules→ 규칙 파일 자동 생성 (수동 정의로 충분)
7

8. 설정: 2가지 중요한 참고 사항

로컬 서버 (데스크톱 앱 사용) 권장 (모든 기능 사용 가능)
원격 서버: 일부 기능이 제한된 상태로 단계적 출시 중
공식 영어 문서 사용 (가장 최신 정보를 담고 있음)
아래 링크를 따라 설정해 주세요
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 사용을 위한 전제 조건

디자이너와 엔지니어가 협력하여 구조화
AI UI 코드 생성을 염두에 둔 디자인
UI 레이어와 비즈니스 로직 레이어를 명확하게 분리
11

12. 지향점:
디자이너와 엔지니어가,
역할에 관계없이 Figma에서 함께 협업하는 것이,
바로 핵심입니다
※핵심 요점:
양쪽의 관점을 이해하는 것이
두 역할을 모두 수행하는 것보다 더 중요합니다
12

13. 목표: AI가 전적으로 처리하는 작업의 범위 확장
핵심 포인트

Figma-to-Code 변환 시, 우선 UI 레이어에만 집중
비즈니스 로직은 별도의 프롬프트나 명령어로 구현
너무 많은 정보 제공은 정확도를 떨어뜨릴 수 있음
13

14. Figma의 이해와 구조화
03
14

15. 성공을 위한 전제 조건
구조화 = 노이즈 감소 = 정확한 AI 생성
Figma Variables 정의하기



15

16. Figma Variables란 무엇인가?
디자인 토큰 관리
16

17. Figma Annotation이란 무엇인가?
시각적 디자인을 넘어 추가적인 구현 컨텍스트를 제공
예시)
화면 전환



18

18. 왜 Figma Components를 사용하는가?
컴포넌트를 올바르게 사용하면…

재사용 가능한 Flutter 위젯의
인자(arguments) 표준화에 도움
현재 상태: Code Connect 미지원

Figma Components

↕️

Flutter 코드 자동 연결

AI의 패턴 인식 능력 향상
미래의 Code Connect를 위한 대비
컴포넌트 구조화의 명확한 이점
17

19. 네이밍 컨벤션(명명 규칙)의 중요성
Figma 레이어 이름은 MCP를 통해 접근 가능
→ 따라서, 일관성 있고 시스템에 맞는 명명 체계를 사용해야 함
잘못된 네이밍

-
Frame 789
button copy 2
문제점:

코드 생성 과정에 혼란을 줌
올바른 네이밍

ProductList
ProductDetailScreen
PrimaryButton
장점:

적절한 변수명 생성
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 변환 규칙 예시

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-mcp-create MainPage
사용된 어노테이션
화면 전환
플로팅 내비게이션 바
5개 카드 고정
"Pull to refresh" 활성화
"좋아요" 버튼의 증감(Increment/decrement)

수동: 2시간
AI: 40분
(10분 생성 + 30분 수정)
31

32. 코드 출력물 UI 출력물
반영된 기능
'좋아요' 수 업데이트
플로팅 내비게이션 바
Pull to refresh
화면 내비게이션
32

33. AI 생성 코드의 품질 보증
06
33

34. 포인트 1: 사람에 의한 검토 또는 검증 시스템은 필수적
AI가 항상 옳은 것은 아님


따라서 AI 출력물의 품질을 보장하기 위해서는, 오류를 식별할 수 있는
사람이나 시스템이 필수적임
34

35. 해결책: 적절한 역할 분담
핵심 원칙: 각각의 강점 활용하기

(분석, 포맷, 테스트)
AI가 뛰어난 영역 → 코드 생성 & 리팩토링
(UI 컴포넌트, 보일러플레이트 코드)
사람이 필수적인 영역 → 아키텍처 결정 & 최종 검토
(보안, 성능, 비즈니스 로직)
️명확한 분류는 효율성과 품질을 모두 달성함
35

36. 품질 향상을 위한 실용적인 방법

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가지 핵심 요점

→Variables, Components, Annotations, 그리고 명확한 네이밍 컨벤션으로 노이즈 감소

→AI는 UI 생성, 사람은 비즈니스 로직, 도구는 정적 검사를 수행하도록 역할 분담

→빠르고 일관되며 품질 높은 구현을 위한 시스템 구축

→정적 분석, 골든 테스트, 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