Figma Console MCP 무료 설치 — AI로 디자인 생성·수정하는 63가지 도구
Figma 공식 MCP는 읽기 전용 13개 도구에 무료 월 6회 제한. Figma Console MCP는 63개 도구로 디자인 생성·수정까지 무제한 무료입니다. Claude Code에서 한 줄이면 설치 완료.
• 내 Claude Code·Codex·Gemini CLI를 한 앱에서 관리한다 — CC Switch, 깃허브 스타 3만 1천
• 이름을 숨기고 AI 사용량 1위를 찍은 모델의 정체는 스마트폰 회사 Xiaomi였습니다
• 내 워드프레스에 ChatGPT를 연결했더니 '랜딩 페이지 만들어줘' 한마디로 사이트가 완성됐다
Figma Console MCP는 AI 코딩 도구와 Figma를 연결해 디자인을 자동으로 생성·수정하는 무료 오픈소스 MCP 서버입니다. Claude Code나 Cursor 같은 AI 코딩 도구에게 "로그인 폼 만들어줘"라고 말하면, 내 Figma 캔버스에 진짜 버튼·입력칸·레이아웃이 생깁니다. 깃허브 스타 1,200개를 돌파했으며, Figma가 공식으로 제공하는 MCP보다 도구 수가 4배 이상 많고, 디자인을 읽기만 하는 게 아니라 직접 만들고 수정까지 할 수 있습니다.
Figma 공식 MCP vs Console MCP — 핵심 차이점
Figma는 이미 공식 MCP를 제공하고 있습니다. 하지만 차이가 큽니다.
Figma 공식 MCP
• 도구 13개 — 디자인을 읽기만 가능
• 무료 티어에서 월 6회만 호출 가능
• 디자인 생성·수정 불가 — 웹 페이지 캡처 가져오기만 지원
Figma Console MCP (오픈소스)
• 도구 63개 이상 — 읽기 + 쓰기 + 디버깅 + 실시간 모니터링
• 완전 무료, 호출 횟수 제한 없음 (MIT 라이선스)
• AI가 Figma 플러그인이 할 수 있는 모든 것을 대신 수행
가장 큰 차이는 방향입니다. 공식 MCP는 Figma에서 코드로 가는 한 방향만 지원하지만, Figma Console MCP는 코드에서 Figma로도 작업이 흘러갑니다. AI에게 "버튼 컴포넌트를 4가지 타입, 3가지 크기, 5가지 상태로 만들어줘"라고 하면 디자인 시스템에 맞게 Figma에 직접 생성됩니다.
Figma Console MCP로 할 수 있는 AI 디자인 작업
디자이너나 개발자가 AI에게 말로 시킬 수 있는 작업의 구체적 예시입니다.
디자인 시스템 추출
"내 Figma 파일에서 디자인 변수를 모두 가져와서 CSS 커스텀 속성으로 변환해줘"
컴포넌트 구현
"Tooltip 컴포넌트를 가져와서 React로 구현하는 코드를 작성해줘"
디자인 직접 생성
"이메일, 비밀번호 입력칸과 제출 버튼이 있는 로그인 폼을 만들어줘"
디자인 토큰 관리
"브랜드 기본 색상을 #006699로 변경하고 라이트/다크 모드 전부 적용해줘"
그 밖에도 플러그인 디버깅(콘솔 로그와 에러를 실시간으로 추적), 디자인 스크린샷 촬영, 컴포넌트 비교("이 세 가지 버튼 변형의 차이점을 보여줘") 등이 가능합니다.
MCP 앱 — AI 답변 안에 인터랙티브 UI가 뜬다
Figma Console MCP만의 독특한 기능이 있습니다. MCP 앱이라고 불리는 인터랙티브 UI 패널이 AI 대화 안에 직접 표시됩니다.
• 토큰 브라우저 — 디자인 토큰(색상, 폰트 크기 같은 디자인 규칙을 숫자로 정리한 것)을 검색하고, 클릭하면 바로 복사됩니다
• 디자인 시스템 대시보드 — 내 디자인 시스템의 건강 상태를 100점 만점으로 채점합니다. 이름 규칙(25%), 토큰 구조(20%), 접근성(10%) 등 6가지 기준으로 평가하고 개선 방법까지 알려줍니다
일반 AI 답변은 텍스트로만 오지만, MCP 앱은 필터·검색·클릭 기능이 있는 진짜 화면이 AI 대화창 안에 나타납니다.
Figma Console MCP 설치 방법 — Claude Code 한 줄 설정
4가지 연결 방법 중 상황에 맞는 것을 고르면 됩니다. MCP가 처음이라면 MCP 개념과 설정법 학습 가이드를 먼저 읽어보세요.
Claude Code에서 바로 설치 (추천)
터미널에 아래 한 줄만 입력하면 됩니다.
claude mcp add figma-console -s user \
-e FIGMA_ACCESS_TOKEN=figd_여기에_토큰_입력 \
-- npx figma-console-mcp@latest
Figma 토큰은 Figma 설정 → Personal access tokens에서 발급받을 수 있습니다. Node.js 18 이상이 필요합니다. Claude Code가 처음이라면 Claude Code 핵심 기능 가이드에서 기본 사용법을 확인할 수 있습니다.
코딩 없이 웹에서 연결하기 (Cloud Mode)
Claude.ai, v0, Lovable, Replit 같은 웹 기반 AI 도구를 쓰는 경우, Node.js 설치 없이 5분 만에 연결할 수 있습니다. Figma Desktop Bridge 플러그인을 설치하고 6자리 코드로 페어링하면 끝입니다. 이 방법으로도 43가지 도구를 쓸 수 있고, 디자인 생성·수정도 가능합니다.
빠르게 구경만 하고 싶다면 (Remote SSE)
설정 2분이면 22가지 도구로 읽기 전용 탐색이 가능합니다. 인증 설정도 필요 없어서, 이 도구가 어떤 것인지 체험해보기에 좋습니다.
AI 디자인 자동화가 디자이너에게 주는 의미
지금까지 AI 코딩 도구의 혁신은 대부분 개발자에게 집중됐습니다. Figma Console MCP는 디자이너도 AI 자동화의 혜택을 받을 수 있게 해줍니다.
예를 들어, 디자인 시스템을 처음 구축할 때 색상·타이포그래피·간격 변수를 하나씩 손으로 만드는 대신, AI에게 "Material Design 3 기준으로 기본 디자인 토큰 세트를 만들어줘"라고 시키면 됩니다. 한 번에 100개까지 변수를 일괄 생성할 수 있습니다.
개발자와 협업할 때도 유용합니다. 개발자가 AI 코딩 도구에 Figma Console MCP를 연결하면, Figma 파일에서 컴포넌트 스펙을 직접 읽어서 코드로 구현할 수 있습니다. "Figma에서 버튼 컴포넌트 가져와서 React로 만들어줘"가 실제로 작동합니다.
무료이고 오픈소스인 점도 중요합니다. Figma 공식 MCP의 무료 티어는 월 6회 호출로 제한되어 있어서 실무에서 쓰기 어렵지만, Figma Console MCP는 횟수 제한이 없습니다.
관련 콘텐츠 — Easy클코로 AI 시작하기 | 무료 학습 가이드 | AI 뉴스 더보기