🚧 Dev Mode MCP 서버는 현재 오픈 베타 상태입니다. 아직 사용할 수 없는 기능과 설정도 있습니다. 베타 기간에 기능이 변경되거나 버그, 성능 문제가 발생할 수도 있습니다.

시작하기 전에

이 기능을 사용할 수 있는 사용자

Dev Mode MCP 서버는 공개 베타 상태입니다.

프로페셔널, 오거니제이션, 엔터프라이즈 요금제의 데브 또는 풀 시트로 사용할 수 있습니다.

MCP 서버를 지원하는 코드 편집기 또는 애플리케이션을 사용해야 합니다(예: VS Code, Cursor,, Windsurf, Claude Code).

Figma 데스크톱 앱에서만 Dev Mode MCP 서버를 사용할 수 있습니다. Figma 데스크톱 앱 다운로드 →

Dev Mode MCP 서버는 Figma Design 파일에서 코드를 생성하는 AI 에이전트에게 중요한 디자인 정보와 컨텍스트를 제공하여 Figma를 업무 흐름에 직접 통합합니다.

MCP 서버는 AI 에이전트가 모델 컨텍스트 프로토콜을 사용하여 데이터 소스와 상호 작용할 수 있는 표준화된 인터페이스의 일부입니다.

서버가 활성화되면 다음을 수행할 수 있습니다.

선택한 프레임에서 코드 생성

Figma 프레임을 선택하고 코드로 변환합니다. 새로운 흐름을 만들거나 앱 기능을 반복 작업으로 개선하는 제품 팀에게 적합합니다.
디자인 컨텍스트 추출

변수, 컴포넌트, 레이아웃 데이터를 직접 IDE로 가져옵니다. 디자인 시스템과 컴포넌트 기반 업무 흐름에 특히 유용합니다.
Code Connect와 함께 더 스마트하게 코딩

실제 컴포넌트를 재사용하여 출력 품질을 향상시킵니다. Code Connect는 생성된 코드와 코드베이스를 일관성 있게 유지합니다.

Code Connect에 대해 자세히 알아보기 →

1단계: MCP 서버 활성화

Figma 데스크톱 앱을 열고 최신 버전으로 업데이트했는지 확인합니다.
Figma Design 파일을 생성하거나 엽니다.
왼쪽 상단 모서리에서 Figma 메뉴를 엽니다.
기본 설정에서 Dev Mode MCP 서버 활성화를 선택합니다.

화면 하단에 서버가 활성화되었고 실행 중임을 알려주는 확인 메시지가 표시될 것입니다.

서버는 http://127.0.0.1:3845/sse에서 로컬로 실행됩니다. 다음 단계에서 구성 파일에 사용할 수 있도록 이 주소를 쉽게 접근할 수 있는 곳에 보관하세요.

2단계: MCP 클라이언트 설정

서버가 Figma 데스크톱 앱에서 로컬로 실행되면 MCP 클라이언트가 서버에 연결할 수 있습니다. 본인에게 맞는 클라이언트용 지침을 따라 Dev Mode MCP 서버를 추가하세요.

코드 → 설정 → 설정으로 이동하거나 바로가기 ⌘ ,를 사용하세요.
검색 창에 'MCP'를 입력하세요.
settings.json에서 편집을 선택합니다.

다음과 같이 Figma Dev Mode MCP 구성을 서버에 추가합니다.

"chat.mcp.discovery.enabled": true,
 "mcp": {
   "servers": {
     "Figma Dev Mode MCP": {
       "type": "sse",
       "url": "http://127.0.0.1:3845/sse"
     }
   }
 },
 "chat.agent.enabled": true

⌥⌘B 또는 ⌃⌘I를 사용하여 채팅 도구 모음을 열고 에이전트 모드로 전환합니다.
선택 도구 메뉴를 열고 MCP 서버: Figma Dev Mode MCP라는 라벨의 섹션을 찾습니다. 도구가 나열되지 않으면 Figma 데스크톱 앱과 VS Code를 다시 시작합니다.

참고: VS Code에서 MCP를 사용하려면 계정에 GitHub Copilot이 활성화되어 있어야 합니다.

자세한 내용은 VS Code의 공식 문서를 참조하세요.

Cursor→ 설정 → Cursor 설정을 엽니다.
MCP 탭으로 이동합니다.
+ 새 글로벌 MCP 서버 추가를 클릭합니다.

다음 구성을 입력하고 저장합니다.

{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

자세한 내용은 Cursor 공식 문서에서 참조하세요.

Windsurf → 설정 → Windsurf 설정을 열거나 바로가기 ⌘ ,를 사용합니다.
Cascade 설정으로 이동하여 플러그인 스토어 열기를 선택합니다.
Figma를 검색하고 플러그인을 설치합니다.
Cascade를 열면 Figma MCP 서버와 사용 가능한 도구가 표시됩니다.

자세한 내용은 Windsurf 공식 문서에서 참조하세요.

참고: Windsurf의 경우 오류를 방지하려면 구성 파일의 URL 속성을 serverUrl로 변경하세요.

터미널을 열고 다음 명령을 실행합니다.

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

다음 명령어를 사용하여 MCP 설정을 확인하고 서버를 관리합니다.
- 구성된 서버 모두 나열
```
claude mcp list
```
- 특정 서버의 세부 정보 가져오기
```
claude mcp get my-server
```
- 서버 제거
```
claude mcp remove my-server
```

자세한 내용은 Anthropic의 공식 문서에서 확인하세요.

SSE(Server-Sent Events)를 지원하는 다른 코드 편집기 및 도구도 Dev Mode MCP 서버에 연결할 수 있습니다.

다른 편집자나 도구를 사용 중이라면, 해당 설명서를 확인하여 SSE 기반 통신을 지원하는지 보세요. 만약 그렇다면, 이 구성을 사용하여 Dev Mode MCP 서버를 수동으로 추가할 수 있습니다.

{
  "mcpServers": {
    "Figma Dev Mode MCP": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

참고: Dev Mode MCP 서버는 SSE 프로토콜을 통해 통신합니다. 편집기의 SSE 호환 MCP 서버 설정 단계를 따르고 URL http://localhost:3845/sse를 사용하세요.

구성이 완료되면 서버를 새로 고치거나 시작합니다. 연결 성공 및 사용 가능한 도구가 표시될 것입니다. 연결이 실패했거나 도구가 보이지 않으면 Figma 데스크톱 앱에서 서버가 활성화되어 있는지 다시 확인하세요.

3단계: MCP 클라이언트 프롬프트

Dev Mode MCP 서버에는 LLM이 Figma에서 디자인을 번역하는 데 도움이 되는 도구 세트가 있습니다. 연결되면 MCP 클라이언트가 특정 디자인 노드에 액세스하도록 요청할 수 있습니다.

AI 클라이언트에게 Figma 디자인 컨텍스트를 제공하는 방법은 두 가지가 있습니다.

선택 기반

Figma 데스크톱 앱을 사용하여 프레임 또는 레이어를 선택합니다.
클라이언트에 현재 선택한 항목을 구현하도록 도와달라고 요청하세요.

링크 기반

Figma에서 프레임 또는 레이어 링크를 복사합니다.
클라이언트에 현재 선택한 URL에서 디자인을 구현하도록 도와달라고 요청하세요.

참고: 클라이언트는 선택한 URL로 이동할 수 없지만 MCP 서버가 정보를 반환할 개체를 식별하는 데 필요한 노드 ID를 추출할 것입니다.

도구 및 사용 방법 제안

`get_code`

MCP 서버를 사용하여 Figma 선택 영역에 대한 코드를 생성합니다. 기본 출력은 React + Tailwind지만, 프롬프트를 통해 사용자 정의할 수 있습니다.

프레임워크 변경
- "내 Figma 선택 항목을 Vue로 생성해 줘."
- "내 Figma 선택 항목을 일반 HTML + CSS로 생성해 줘."
- "내 Figma 선택 항목을 iOS로 생성해 줘."
나의 컴포넌트 사용
- "src/components/ui 컴포넌트를 사용해서 Figma 선택 항목을 생성해 줘."
- "src/ui의 컴포넌트를 사용해서 내 Figma 선택 항목을 생성하고 Tailwind로 스타일링해 줘."
링크를 붙여 넣거나 Figma에서 프레임 또는 컴포넌트를 선택한 후 프롬프트를 실행할 수 있습니다.

Code Connect를 설정하는 방법을 배워 컴포넌트를 더 효율적으로 재사용하세요 →

`get_variable_defs`

선택 항목에 사용된 변수와 스타일(예: 색상, 간격, 타이포그래피)을 반환합니다.

사용된 토큰 모두 나열
- "내 Figma 선택 항목에서 사용된 변수를 가져와 줘."
특정 유형에 집중
- "내 Figma 선택 항목에 어떤 색상 및 간격 변수가 사용됐어?"
이름과 값 모두 가져오기
- "내 Figma 선택 항목에 사용된 변수 이름과 값을 나열해 줘."

`get_code_connect_map`

Figma 노드 ID와 코드베이스의 해당 코드 컴포넌트 간의 매핑을 검색합니다. 구체적으로, 각 키가 Figma 노드 ID이며, 값에는 다음이 포함된 개체를 반환합니다.

codeConnectSrc: 코드베이스에서 컴포넌트의 위치(예: 파일 경로 또는 URL)
codeConnectName: 코드베이스에 있는 컴포넌트 이름

이 매핑은 Figma 디자인 요소를 React(또는 다른 프레임워크) 구현에 직접 연결하는 데 사용되며, 디자인이 코드로 원활하게 전환되고 디자인의 각 부분에 올바른 컴포넌트가 사용되도록 보장합니다. Figma 노드가 코드 컴포넌트에 연결되어 있으면, 이 기능을 통해 프로젝트에서 정확한 컴포넌트를 식별하고 사용할 수 있습니다.

`get_image`

이 도구를 사용하려면 환경 설정 > Dev Mode MCP 서버 설정 > get_image 도구 활성화로 이동합니다.

선택 항목의 레이아웃을 정확히 보존하기 위한 스크린샷이 찍힙니다. 토큰 한도를 관리할 예정이 아니라면 이 설정을 활성화 상태로 유지하세요.

Dev Mode MCP 서버 설정

환경설정에서 전환할 수 있고 MCP 클라이언트에서 사용할 수 있는 추가 설정입니다.

get_image 도구 활성화

입력 예시 사용: 이미지 추출을 건너뛰고 대신 일반 입력 예시를 추가합니다. 코드에서 수동으로 교체하는 것을 선호하는 경우 유용합니다. 아니면 파일에서 실제 이미지를 가져옵니다.

Code Connect 활성화

가능한 경우 생성된 코드가 연결된 코드베이스의 컴포넌트를 재사용할 수 있도록 응답에 Code Connect 매핑을 포함합니다.

Dev Mode MCP 서버를 사용할 때 Figma 내에서 피드백을 요청하는 팝업이 나타날 수 있습니다. 피드백을 주시려면 이 양식을 사용해 주세요.

MCP 모범 사례

생성된 코드의 품질은 여러 요인에 따라 달라집니다. 일부는 사용자가 통제하고, 일부는 사용하는 도구가 통제합니다. 깨끗하고 일관적인 결과를 얻을 수 있는 몇 가지를 제안합니다.

더 나은 코드를 위한 Figma 파일 구조화

설계 의도에 가장 적합한 맥락을 제공하면 MCP와 AI 어시스턴트가 명확하고 일관적이며 시스템에 맞는 코드를 생성할 수 있습니다.

버튼, 카드, 입력 등 재사용되는 모든 것에 컴포넌트를 사용하세요.
Code Connect를 통해 코드베이스에 컴포넌트를 연결하세요. 코드에서 컴포넌트를 일관적으로 재사용하기 가장 좋은 방법입니다. 그것이 없다면, 모델은 추측하게 됩니다.
간격, 색상, 반경, 타이포그래피에 변수를 사용하세요.
레이어의 이름을 의미에 맞게 지정하세요(예를 들어, Group 5가 아니라 CardContainer).
오토레이아웃을 사용하여 반응형 의도를 전달하세요.

팁: 코드를 생성하기 전에 Figma에서 프레임 크기를 조정하여 예상대로 작동하는지 확인하세요.
주석과 개발 리소스를 활용하여 시각적 요소만으로는 포착하기 어려운 디자인 의도, 예를 들어 동작, 정렬 또는 응답 방식을 전달하세요.

효과적인 프롬프트를 작성하여 AI 안내

MCP는 AI 어시스턴트에게 구조화된 Figma 데이터를 제공하지만, 프롬프트가 결과를 좌우합니다. 프롬프트가 좋으면 다음이 가능합니다.

결과를 본인의 프레임워크나 스타일링 시스템에 맞춰 조정하기
파일 구조와 명명 규칙 따르기
특정 경로에 코드 추가하기(예: src/components/ui)
새 파일을 만드는 대신 기존 파일에 코드를 추가하거나 수정하기
특정 레이아웃 시스템 따르기(예를 들어, grid, flexbox, absolute)

예시:

"이 프레임에서 iOS SwiftUI 코드를 생성해 줘"
"이 레이아웃에 Chakra UI를 사용해"
"src/components/ui 컴포넌트를 사용해"
"이것을 src/components/marketing/PricingCard.tsx에 추가해"
"우리 회사 Stack 레이아웃 컴포넌트를 사용해"

프롬프트를 팀원에게 보내는 간단한 설명이라고 생각하세요. 의도가 명확하면 더 나은 결과가 나옵니다.

필요할 때 특정 도구 트리거

MCP는 다양한 도구를 지원하며, 각 도구는 AI 어시스턴트에게 서로 다른 종류의 구조화된 컨텍스트를 제공합니다. 어시스턴트가 자동으로 올바른 것을 선택하지 못할 때도 있는데, 특히 더 많은 도구가 제공될 때 더욱 그렇습니다. 결과가 잘못되었다면 프롬프트에 명확하게 입력해 보세요.

get_code는 Figma 선택 항목을 구조화된 React + Tailwind 표현으로 제공합니다. AI 어시스턴트는 이것을 기반으로 프롬프트에 따라 어떤 프레임워크나 코드 스타일로도 변환할 수 있습니다.
get_variable_defs는 선택 항목에 사용된 변수와 스타일(색상, 간격, 타이포그래피 등)을 추출하므로 모델이 생성된 코드에서 토큰을 직접 참조하는 데 도움이 됩니다.

예를 들어, 토큰 대신 원시 코드를 받는다면, 다음과 같은 방법을 시도해 보세요.

"이 프레임에 사용된 변수 이름과 값을 가져와"

사용자 지정 규칙 추가

프로젝트 수준의 지침을 설정하여 출력을 일관되게 유지합니다. 새로운 개발자를 위한 온보딩 메모처럼요. 예를 들면 다음과 같습니다.

선호하는 레이아웃 기본 요소
파일 정리
이름 지정 패턴
하드코딩하지 말아야 할 것들

MCP 클라이언트가 지침 파일에 사용하는 형식이 무엇이든 상관없이 제공할 수 있습니다.

예시:

 
---
설명: Figma Dev Mode MCP 규칙
globs:
alwaysApply: true
---
  - Figma Dev Mode MCP 서버는 이미지 및 SVG 에셋을 제공할 수 있는 끝점을 제공합니다.
  - 중요: Figma Dev Mode MCP 서버가 이미지 또는 SVG에 대한 로컬 호스트 소스를 반환하는 경우 해당 이미지 또는 SVG 소스를 직접 사용하세요.
  - 중요: 새로운 아이콘 패키지를 가져오거나 추가하지 마세요. 모든 에셋은 Figma 페이로드에 있어야 합니다.
  - 중요: 로컬 호스트 소스가 제공되는 경우 입력 예시를 사용하거나 생성하지 마세요.

# MCP 서버
## Figma Dev Mode MCP 규칙
  - Figma Dev Mode MCP 서버는 이미지 및 SVG 에셋을 제공할 수 있는 끝점을 제공합니다.
  - 중요: Figma Dev Mode MCP 서버가 이미지 또는 SVG에 대한 로컬 호스트 소스를 반환하는 경우 해당 이미지 또는 SVG 소스를 직접 사용하세요.
  - 중요: 새로운 아이콘 패키지를 가져오거나 추가하지 마세요. 모든 에셋은 Figma 페이로드에 있어야 합니다.
  - 중요: 로컬 호스트 소스가 제공되는 경우 입력 예시를 사용하거나 생성하지 마세요.

- 중요: 가능하면 항상 `/path_to_your_design_system`의 컴포넌트를 사용하세요.
- 디자인과 정확히 일치하도록 Figma의 완성도를 우선시하세요.
- 하드코딩된 값을 피하고, 가능한 경우 Figma의 디자인 토큰을 사용하세요.
- 접근성을 위해 WCAG 요구 사항을 따르세요.
- 컴포넌트 문서를 추가하세요.
- 꼭 필요한 경우가 아니면 인라인 스타일을 피하고 `/path_to_your_design_system`에 UI 컴포넌트를 배치하세요.

이 내용을 한 번 추가하면 반복적인 요청의 필요성을 크게 줄이고, 팀원이나 에이전트가 지속적으로 동일한 규칙을 따르게 할 수 있습니다.

IDE 또는 MCP 클라이언트의 문서를 확인하여 규칙을 구성하는 방법을 알아보고, 실험하면서 팀에 가장 적합한 방법을 찾아 보세요. 지침이 명확하고 일관적이면 재사용 가능한 코드가 향상되어 불필요한 반복 작업이 줄어듭니다.

큰 선택 항목 분해

화면을 더 작은 부분(예: 컴포넌트 또는 논리적 단위)으로 나누면 신뢰할 수 있는 결과를 더 빨리 얻을 수 있습니다.

선택 범위가 크면 도구의 속도가 느려지거나 오류가 발생할 수 있으며, 응답이 불완전해질 수 있습니다. 특히 모델이 처리하기에 컨텍스트가 너무 많을 때 그렇습니다. 대신 다음 방법을 따라 보세요.

더 작은 섹션이나 개별 컴포넌트에 대한 코드를 생성합니다(예: 카드, 헤더, 사이드바).
느리거나 멈춘 것 같다면 선택 크기를 줄입니다.

이렇게 하면 사용자와 모델이 컨텍스트를 관리하기 쉽고 결과를 더 쉽게 예측할 수 있게 됩니다.

출력 결과가 제대로 보이지 않는다면, 보통 Figma 파일의 구조, 프롬프트 작성 방식, 전송되는 컨텍스트 같은 기본 사항을 다시 검토하는 것이 도움이 됩니다. 위의 모범 사례를 따르면 결과가 크게 달라지며, 종종 더 일관적이고 재사용 가능한 코드를 만들 수 있습니다.