도구 활용 팁
Figma MCP 도구를 정확하게 사용하기 위한 링크 복사 방법, Code Connect 설정, Figma 파일 구조화 원칙을 설명한다. 업데이트: 2026-03-10
핵심 요약
| 구분 | 내용 |
|---|---|
| 📖 링크 방법 | 프레임 단위 선택 링크 사용. 파일 전체 링크 대신 node-id 포함 링크 사용 |
| 💡 Code Connect | 설정 후 get_design_context 결과에 실제 코드베이스 컴포넌트가 자동 포함 |
| 🎯 정확도 향상 | Auto Layout 적용 + 컴포넌트 분리 + 레이어 시맨틱 명명이 핵심 |
| ⚠️ 프롬프트 예시 | 도구별 복붙 프롬프트는 2.3.3 프롬프트 실전 예시를 참고한다 |
목차
1. Figma 링크 복사 방법
MCP 도구는 Figma 링크에서 노드 ID를 추출해 특정 프레임을 조회한다.
방법: Figma에서 프레임 또는 컴포넌트 선택
→ 단축키: Cmd/Ctrl + L 또는 우클릭 → "Copy link to selection"
→ 복사된 링크 형식:
https://www.figma.com/file/파일ID/파일명?node-id=노드ID
파일 전체 링크(
?node-id없음)보다 선택 영역 링크를 사용하면 AI가 정확한 프레임만 분석한다.
2. Code Connect 설정
디자인 시스템 컴포넌트와 코드베이스를 연결하면 get_design_context 결과에 실제 컴포넌트 코드가 포함된다. 설정 이후 AI가 새 컴포넌트를 만들지 않고 기존 컴포넌트를 자동으로 재사용한다.
자동 매핑 제안 워크플로우
flowchart TD A[get_code_connect_suggestions 호출] --> B[AI가 Figma 컴포넌트와\n코드베이스 파일 자동 매칭] B --> C[제안 목록 확인] C --> D{승인?} D -->|예| E[send_code_connect_mappings] D -->|수정| F[add_code_connect_map으로\n수동 조정] E --> G[매핑 완료\n이후 get_design_context에 반영] F --> G
수동 매핑 추가
Figma의 Button 컴포넌트(node-id: 123:456)를
src/components/Button.tsx와 매핑해줘
3. 정확도를 높이는 Figma 작업 원칙
코드 생성 품질은 Figma 파일의 구조에 크게 좌우된다.
| 원칙 | 설명 |
|---|---|
| Auto Layout 사용 | 수동 절대 위치 대신 Auto Layout 적용 → Flexbox로 정확 변환 |
| 컴포넌트 분리 | 재사용 요소는 컴포넌트로 분리 → Code Connect 매핑 가능 |
| 레이어 명명 규칙 | button-primary, card-header 등 의미 있는 이름 사용 |
| 변수/스타일 정의 | 색상·간격을 Variables로 정의 → 토큰 자동 추출 가능 |
| Dev Mode 활성화 | 컴포넌트의 Dev Mode 주석 및 스펙 활성화 |
| 섹션별 작업 | 대형 파일은 화면 단위로 나누어 순차 요청 |
문서 탐색
참고 자료
| 출처 | URL | 신뢰도 |
|---|---|---|
| 도구 및 프롬프트 공식 문서 | https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/ | ★★★★★ |
| Code Connect 공식 문서 | https://developers.figma.com/docs/code-connect/ | ★★★★★ |
| Figma MCP GitHub 가이드 | https://github.com/figma/mcp-server-guide | ★★★★★ |