Introducing our MCP server: Bringing Figma into your workflow | Figma Blog

이 문서는 Figma MCP server의 베타 출시를 발표하며, 이 서버가 LLM(Large Language Models)의 디자인 기반 코드 생성(design-informed code generation)을 어떻게 지원하여 개발 워크플로우를 혁신하는지 설명합니다.

문제점 및 해결책:
기존에는 AI 도구에 디자인 맥락을 제공하는 방식이 이미지나 API 응답을 챗봇에 전달하는 것에 그쳤습니다. 이로 인해 LLM이 생성하는 코드는 작동 가능할지라도 특정 코드베이스의 고유한 구조, 프레임워크, 어휘, 워크플로우 등 팀별 "지문(fingerprint)"과 일치하지 않는 한계가 있었습니다. 이러한 맥락 부족은 코드의 정확성과 재사용성을 저해했습니다.
Figma는 Model Context Protocol (MCP)이라는 새로운 표준을 통해 이 문제를 해결하고자 합니다. MCP는 애플리케이션이 LLM에 맥락을 제공하는 표준 방식으로, Figma MCP server는 Figma에서 직접 디자인 맥락을 추출하여 이를 LLM에 제공함으로써 코드베이스의 "지문"뿐만 아니라 디자인의 "지문"까지 일치하는 코드를 생성할 수 있도록 합니다.

핵심 방법론: 디자인 맥락 제공 방식
Figma MCP server는 LLM이 디자인 의도를 포괄적으로 이해할 수 있도록 시각적 정보와 함께 미묘한 디자인 세부 정보를 보완하고, 기존 패턴 및 시스템을 활용하여 맥락을 제공합니다. 이는 LLM의 "맥락 창(context window)" 내에서 효율적으로 작동하도록 설계되었습니다. 서버는 특정 유형의 맥락을 대표하는 "도구(tools)"를 제공하며, 사용자가 반환되는 정보를 제어할 수 있도록 설정을 구성할 수 있습니다. 주요 맥락 제공 방식은 다음과 같습니다:

패턴 메타데이터 (Pattern metadata):

* 목적: LLM 토큰 사용량을 줄이고, 디자인 시스템(components, variables, styles)의 가치를 LLM에 전달하며, 정확하고 효율적인 코드 생성을 가능하게 합니다.
* 작동 방식:
* 컴포넌트 (Components): Figma가 사용 중인 컴포넌트를 인식하면, "Code Connect"를 통해 LLM에 해당 컴포넌트의 코드 파일 경로를 정확히 알려줍니다. 예를 들어, AI가 아이콘을 검색하는 대신 Figma가 특정 아이콘 컴포넌트의 위치를 알려주어 불필요한 검색이나 새로운 컴포넌트 생성을 방지합니다.
* 변수 및 토큰 (Variables/Tokens): 예를 들어, 빨간색 사각형의 경우, LLM이 단순히 빨간색 값만을 아는 것이 아니라, Figma가 사용된 특정 디자인 토큰의 이름과 Figma 내에 정의된 해당 토큰의 "코드 구문(code syntax)"을 제공할 수 있습니다. 이를 통해 모호성을 제거하고 디자인 시스템에 정의된 정확한 변수를 사용하도록 유도합니다.

스크린샷 (Screenshots):

* 목적: 메타데이터만으로는 전달하기 어려운 인터랙티브한 요소나 고수준의 디자인 흐름 및 구조에 대한 맥락을 제공합니다.
* 작동 방식: Figma MCP server는 디자인의 스크린샷을 LLM에 제공하여, 예를 들어 내장된 지도와 같은 인터랙티브 콘텐츠의 존재를 알리거나, 화면 간의 흐름, 섹션 간의 관계, 모바일/데스크탑 반응형 맥락 등 전반적인 디자인 의도를 전달합니다. 이는 픽셀 단위의 복제보다는 디자인 의도 파악에 중점을 둡니다. 스크린샷은 Figma의 코드 출력과 결합될 때 더욱 효과적입니다.

인터랙티비티 (Interactivity):

* 목적: Figma 내에 정의되었거나 코드베이스에 연결된 디자인 동작을 LLM에 설명합니다.
* 작동 방식: "Pseudocode"(코드 프로토타입)를 활용하여 LLM에 맥락을 제공합니다. 이는 단순히 속성을 나열하는 것보다 효과적이며, 변수의 코드 구문이나 Code Connect와 같은 기능을 통해 코드베이스로부터 정보를 얻어 더욱 구체적입니다. 예를 들어, 상태 저장 컴포넌트(stateful component)의 의사 표현이나 UI 시퀀스 간의 차이점을 설명할 때 유용합니다. Figma MCP server는 기본적으로 React 및 Tailwind 코드를 제공하여 LLM이 이 인터랙티브한 코드 표현을 활용할 수 있도록 합니다.

콘텐츠 (Content):

* 목적: 디자인에 내포된 콘텐츠 정보를 LLM에 전달하여 코드 측면에서 데이터 모델을 구성하는 데 도움을 줍니다.
* 작동 방식: 텍스트, SVG, 이미지, 레이어 이름, 주석 등 Figma 내의 콘텐츠(심지어 플레이스홀더 콘텐츠까지)를 LLM에 제공합니다. 이를 통해 LLM은 인터페이스를 실제 데이터로 채우는 방법을 유추할 수 있습니다.

베타 출시 및 향후 계획:
현재 Figma MCP server는 베타 버전으로, 코드, 이미지, 변수 정의를 위한 세 가지 도구를 통해 Figma에서 맥락을 가져올 수 있습니다. 코드 도구는 서버 설정에서 반환되는 응답 유형을 변경할 수 있으며, React 및 Tailwind와 같은 인터랙티브한 코드 표현을 활성화할 수 있습니다. Code Connect는 생성된 코드가 코드베이스와 일치하도록 보장합니다.
Figma는 사용자 피드백을 기반으로 지속적으로 기능을 개선할 예정입니다. 초기 개선 사항으로는 Figma 데스크탑 앱 없이 MCP 경험을 이용할 수 있도록 하는 것, 더 깊은 코드베이스 통합, 그리고 직관적인 Code Connect 설정이 포함됩니다. 향후 버전에서는 주석(annotations), Grid 등 더 많은 기능이 추가될 예정입니다. Figma MCP server는 Dev 또는 Full seat 사용자가 이용할 수 있습니다.