Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
Figma MCP 서버는 AI 에이전트가 디자인 파일에 직접 통합되어 작동하도록 돕는 시스템입니다. 이 서버를 통해 에이전트는 캔버스 쓰기, 코드 생성, 디자인 컨텍스트 추출 등 다양한 기능을 수행할 수 있습니다. 이는 제품팀의 워크플로우 효율성을 높이고 디자인을 코드로 변환하는 데 중점을 둡니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 GitHub Trending Python (daily)의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기Figma MCP 서버는 Figma 디자인 파일로부터 코드를 생성하는 AI 에이전트에게 중요한 디자인 정보와 컨텍스트를 제공함으로써, Figma를 사용자의 워크플로우에 직접 통합합니다.
[!NOTE]
데이터 읽기를 수행하는 Figma MCP 서버 도구에는 속도 제한(Rate limits)이 적용됩니다. Figma 파일에 쓰기 작업을 하는 것과 같은 일부 도구는 이 속도 제한에서 면제됩니다.
<br><br>
Starter 플랜 사용자 또는 유료 플랜의 View 또는 Collab 좌석을 사용하는 사용자는 월 최대 6개의 도구 호출(tool calls)으로 제한됩니다.
<br><br>
[Professional, Organization, or Enterprise plans]에서 Dev 또는 Full 좌석을 사용하는 사용자는 분당 속도 제한이 적용되며, 이는 Tier 1 [Figma REST API]와 동일한 제한을 따릅니다. Figma의 REST API와 마찬가지로, Figma는 속도 제한을 변경할 권리를 보유합니다.
완전한 Figma MCP 서버 문서는 개발자 문서(developer documentation)를 참조하십시오. Figma MCP 서버 및 관련 리소스(이러한 스킬 포함)를 사용함으로써, 귀하는 Figma 개발자 약관(Figma Developer Terms)에 동의합니다. 이 기능은 현재 베타 기능으로 제공됩니다.
참고: 저희는 Figma가 AI 에이전트를 지원하는 방식을 빠르게 개선하고 있습니다. 캔버스에 쓰기 기능은 궁극적으로 사용량 기반의 유료 기능이 될 것이지만, 현재 베타 기간 동안에는 무료로 사용할 수 있습니다.
플레이스홀더 이미지 생성(Generate placeholder images): 소스, 캡처 또는 라이브러리 이미지가 사용할 수 없을 때, 에이전트는 허가를 요청하고 Figma AI 크레딧 사용을 공개한 후 generate_image를 사용하여 이미지를 생성할 수 있습니다. 생성된 이미지는 upload_assets를 통해 업로드되어 디자인에 적용됩니다.
선택된 프레임에서 코드 생성(Generate code from selected frames)
Figma 프레임을 선택하여 코드로 변환합니다. 새로운 흐름을 구축하거나 앱 기능을 반복 개선하는 제품팀에게 매우 유용합니다.
디자인 컨텍스트 추출(Extract design context)
변수, 컴포넌트 및 레이아웃 데이터를 IDE로 직접 가져올 수 있습니다. 이는 디자인 시스템과 컴포넌트 기반 워크플로우에 특히 유용합니다.
Code Connect를 사용한 스마트한 코딩(Code smarter with Code Connect)
실제 컴포넌트를 재사용하여 출력 품질을 높일 수 있습니다. Code Connect는 생성된 코드가 기존 코드베이스와 일관되게 유지되도록 합니다.
웹 페이지에서 Figma 디자인 생성(Generate Figma designs from web pages) (출시 예정)
AI 코딩 에이전트를 사용하여 웹 페이지를 캡처, 가져오기 또는 Figma 디자인으로 변환할 수 있습니다.
다양한 MCP 클라이언트는 약간씩 다른 설정이 필요합니다. 특정 클라이언트에 연결하려면 아래 지침을 따르십시오.
⌘ Shift P를 사용하여 MCP:Add Server를 검색합니다.HTTP를 선택합니다.https://mcp.figma.com/mcp를 검색창에 붙여넣은 후 Enter 키를 누릅니다.figma를 입력합니다.mcp.json 파일에서 다음과 같은 구성을 볼 수 있습니다:{
"servers": {
"figma": {
...
⌥⌘B 또는 ⌃⌘I를 사용하여 채팅 도구 모음을 열고 Agent 모드로 전환합니다.#get_design_context를 입력하여 Figma MCP 서버 도구가 사용 가능한지 확인합니다. 도구가 목록에 표시되지 않으면 VS Code를 다시 시작하십시오.[NOTE]
VS Code에서 MCP를 사용하려면 계정에 GitHub Copilot이 활성화되어 있어야 합니다.
더 자세한 내용은 VS Code 공식 문서를 참조하십시오.
Cursor에서 Figma MCP 서버를 설정하는 권장 방법은 Figma 플러그인을 설치하는 것입니다. 이 플러그인에는 일반적인 워크플로우를 위한 MCP 서버 설정과 에이전트 스킬(Agent Skills)이 포함되어 있습니다.
다음 명령어를 Cursor의 에이전트 채팅에 입력하여 플러그인을 설치하십시오:
/add-plugin figma
플러그인이 포함하는 내용:
{
"mcpServers": {
"figma": {
...
더 자세한 내용은 Cursor 공식 문서를 참조하십시오.
</details>Claude Code에서 Figma MCP 서버를 설정하는 권장 방법은 Figma 플러그인을 설치하는 것입니다. 이 플러그인에는 일반적인 워크플로우를 위한 MCP 서버 설정과 에이전트 스킬(Agent Skills)이 포함되어 있습니다.
다음 명령어를 실행하여 Anthropic의 공식 플러그인 마켓플레이스에서 플러그인을 설치하십시오.
claude plugin install figma@claude-plugins-official
Anthropic의 Claude Code 플러그인 및 에이전트 스킬(Agent Skills)에 대해 더 알아보십시오.
<details> <summary>수동 설정</summary>claude mcp add --transport http figma https://mcp.figma.com/mcp
claude mcp list
claude mcp get my-server
claude mcp remove my-server
더 자세한 정보는 Anthropic의 공식 문서를 참조하세요.
Gemini CLI용 Figma 확장 프로그램을 다음 명령어를 실행하여 설치합니다:
gemini extensions install https://github.com/figma/mcp-server-guide
설치 후, gemini를 실행하여 Figma에 인증하고 CLI 내에서 다음 명령을 실행합니다:
/mcp auth figma
확장 프로그램 제거 방법:
gemini extensions uninstall figma
Streamable HTTP를 지원하는 기타 코드 에디터 및 도구도 Figma MCP 서버에 연결할 수 있습니다.
다른 에디터나 도구를 사용하는 경우, 해당 도구가 Streamable HTTP 기반 통신을 지원하는지 확인하기 위해 문서를 확인하세요. 만약 지원한다면, 다음 구성을 사용하여 Figma MCP 서버를 수동으로 추가할 수 있습니다:
{
"mcpServers": {
"figma": {
...
Figma MCP 서버는 LLM이 Figma 디자인을 번역하는 데 도움이 되는 일련의 도구를 제공합니다. 연결되면, 특정 디자인 노드에 액세스하도록 MCP 클라이언트에 프롬프트를 요청할 수 있습니다.
AI 클라이언트에게 Figma 디자인 컨텍스트를 제공하려면:
[!NOTE]
클라이언트는 선택한 URL로 이동할 수 없지만, MCP 서버가 어떤 객체에 대한 정보를 반환해야 하는지 식별하는 데 필요한 노드 ID(node-id)를 추출할 것입니다.
Figma는 개발자 문서에 Figma MCP 서버가 제공하는 도구 목록을 유지합니다.
또한 Figma 도움말 센터에서 [지원되는 에이전트(supported agents)]에 포함된 스킬에 대해 더 많이 배울 수 있습니다(https://help.figma.com/hc/en-us/articles/32132100833559#h_01K25F7RBRZKCATVJHNXCS6KXW). 에이전트에 따라 connector, extension, 또는 power라는 용어도 볼 수 있으며, 이들은 동일한 스킬 세트를 포함합니다.
이 저장소에는 Figma 플러그인에 번들되지 않은 독립형 워크플로우 스킬도 포함되어 있습니다:
workflow-skills/video-interaction-mapper: UI 녹화를 주석이 달린 Figma 스토리보드로 변환합니다.workflow-skills/generate-project-plan: PRD(제품 요구 사항 문서) (선택적 코드베이스 접지 포함)를 FigJam 프로젝트 계획 보드로 변환합니다.생성된 코드의 품질은 여러 요인에 따라 달라집니다. 일부는 사용자가 통제할 수 있고, 일부는 사용하는 도구에 의해 결정됩니다. 깨끗하고 일관된 출력을 위한 몇 가지 제안 사항입니다.
MCP와 AI 어시스턴트가 명확하고 일관되며 시스템과 정렬된 코드를 생성할 수 있도록 최적의 컨텍스트를 제공하세요.
CardContainer, Group 5가 아님).[!팁]
코드를 생성하기 전에 Figma에서 프레임을 크기 조정하여 예상대로 작동하는지 확인하세요.
MCP는 AI 어시스턴트에게 구조화된 Figma 데이터를 제공하지만, 최종 결과물을 결정하는 것은 사용자의 프롬프트입니다. 잘 작성된 프롬프트는 다음을 수행할 수 있습니다:
src/components/ui)에 코드를 추가합니다.예시:
src/components/ui 컴포넌트를 사용해 줘"src/components/marketing/PricingCard.tsx에 이것을 추가해 줘"Stack 레이아웃 컴포넌트를 사용해 줘"프롬프트는 팀원에게 전달하는 브리핑 자료라고 생각하세요. 명확한 의도가 더 나은 결과를 가져옵니다.
MCP는 다양한 도구를 지원하며, 각 도구는 AI 어시스턴트에게 다른 종류의 구조화된 컨텍스트를 제공합니다. 때로는 특히 사용 가능한 도구가 많아질수록 어시스턴트가 올바른 도구를 자동으로 선택하지 못할 수 있습니다. 결과물이 이상하다면 프롬프트에서 명확하게 지시하는 것이 좋습니다.
예를 들어, 토큰 대신 원시 코드를 받고 있다면 다음과 같이 시도해 볼 수 있습니다:
출력의 일관성을 유지하도록 프로젝트 수준의 가이드를 설정하세요. 이는 마치 신규 개발자를 위한 온보딩 노트와 같습니다. 예시로는 다음과 같은 것들이 있습니다:
이 내용은 사용자의 MCP 클라이언트가 지침 파일에 사용하는 어떤 형식으로든 제공할 수 있습니다.
예시:
## Figma MCP 통합 규칙(Figma MCP Integration Rules)
이 규칙들은 Figma 입력을 프로젝트의 코드로 변환하는 방법을 정의하며, 모든 Figma 기반 변경 사항에 따라 준수되어야 합니다.
...
---
description: Figma MCP 서버 규칙
globs:
...
# MCP 서버들(MCP Servers)
## Figma MCP 서버 규칙
...
- 중요: 가능한 경우 항상 `/path_to_your_design_system`의 컴포넌트를 사용하십시오.
- 디자인을 정확하게 일치시키기 위해 Figma 충실도(fidelity)를 우선시하십시오.
- 하드코딩된 값은 피하고, 가능한 경우 Figma에서 설계 토큰(design tokens)을 사용하십시오.
...
이러한 규칙들을 한 번 추가하는 것만으로도 반복적인 프롬프팅의 필요성을 대폭 줄일 수 있으며, 팀원이나 에이전트가 일관되게 동일한 기대치를 따르도록 보장합니다.