Figma MCP는 요청한 것만 정확히 만든다 — 그 이상은 없다 — 2026년 11주 디자인 시스템
UI component architecture, design tokens, and semantic theming Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 11-2026
article
Figma MCP는 요청한 것만 정확히 만든다 — 그 이상은 없다
TAG: 심층 분석
Edy Silva와 동료 Gabriel Quaresma는 Claude Code를 통한 Figma MCP 통합을 직접 실험했습니다. 핵심 발견은 구체성이 전부라는 점입니다. 특정 Figma 노드를 지정하여 기존 컴포넌트(예: React/Tailwind 기반 병원 대시보드의 Sidebar.jsx)를 업데이트하면 안정적으로 작동하지만, 파일 전체를 모호하게 지시하면 결과가 일관되지 않습니다. Claude는 wireframe에 표시된 것을 그대로 재현합니다. 모바일 전용 390px frame은 모바일로만 출력되고, HTML 단일 파일 요청은 단일 파일로 유지됩니다. Responsive layout이나 프로젝트 아키텍처는 스스로 추론하지 않습니다. Design library 매핑은 여전히 미해결 과제이며, Figma 스타터 플랜의 월 약 6회 MCP 요청 제한은 반복적 학습의 실질적인 장벽입니다.
2025년 호주에서 세 가지 중요한 규제 변화가 발생했으며, 이는 전 세계적인 함의를 지닙니다. 호주 인권위원회(AHRC)는 WCAG 2.0을 대체하여 WCAG 2.2 Level AA를 최소 기준으로 채택했습니다. 새로운 Level A/AA 기준 여섯 가지로는 포커스 가림 방지(2.4.11), 드래그 동작(2.5.7), 최소 타깃 크기(2.5.8), 접근 가능한 인증(3.3.8), 중복 입력 방지(3.3.7), 일관된 도움말(3.2.6)이 포함됩니다. AHRC는 또한 SaaS, AI 툴, IoT 기기, 생체 인증 플로우에까지 장애인 차별 금지법(DDA) 의무를 확대했습니다. 별도로 디지털전환청(DTA)의 새로운 Digital Experience Policy는 2025년 1월부터 모든 정부 서비스가 디지털 서비스, 디지털 포용, 디지털 접근성, 디지털 성과 기준을 충족하도록 의무화했습니다. Deque는 2026년 EN 표준 정식 개정 시 중복 보완 작업을 피하기 위해 EN 301 549와 WCAG 2.2 AA를 동시에 목표로 삼을 것을 권고합니다.
Mary Achinger는 아무도 사용하지 않는 design system을 실제로 활용되는 시스템으로 전환하기 위한 체계적인 플레이북을 제시하며, 모든 권고사항을 가정이 아닌 현장 리서치에 근거합니다. 기초 단계는 contextual inquiry에 집중합니다. 스프린트 플래닝과 코드 리뷰를 관찰해 팀이 컴포넌트를 로컬에 복사하거나 별도 시스템을 구축하는 지점을 파악합니다. "token hacker"와 "skeptical developer" 같은 페르소나는 이후 단계별 온보딩과 역할별 문서 구성에 활용됩니다. Capability-to-complexity 매트릭스는 준비되지 않은 팀에 대한 과도한 엔지니어링을 방지합니다. Netguru의 Silk 커머스 design system은 반복적인 실증 사례로, 설정 시간을 50% 단축하고 MVP 스프린트당 3~6일을 절약했으며, 전체 리브랜딩 작업을 약 3일 만에 완료했습니다.
이 종합 가이드는 글로벌 color token($purple-100 등)부터 alias token($color-icon-success 등), 4px 기준 spacing 스케일, 그리고 컴포넌트 및 패턴 라이브러리까지 design system의 해부학을 체계적으로 정리하며, 각 레이어가 어떻게 디자이너-개발자 간 격차를 좁히는지 설명합니다. 또한 컴포넌트 라이브러리(명명된 독립 UI 요소, prop 정의 및 상태 변형 포함)와 패턴 라이브러리(공통 레이아웃 문제에 대한 재사용 가능한 솔루션)를 명확히 구분합니다. Silk 커머스 design system이 핵심 사례로 활용됩니다. 쇼핑 플로우에 맞춘 33개의 완전 커스터마이징 가능한 pre-built 컴포넌트는 설정 시간을 50% 단축하고, MVP 스프린트당 3~6일을 절약하며, 약 3일 만에 전체 리브랜딩을 완료했습니다. 거버넌스 권고사항에는 semantic versioning, changelog, 그리고 하이브리드 팀 구조(코어 팀과 임베디드 기여자 조합)가 포함됩니다.
TetraLogical의 Demelza Feltham은 기본적인 WCAG 준수를 넘어 보다 인간 중심적인 관점에서 불안을 가진 사용자의 인지 부하를 줄이는 구체적인 디자인 패턴을 제시합니다. 가장 먼저 다루는 것은 시간적 압박입니다. 티켓팅 및 2FA 플로우의 카운트다운 타이머는 이탈을 유발하므로, WCAG 2.2.1 Timing Adjustable을 구현하고 카운트다운 자체를 숨기는 옵션을 제공하며 "천천히 하세요" 같은 부드러운 문구로 대체해야 합니다. 장바구니 수량이나 입찰 활동을 보여주는 희소성 큐와 같은 긴박감 유발 요소는 불안한 사용자에게 불균형적으로 해로운 다크 패턴으로 지목됩니다. 예측 가능한 UI 관례(예상되는 우측 상단 위치에 명확히 표시된 닫기 버튼, 명확하게 스타일된 인터랙티브 요소)와 접근 가능한 wayfinding(브레드크럼, 명확한 내비게이션, 검색)도 인지 부담을 줄이는 데 효과적입니다. 필요한 서류를 미리 안내하는 폼 전 체크리스트와 투명한 데이터 수집 이유 설명이 가이드를 완성합니다.
진행자 Jay는 Figma, Firefox, Slack, RAMP, Lattis, Intercom, Shopify 등 주요 프로덕트 팀의 시니어 디자이너들을 인터뷰하여 실제 Figma-to-engineering 핸드오프 워크플로를 공개합니다. 공통된 패턴이 드러납니다. design token 값에 매핑된 커스텀 spacing 어노테이션 컴포넌트(예: size 100 = 8dp)는 패딩 명시 측면에서 Figma 기본 어노테이션 툴보다 뛰어납니다. "ready for dev" 플래그와 전용 spec 페이지는 스케치 작업과 최종 산출물을 명확히 분리합니다. 스토리보드 방식의 모션 시트는 산문 설명 대신 픽셀 수치와 키프레임 타이밍을 직접 정의합니다. 마지막 섹션에서는 Shopify와 Intercom 디자이너들이 AI 보조 환경에서 직접 코딩해 실제 GitHub PR과 공유 가능한 브라우저 링크를 생성하는 방식, 즉 핸드오프를 Figma 파일 리뷰가 아닌 브랜치 fork로 전환한 사례를 보여줍니다.
Edy Silva와 동료 Gabriel Quaresma는 Claude Code를 통한 Figma MCP 통합을 직접 실험했습니다. 핵심 발견은 구체성이 전부라는 점입니다. 특정 Figma 노드를 지정하여 기존 컴포넌트(예: React/Tailwind 기반 병원 대시보드의 Sidebar.jsx)를 업데이트하면 안정적으로 작동하지만, 파일 전체를 모호하게 지시하면 결과가 일관되지 않습니다. Claude는 wireframe에 표시된 것을 그대로 재현합니다. 모바일 전용 390px frame은 모바일로만 출력되고, HTML 단일 파일 요청은 단일 파일로 유지됩니다. Responsive layout이나 프로젝트 아키텍처는 스스로 추론하지 않습니다. Design library 매핑은 여전히 미해결 과제이며, Figma 스타터 플랜의 월 약 6회 MCP 요청 제한은 반복적 학습의 실질적인 장벽입니다.
진행자 Jay는 Figma, Firefox, Slack, RAMP, Lattis, Intercom, Shopify 등 주요 프로덕트 팀의 시니어 디자이너들을 인터뷰하여 실제 Figma-to-engineering 핸드오프 워크플로를 공개합니다. 공통된 패턴이 드러납니다. design token 값에 매핑된 커스텀 spacing 어노테이션 컴포넌트(예: size 100 = 8dp)는 패딩 명시 측면에서 Figma 기본 어노테이션 툴보다 뛰어납니다. "ready for dev" 플래그와 전용 spec 페이지는 스케치 작업과 최종 산출물을 명확히 분리합니다. 스토리보드 방식의 모션 시트는 산문 설명 대신 픽셀 수치와 키프레임 타이밍을 직접 정의합니다. 마지막 섹션에서는 Shopify와 Intercom 디자이너들이 AI 보조 환경에서 직접 코딩해 실제 GitHub PR과 공유 가능한 브라우저 링크를 생성하는 방식, 즉 핸드오프를 Figma 파일 리뷰가 아닌 브랜치 fork로 전환한 사례를 보여줍니다.
2025년 호주에서 세 가지 중요한 규제 변화가 발생했으며, 이는 전 세계적인 함의를 지닙니다. 호주 인권위원회(AHRC)는 WCAG 2.0을 대체하여 WCAG 2.2 Level AA를 최소 기준으로 채택했습니다. 새로운 Level A/AA 기준 여섯 가지로는 포커스 가림 방지(2.4.11), 드래그 동작(2.5.7), 최소 타깃 크기(2.5.8), 접근 가능한 인증(3.3.8), 중복 입력 방지(3.3.7), 일관된 도움말(3.2.6)이 포함됩니다. AHRC는 또한 SaaS, AI 툴, IoT 기기, 생체 인증 플로우에까지 장애인 차별 금지법(DDA) 의무를 확대했습니다. 별도로 디지털전환청(DTA)의 새로운 Digital Experience Policy는 2025년 1월부터 모든 정부 서비스가 디지털 서비스, 디지털 포용, 디지털 접근성, 디지털 성과 기준을 충족하도록 의무화했습니다. Deque는 2026년 EN 표준 정식 개정 시 중복 보완 작업을 피하기 위해 EN 301 549와 WCAG 2.2 AA를 동시에 목표로 삼을 것을 권고합니다.
Mary Achinger는 아무도 사용하지 않는 design system을 실제로 활용되는 시스템으로 전환하기 위한 체계적인 플레이북을 제시하며, 모든 권고사항을 가정이 아닌 현장 리서치에 근거합니다. 기초 단계는 contextual inquiry에 집중합니다. 스프린트 플래닝과 코드 리뷰를 관찰해 팀이 컴포넌트를 로컬에 복사하거나 별도 시스템을 구축하는 지점을 파악합니다. "token hacker"와 "skeptical developer" 같은 페르소나는 이후 단계별 온보딩과 역할별 문서 구성에 활용됩니다. Capability-to-complexity 매트릭스는 준비되지 않은 팀에 대한 과도한 엔지니어링을 방지합니다. Netguru의 Silk 커머스 design system은 반복적인 실증 사례로, 설정 시간을 50% 단축하고 MVP 스프린트당 3~6일을 절약했으며, 전체 리브랜딩 작업을 약 3일 만에 완료했습니다.
이 종합 가이드는 글로벌 color token($purple-100 등)부터 alias token($color-icon-success 등), 4px 기준 spacing 스케일, 그리고 컴포넌트 및 패턴 라이브러리까지 design system의 해부학을 체계적으로 정리하며, 각 레이어가 어떻게 디자이너-개발자 간 격차를 좁히는지 설명합니다. 또한 컴포넌트 라이브러리(명명된 독립 UI 요소, prop 정의 및 상태 변형 포함)와 패턴 라이브러리(공통 레이아웃 문제에 대한 재사용 가능한 솔루션)를 명확히 구분합니다. Silk 커머스 design system이 핵심 사례로 활용됩니다. 쇼핑 플로우에 맞춘 33개의 완전 커스터마이징 가능한 pre-built 컴포넌트는 설정 시간을 50% 단축하고, MVP 스프린트당 3~6일을 절약하며, 약 3일 만에 전체 리브랜딩을 완료했습니다. 거버넌스 권고사항에는 semantic versioning, changelog, 그리고 하이브리드 팀 구조(코어 팀과 임베디드 기여자 조합)가 포함됩니다.
TetraLogical의 Demelza Feltham은 기본적인 WCAG 준수를 넘어 보다 인간 중심적인 관점에서 불안을 가진 사용자의 인지 부하를 줄이는 구체적인 디자인 패턴을 제시합니다. 가장 먼저 다루는 것은 시간적 압박입니다. 티켓팅 및 2FA 플로우의 카운트다운 타이머는 이탈을 유발하므로, WCAG 2.2.1 Timing Adjustable을 구현하고 카운트다운 자체를 숨기는 옵션을 제공하며 "천천히 하세요" 같은 부드러운 문구로 대체해야 합니다. 장바구니 수량이나 입찰 활동을 보여주는 희소성 큐와 같은 긴박감 유발 요소는 불안한 사용자에게 불균형적으로 해로운 다크 패턴으로 지목됩니다. 예측 가능한 UI 관례(예상되는 우측 상단 위치에 명확히 표시된 닫기 버튼, 명확하게 스타일된 인터랙티브 요소)와 접근 가능한 wayfinding(브레드크럼, 명확한 내비게이션, 검색)도 인지 부담을 줄이는 데 효과적입니다. 필요한 서류를 미리 안내하는 폼 전 체크리스트와 투명한 데이터 수집 이유 설명이 가이드를 완성합니다.
이번 주 featured 기사는 AI 보조 design-to-code 워크플로를 면밀히 분석했습니다. Edy Silva의 Claude Code를 통한 Figma MCP 직접 실험이 보여준 핵심 교훈은 구체성이 전부라는 것입니다. Sidebar.jsx 같은 특정 컴포넌트를 업데이트하기 위해 정확한 Figma 노드를 지정하면 안정적으로 동작하지만, 파일 단위의 모호한 지시는 그렇지 않습니다. Claude는 wireframe을 충실히 재현하지만 반응형 아키텍처를 스스로 추론하지 않습니다. Design library 매핑은 여전히 미해결 과제이며, Figma 스타터 플랜의 월 약 6회 MCP 요청 제한은 반복적 도입의 실질적인 장벽입니다.
Design system의 조직적 측면도 주목받았습니다. Netguru의 두 편의 보완적 기사는 글로벌 color token부터 alias token, spacing 스케일, 컴포넌트 라이브러리까지 token 계층의 전체 구조를 정리하고, 현장 리서치 기반의 도입 플레이북을 제시했습니다. 핵심은 contextual inquiry로, 스프린트 플래닝과 코드 리뷰를 관찰해 별도 시스템이 생겨나는 지점을 파악하는 것입니다. Netguru의 Silk 커머스 design system이 전체에 걸쳐 실증 사례로 활용되었으며, 설정 시간 50% 단축, 약 3일 만의 전체 리브랜딩을 완수했습니다.
이번 주의 영상은 Figma, Shopify, Intercom, Slack의 시니어 디자이너 12명이 실제 핸드오프 워크플로를 공개하며 시야를 넓혔습니다. Token 매핑 어노테이션 컴포넌트, 전용 spec 페이지, 모션 시트가 공통 패턴으로 드러났으며, 가장 앞선 팀들은 이제 Figma 파일 리뷰 대신 AI가 생성한 코드 브랜치를 fork하는 방식으로 핸드오프를 수행하며 디자이너와 개발자의 경계를 다시 한번 흐리고 있습니다.
Key Takeaways
Claude Code를 활용한 Figma MCP는 특정 컴포넌트 노드를 지정할 때 안정적으로 동작하지만, 반응형 레이아웃이나 프로젝트 아키텍처를 스스로 추론하지 않습니다. 프롬프트 구체성이 핵심 변수입니다.
Token 계층과 contextual 도입 리서치를 갖춘 잘 관리된 design system은 MVP 스프린트 설정 시간을 50% 단축하고 전체 리브랜딩을 약 3일로 압축할 수 있습니다.
가장 앞선 핸드오프 워크플로는 Figma 파일 리뷰에서 코드 우선 환경의 AI가 생성한 브랜치 fork로 이동하고 있으며, 디자이너-개발자 경계가 점점 더 유동적이 되고 있습니다.
