Figma MCP는 디자인 파일의 구조와 맥락을 코딩 에이전트가 읽고 활용하게 만드는 연결 통로입니다.
화면 캡처만 보고 비슷하게 만드는 대신 프레임의 레이아웃, 컴포넌트, 변수와 에셋 정보를 전달할 수 있습니다. 원격 서버에서는 지원되는 클라이언트를 통해 새 파일 생성, 캔버스 편집과 에셋 작업까지 확장할 수 있습니다.
이번 글에서는 원격·데스크톱 서버의 차이, Codex·Claude Code·VS Code 연결, 선택 링크로 구현을 요청하는 방법, 핵심 Tool과 Code Connect·Skills의 역할을 2026년 9월 Figma 공식 문서 기준으로 설명합니다.
1. Figma MCP는 무엇을 연결하나?
Figma MCP Server는 Figma 파일의 디자인 컨텍스트를 표준화된 Tool 형태로 제공합니다. Codex, Claude Code, Cursor 같은 MCP Client는 사용자의 요청에 맞는 Tool을 호출하고, 그 결과를 현재 코드베이스의 언어와 컴포넌트 규칙에 맞춰 구현합니다.
Figma MCP가 반환하는 코드는 기본적으로 React와 Tailwind CSS에 가까운 형태일 수 있지만, 서버가 특정 프레임워크만 지원한다는 뜻은 아닙니다. 프롬프트에서 기술 스택을 명시하면 에이전트가 받은 컨텍스트를 그 환경에 맞게 번역합니다.
에이전트가 만든 결과에는 반응형 동작, 접근성, 상태 처리와 프로젝트 규칙이 빠질 수 있습니다. 구현 후 브라우저 또는 앱에서 시각·기능 테스트를 진행하고 코드 리뷰를 거치세요.
2. 원격 서버와 데스크톱 서버 비교하기
Figma는 원격 MCP Server와 Figma 데스크톱 앱이 실행하는 로컬 Server를 제공합니다. 공식 안내는 더 넓은 기능을 제공하는 원격 서버를 기본 선택으로 권장합니다.
| 구분 | 원격 MCP Server | 데스크톱 MCP Server |
|---|---|---|
| 주소 | https://mcp.figma.com/mcp |
http://127.0.0.1:3845/mcp |
| 사용 방식 | 프레임·레이어 링크를 프롬프트에 전달 | Figma 데스크톱 앱의 현재 선택 영역 또는 링크 사용 |
| 접근 조건 | 모든 Seat와 Plan에서 사용 가능 | 유료 Plan의 Dev 또는 Full Seat 필요 |
| 특징 | OAuth 인증, 가장 넓은 기능, 일부 클라이언트에서 캔버스 쓰기 지원 | 로컬 앱과 Dev Mode가 켜져 있어야 하며 조직 환경의 로컬 워크플로에 적합 |
기능과 Seat 정책은 변경될 수 있습니다. 특히 기존 Figma 파일을 수정하는 쓰기 작업은 현재 Full Seat와 해당 파일 편집 권한이 필요하며, 읽기 중심의 디자인 구현에는 Dev Seat도 사용할 수 있습니다. 연결 전에 계정의 Seat, 파일 권한과 조직 정책을 확인하세요.
3. 원격 Figma MCP 연결하기
원격 서버는 설치할 로컬 프로세스가 없고, 공식 URL을 등록한 뒤 브라우저에서 Figma 계정을 인증합니다. 아래 예시는 각 클라이언트의 공식 설치 안내에 나온 기본 연결 방식입니다.
Codex에서 연결
Claude Code에서 연결
VS Code에서 연결
Cursor, Claude Code, Codex 등 일부 클라이언트에는 Figma 공식 플러그인 또는 간편 설치 흐름이 있습니다. 플러그인은 서버 설정과 디자인 구현용 Skills를 함께 제공할 수 있어 수동 등록보다 시작이 간단합니다.
4. 데스크톱 Figma MCP 켜기
데스크톱 서버는 Figma 데스크톱 앱 안에서 활성화합니다. 현재 선택한 프레임을 링크 없이 바로 참조하는 워크플로가 필요할 때 편리합니다.
http://127.0.0.1:3845/mcp를 HTTP Server로 추가합니다.Claude Code에서는 다음과 같이 등록할 수 있습니다.
데스크톱 앱, 대상 파일과 MCP Server가 계속 열려 있어야 합니다. 연결이 끊기면 앱 실행 상태, Dev Mode, 서버 토글과 클라이언트 설정의 URL을 차례로 확인하세요. 외부 네트워크에서 이 주소로 접속하는 방식이 아닙니다.
5. 선택한 프레임으로 첫 구현 요청하기
원격 서버에서는 구현할 프레임이나 레이어의 링크가 입력의 기준입니다. Figma에서 대상 프레임을 선택하고 Copy link to selection으로 링크를 복사한 뒤 프롬프트에 붙여 넣습니다.
링크 안의 node-id로 대상 노드를 식별할 수 있습니다. 데스크톱 서버에서는 파일에서 프레임을 선택한 뒤 “현재 선택한 프레임을 구현해줘”처럼 요청할 수도 있습니다. 선택 기반 요청은 데스크톱 서버에서만 동작하므로 원격 서버에는 링크를 포함하세요.
6. 핵심 Tool을 올바른 순서로 사용하기
에이전트가 Tool을 자동 선택할 수 있지만, 큰 프레임이나 모호한 요청에서는 원하는 Tool 이름을 직접 지정하면 흐름을 제어하기 쉽습니다. 디자인 구현의 기본 순서는 다음과 같습니다.
| Tool | 언제 쓰나? | 요청 예시 |
|---|---|---|
get_metadata |
파일이나 프레임이 너무 커서 먼저 노드 구조와 ID를 좁힐 때 | “이 페이지의 구조부터 확인해줘.” |
get_design_context |
선택한 화면의 레이아웃, 스타일, 컴포넌트와 에셋 맥락이 필요할 때 | “이 프레임의 디자인 컨텍스트를 가져와 구현해줘.” |
get_variable_defs |
색상, 간격 등 사용된 변수의 이름과 값을 확인할 때 | “이 프레임에 사용된 변수 이름과 값을 조회해줘.” |
get_screenshot |
원본의 시각적 상태를 보고 구현 결과와 비교할 때 | “스크린샷을 가져와 렌더링과 비교해줘.” |
get_code_connect_map |
Figma 컴포넌트와 코드 컴포넌트의 연결 정보를 확인할 때 | “이 컴포넌트의 Code Connect 매핑을 확인해줘.” |
원격 서버에는 지원되는 클라이언트와 권한에 따라 create_new_file, use_figma, generate_diagram, upload_assets, download_assets 같은 쓰기·에셋 Tool도 제공될 수 있습니다. 현재 연결에서 보이는 Tool과 실제 권한을 먼저 확인하세요.
먼저
get_metadata로 구조를 확인하고 필요한 하위 프레임만 get_design_context로 가져옵니다. 헤더, 본문, 카드 목록처럼 구역을 나눠 구현하면 컨텍스트 초과와 잘못된 추론을 줄일 수 있습니다.7. Code Connect와 Figma Skills 활용하기
Code Connect는 Figma 컴포넌트를 실제 코드베이스의 컴포넌트와 연결합니다. 에이전트가 모양이 비슷한 새 컴포넌트를 만드는 대신 팀의 기존 Button, Card, Input과 사용 예시를 찾는 데 도움을 줍니다.
Skills는 MCP에 새 기능을 추가하는 Server가 아니라, 이미 제공되는 Tool을 일관된 순서로 사용하도록 돕는 지침 묶음입니다. 예를 들어 디자인 구현 Skill은 디자인 컨텍스트와 스크린샷 확인, 코드베이스 규칙 적용과 시각 검증을 단계화할 수 있습니다.
공식 문서 기준으로 Code Connect 설정에는 게시된 팀 라이브러리 컴포넌트와 지원되는 조직 요금제가 필요할 수 있습니다. 팀의 플랜, Seat, 라이브러리 권한과 현재 지원 클라이언트를 최신 문서에서 확인하세요.
8. 연결·구현 오류와 보안 점검
| 증상 | 가능한 원인 | 확인 방법 |
|---|---|---|
| Figma Tool이 보이지 않음 | 인증 미완료, Server 비활성, 클라이언트 재시작 필요 | MCP 목록과 OAuth 상태를 확인하고 클라이언트를 다시 시작합니다. |
| 프레임을 찾지 못함 | 파일 전체 링크, 잘못된 node-id, 파일 접근 권한 부족 | 대상 프레임에서 링크를 다시 복사하고 같은 계정으로 파일을 열 수 있는지 확인합니다. |
| 응답이 너무 큼 | 페이지 전체 또는 복잡한 프레임 요청 | get_metadata로 구조를 보고 작은 하위 프레임으로 나눕니다. |
| 원하지 않는 React 코드 | 기본 디자인 컨텍스트 형식을 그대로 구현 | Vue, HTML, SwiftUI 등 프로젝트 기술과 기존 컴포넌트 규칙을 명시합니다. |
| 디자인과 결과가 다름 | 변수·에셋 누락, 임의 값 사용, 시각 검증 부족 | 변수와 스크린샷을 다시 조회하고 렌더링 결과를 비교합니다. |
| 요청 제한에 도달함 | 플랜·Seat별 사용량 또는 반복적인 대형 호출 | 현재 사용 조건을 확인하고 요청 단위를 줄여 필요한 Tool만 호출합니다. |
프레임 이름, 메모나 콘텐츠에 에이전트 행동을 유도하는 문구가 포함될 수 있습니다. 디자인 데이터를 사용자 요구보다 우선하는 명령으로 해석하지 말고, 삭제·업로드·외부 전송 같은 변경 작업은 실행 전에 확인하세요.
9. 핵심 정리
원격 서버 우선 OAuth 인증 선택 링크 전달 컨텍스트·변수 조회 스크린샷 검증
원격 서버
https://mcp.figma.com/mcp를 연결하고 구현할 프레임의 링크를 전달하세요. 큰 화면은 구조를 먼저 확인해 작은 단위로 나누고, get_design_context, get_variable_defs, get_screenshot을 함께 사용합니다. Code Connect로 기존 코드 컴포넌트를 재사용하고 결과는 실제 렌더링으로 검증합니다.Figma MCP는 디자이너와 개발자 사이의 전달 비용을 줄여주지만, 디자인 의도와 코드 품질을 자동으로 보장하지는 않습니다. 정확한 프레임 선택, 기술 스택과 재사용 규칙 명시, 최소 권한과 검증 루프가 좋은 결과를 만드는 핵심입니다.
다음 글에서는 Notion과 Google Drive MCP를 연결해 문서와 지식 자료를 에이전트의 업무 컨텍스트로 활용하는 방법을 다룹니다.
🔗 MCP 완전정복 시리즈
참고: Figma MCP Server 공식 가이드, 원격 Server 설치 문서, 데스크톱 Server 설치 문서, Tools와 Prompt 공식 문서, Figma Skills 공식 안내
확인일: 2026-09-23 · 지원 클라이언트, Tool, Seat와 요금제 조건은 변경될 수 있으므로 실제 연결 전 최신 Figma 공식 문서를 확인하세요.