Dev Mode MCP 서버 안내서 – Figma Learn - 도움말 센터

🚧 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에서 편집을 선택합니다.

다음 구성을 추가하세요.

"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를 열고 에이전트 모드로 전환합니다.
선택 도구 메뉴를 열고 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의 공식 문서에서 확인하세요.

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

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

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

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

선택 기반

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

링크 기반

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

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

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