Search

Figma MCP Server μ„€μΉ˜

01. μ„€μΉ˜ β€” 곡식 Figma MCP Server

κ°œμš”

Figmaκ°€ 곡식 μ œκ³΅ν•˜λŠ” Figma MCP Serverμž…λ‹ˆλ‹€. Figma Desktop App에 λ‚΄μž₯λ˜μ–΄ 있으며, MCP(Model Context Protocol) ν‘œμ€€μ„ 톡해 AI μ—μ΄μ „νŠΈ(Copilot, Claude Desktop, Cursor λ“±)κ°€ Figma νŒŒμΌμ— 직접 μ ‘κ·Όν•  수 있게 ν•©λ‹ˆλ‹€.

사전 μš”κ΅¬μ‚¬ν•­

β€’
Figma Desktop App (μ›Ή 버전 λΆˆκ°€)
β€’
Figma 유료 ν”Œλžœ (Dev/Full Seat β€” Professional 이상)
β€’
MCP 지원 ν΄λΌμ΄μ–ΈνŠΈ
β—¦
VS Code + GitHub Copilot
β—¦
Claude Desktop
β—¦
Cursor
β—¦
기타 MCP ν˜Έν™˜ 도ꡬ

μ„€μΉ˜ 절차

1) Figma Desktop Appμ—μ„œ MCP Server ν™œμ„±ν™”

1.
Figma Desktop App μ‹€ν–‰
2.
쒌츑 상단 메뉴 β†’ Preferences
3.
"Enable Dev Mode MCP Server" ν† κΈ€ ON
4.
ν™œμ„±ν™” μ‹œ λ‘œμ»¬μ—μ„œ MCP μ„œλ²„κ°€ 기동됨
β€’
κΈ°λ³Έ μ—”λ“œν¬μΈνŠΈ: http://127.0.0.1:3845/sse

2) VS Code (Copilot)에 등둝

λͺ…λ Ή νŒ”λ ˆνŠΈ(Ctrl+Shift+P):
1.
>MCP: Add Server
2.
HTTP 선택
3.
URL μž…λ ₯: http://127.0.0.1:3845/sse
4.
μ„œλ²„ 이름: figma
5.
μ €μž₯ β†’ MCP μ„œλ²„ μ‹œμž‘
λ˜λŠ” settings.json에 직접:
{ "mcp": { "servers": { "figma": { "type": "sse", "url": "<http://127.0.0.1:3845/sse>" } } } }
JSON
볡사

3) Claude Desktop에 등둝

claude_desktop_config.json:
{ "mcpServers": { "figma": { "url": "<http://127.0.0.1:3845/sse>", "transport": "sse" } } }
JSON
볡사

λ™μž‘ 확인

β€’
AI μ±„νŒ…μ°½μ—μ„œ "ν˜„μž¬ μ„ νƒλœ Figma ν”„λ ˆμž„ 정보 μ•Œλ €μ€˜" μž…λ ₯
β€’
MCP 도ꡬ λͺ©λ‘μ— get_selection, get_code, get_image 등이 보이면 정상

νŠΈλŸ¬λΈ”μŠˆνŒ…

증상
원인 / ν•΄κ²°
μ—°κ²° μ•ˆ 됨
Desktop App λ―Έμ‹€ν–‰ / Preferences ν† κΈ€ OFF
localhost κ±°λΆ€
λ°©ν™”λ²½ β†’ 3845 포트 ν—ˆμš©
응닡 μ—†μŒ
Desktop App μž¬μ‹œμž‘, MCP Server μž¬ν† κΈ€
κΆŒν•œ 였λ₯˜
유료 ν”Œλžœ(Dev Seat) ν•„μš”

λ‹€μŒ 단계

β€’
02.ν”„λ‘œμ„ΈμŠ€.md β€” Figma λ””μžμΈμ΄ μ–΄λ–»κ²Œ μ½”λ“œλ‘œ λ³€ν™˜λ˜λŠ”μ§€μ˜ 흐름
β€’
03.μƒ˜ν”Œ.md β€” μ‹€μ œ 호좜 μ˜ˆμ‹œ
β€’
04.μ‹€μŠ΅.md β€” 단계별 μ‹€μŠ΅