개발자를 위한 MCP 추천(7) - Figma MCP 설치 방법

안녕하세요! 갓대희입니다.

오늘은 최근 개발자들도 Design요소, 간단한 퍼블리싱은 퍼블리셔가 없어도 개발해야하는 방향이 되어가고 있는 상황에 이와 관련된 MCP도 알아보면 좋을 것 같아서 그 두번째로 Figma MCP라는것에 대해 아주 간단하게 살펴보려고 한다.

 

2025년 6월 Figma MCP 서버를 베타 출시했었다. 스믈스믈 Figma MCP라는 내용을 접하던 중 2025년 9월 원격 서버 정식 지원 하게 되었다고 한다. 구글 트렌드에서 갑자기 figma mcp가 부상하는것을 보고 한번 간단하게 체험해보기 위해 글을 작성해 보려고 한다.

 

 

Figma란?

Figma는 클라우드 기반의 협업 디자인 도구다. 2016년 출시 이후 UI/UX 디자인 업계의 표준으로 자리잡았는데, 개발자들의 입장에서도 특히 Figma를 선호하는 이유가 있다.

개발자가 Figma를 선택하는 이유

1. 크로스 플랫폼: 웹 브라우저만 있으면 Mac, Windows, Linux, Chromebook 모두에서 실행 가능
2. 실시간 협업: 디자이너-개발자 간 실시간 동시 작업 및 코멘트 가능
3. Dev Mode: 개발자 전용 작업 공간에서 CSS, React 코드 추출 및 디자인 토큰 확인
4. 단일 진실의 원천: 컴포넌트 라이브러리를 통해 디자인 시스템 일관성 유지
5. 버전 관리: Git과 유사한 버전 히스토리 및 브랜치 기능

참고
재밌는 사실: Figma 사용자 구성은 대략 디자이너 1/3, 개발자 1/3, 기타 역할 1/3이라고 한다. 많은 조직에서 디자이너는 Mac을, 개발자는 Windows PC를 쓰는데, 이런 환경에서 Figma의 범용성이 빛을 발한다.
The Power of Figma as a Design Tool - Toptal 참고

 

Figma MCP의 기능 살펴보기

Figma MCP 서버의 가장 큰 장점은 뭘까? AI 도구에게 구조화된 디자인 컨텍스트를 제공한다는 점이다. (디자인-코드 정렬이 가능하다.)

1. 핵심 도구 세가지

1) get_code

Figma 디자인에서 코드를 생성하는 도구이다.
기본적으로 React + Tailwind CSS 코드를 반환하는데, 서버 설정에서 출력 형식을 바꿀 수도 있다.

// AI 도구가 현재 선택된 Figma 요소에서 코드 추출
// 컴포넌트, 변수, 스타일, 간격, 색상 등 구조화된 정보 포함

2) get_image

get_code가 실패했을 때 대체 수단으로 작동한다.
코드 대신 이미지 데이터를 반환하는데, 이 경우 AI가 이미지만 보고 UI를 추측해야 해서 정확도가 떨어진다. (그래서 get_code가 제대로 작동하는 게 중요하다고 보여진다.)

3) get_variable_defs

Figma의 변수 정의(디자인 토큰)를 검색하는 도구다.
색상, 간격, 타이포그래피 등 디자인 시스템의 토큰 값을 코드베이스의 토큰과 비교해서 일관성을 유지할 수 있다.

 

2. Code Connect: 실제 코드와 연결 해보자.

Code Connect는 Figma MCP의 진가를 발휘하게 해주는 Enterprise/Organization 전용 기능이다. 이 기능은 Figma 컴포넌트와 실제 코드베이스를 직접 연결한다.

Code Connect의 작동 방식

• 실제 프로덕션 코드 표시: 자동 생성 코드 대신 실제 사용 중인 컴포넌트 코드 스니펫 제공
• GitHub 직접 연동: 저장소에 직접 연결하여 최신 코드 반영
• MCP 서버 강화: AI 에이전트에게 더 정확한 구현 세부사항 제공
• 다양한 프레임워크 지원: React, React Native, Vue, Angular, Storybook, HTML, SwiftUI, Jetpack Compose

중요: Code Connect와 get_code의 관계
커뮤니티 포럼을 보면 Code Connect 라이선스가 없을 때 get_code 도구가 실패하고 get_image로 넘어가는 경우가 종종 있다고 한다. 이러면 AI가 구조화된 디자인 정보 대신 이미지만 보고 추측해야 해서, 코드 생성 정확도가 확 떨어진다. Organization/Enterprise 플랜 쓰고 있다면 Code Connect 꼭 활성화하자!

참고
Code Connect는 Organization 및 Enterprise 플랜에서 사용할 수 있고, Full 또는 Dev 시트가 필요하다. Pro 플랜에서는 제공할 계획이 없다고 한다.
Code Connect - Figma Help Center 참고

 

3. 두 가지 연결 방식

 - 하기에 별도로 연결 방법은 빼 두었다.

연결 방식	로컬 서버	원격 서버
요구사항	Figma 데스크톱 앱 필요	데스크톱 앱 불필요
엔드포인트	http://127.0.0.1:3845/mcp	https://mcp.figma.com/mcp
인증	앱 실행 시 자동	OAuth 인증 필요
필요 플랜	Dev Mode 포함 플랜	Pro/Org/Enterprise의 Dev/Full 시트
장점	로컬 실행으로 빠른 응답	어디서나 접근 가능, 브라우저 지원

 

4. 2025년 9월 원격 서버 업데이트

2025년 9월 23일, Figma가 MCP 서버의 업데이트를 발표했다. 이 업데이트로 실무 적용 가능성이 많이 올라갔다는데 무엇이 달라졌는지 살펴보자.

주요 개선사항

1) 원격 서버 정식 지원 강화

예전에는 로컬 서버(데스크톱 앱 필수)만 안정적으로 작동했는데, 이제 원격 서버(https://mcp.figma.com/mcp)가 완전히 지원된다.

• 데스크톱 앱 불필요: 브라우저만으로도 IDE, AI 코딩 에이전트, 브라우저 기반 모델에서 Figma에 연결
• 어디서나 접근: 클라우드 환경, 원격 개발 서버에서도 사용 가능
• CI/CD 통합: 자동화 파이프라인에서 Figma 디자인 데이터 활용 가능

 

2) 새로운 IDE 및 플랫폼 파트너

기존의 Claude Code, Cursor, Windsurf, VS Code 외에도 다음 플랫폼이 새로 추가됐다.

• Android Studio: 모바일 앱 개발자를 위한 Jetpack Compose 코드 생성
• Replit: 브라우저 기반 개발 환경에서 Figma 연동
• Warp: 차세대 터미널에서 AI 코딩 지원

 

3) Make Resources 기능 추가

Figma의 Make 파일에서 직접 코드 리소스를 가져와 에이전트 워크플로우의 컨텍스트로 쓸 수 있다. AI가 우리 팀의 실제 구현 패턴을 더 정확하게 학습하고 적용할 수 있게 됐다.

 

4) 파트너 카탈로그 출시

선호하는 IDE나 AI 에이전트를 목록에서 쉽게 찾아 Figma MCP 서버를 통합할 수 있는 공식 카탈로그가 생겼다.

💡 왜 9월 업데이트 시점이 중요한가?
이 업데이트가 Figma MCP를 "실험적 기능"에서 "유용한 도구"로 바꿔놨다고 본다. 데스크톱 앱 의존성이 사라지고 새로운 플랫폼 지원이 추가되면서 접근성이 좋아졌다.

📖 참고
2025년 9월 23일, Figma가 원격 서버 지원, 새로운 IDE 파트너십, Make Resources 기능을 포함한 MCP 서버 주요 업데이트를 공식 발표했다.
Design Context, Everywhere You Build - Figma Blog 참고

 

5. MCP vs 스크린샷 방식 비교

💡 핵심 차이점
스크린샷 방식에서는 AI가 이미지만 보고 디자인을 추측해야 한다. 반면 MCP를 쓰면 AI가 디자인 토큰, 컴포넌트 계층, 간격 값 등 의미론적(semantic) 디자인 정보를 직접 이해한다. 디자인 시스템과 완벽하게 정렬된 코드 생성이 가능하고, LLM의 컨텍스트 윈도우 토큰도 절약할 수 있다. 일석이조!

📖 참고
Figma MCP 서버는 디자인 토큰 인식과 의미론적 정밀도를 제공해서, 디자인과 코드 간의 훨씬 더 나은 정렬을 가능하게 한다.
Design to Code with the Figma MCP Server - Builder.io 참고

 

Figma MCP 설치 및 설정 방법

사전 요구사항

• Figma 플랜: Dev Mode가 포함된 유료 플랜 (Pro/Organization/Enterprise)
• 시트 타입: Dev 시트 또는 Full 시트
• 지원 IDE: Claude Code, VS Code, Cursor, Windsurf 등 MCP를 지원하는 코드 에디터
• 로컬 서버 사용 시: 최신 버전의 Figma 데스크톱 앱

공식 문서 출처
Figma의 공식 서버는 Dev Mode가 포함된 유료 플랜에서만 작동합니다. 2025년 3월 11일부터 Professional 플랜에 별도의 Dev 시트가 도입되었으며, 이 시트는 Dev Mode, FigJam, Figma Slides에 대한 액세스를 포함합니다.
Updates to Figma's pricing - Figma Help Center 참고

 

설치 방법

각 개발 환경에 따라 Figma MCP 서버를 설치하는 방법이 조금씩 다르다. 

전역 vs 프로젝트별 설치

• 전역 설치: 모든 프로젝트에서 Figma MCP 사용 가능. 한 번 설정하면 끝!
• 프로젝트별 설치: 특정 프로젝트에만 MCP 서버 추가. 팀원마다 다른 설정 가능

 

1) Claude Code

CLI를 통한 전역 설치 (상기 내용 요약)

1단계: 설치

 - 가장 간단한 방법은 Claude Code CLI를 사용해 전역으로 설치하는 방법이다.

# 원격 서버 (권장)

claude mcp add --transport http figma https://mcp.figma.com/mcp

# 또는 로컬 서버

claude mcp add --transport http figma-local http://127.0.0.1:3845/mcp

 - ex) 실제 설치 화면

 

2단계: 인증 진행

1. Claude Code에서 /mcp 명령어 입력

2. MCP 서버 목록에서 figma 선택

 

3. Authenticate 선택

 

4. Figma OAuth 페이지에서 Allow Access 클릭

 

5. Claude Code로 돌아와서 "Authentication successful" 메시지 확인

 - 클로드 코드로 돌아오면 다음과 같이 success 되어 있다.

 - 다시 확인 시 정상 connected 확인 가능하다.

 

VS Code (Continue, Cline 등 확장)

VS Code에서는 Continue, Cline 같은 AI 확장 프로그램을 통해 MCP 서버를 연결한다.

Continue 확장 설정

1. VS Code에서 Continue 확장 설치

2. Ctrl/Cmd + Shift + P → MCP: Add Server...

3. HTTP 방식을 선택해서 진행 해보았다. 
 - 선택 후 다음 url 입력 및 엔터 : https://mcp.figma.com/mcp

4. 해당 workspace 에만 설치 해보려고 한다. "Workspace" 클릭. 및 "Trust" 클릭

 5. 채팅 보기 열기 (Windows, Linux: Ctrl+Alt+I, Mac: ⌃⌘I) : 해당 버튼을 누르거나 시작하려고 하면 뜨는 팝업창에서 추가한 MCP Allow 해 주도록 하자. (mcp 별칭을 안지으면 다음과 같이 뜨게 된다.)

 

 6. 하기 내용 대로 계속 진행.

 - 

 - 인증 및 허가 

  - "Visual Studio Code 열기" 클릭.

  - 연동된것을 볼 수 있다.

 

본인의 Figma 계정 설정에서 Connected apps도 관리 가능하다.

 

사용 예시

단계별 실행

1단계: MCP 서버 상태 확인

Claude Code에서 다음 명령어를 실행해보자:

/mcp

기대 결과: figma 또는 figma-local이 목록에 나타나고 🟢 녹색 상태로 떠야 한다.

2단계: 간단한 요청으로 연결 테스트

Figma에서 아무 프레임이나 선택한 후, Claude에게 이렇게 물어보자:

"현재 선택한 Figma 요소의 정보를 가져와줘. 이름, 크기, 색상만 알려줘."

기대 결과: Claude가 MCP 도구를 호출해서 선택한 요소의 정보를 가져온다.

3단계: 도구 호출 확인

Claude의 응답에서 이런 표시가 보이는지 확인해보자:

Used tools: mcp__figma__get_code 또는 mcp__figma__get_image

이 표시가 보이면 MCP가 제대로 작동하고 있는 것이다.

🐛 문제 해결

❌ MCP 서버가 회색/빨간색으로 표시

해결방법:

1. 로컬 서버 사용 시: Figma 데스크톱 앱이 실행 중인지 확인
2. 원격 서버 사용 시: /mcp에서 Authenticate 다시 실행
3. Claude Code 재시작

❌ "get_code failed" 에러

해결방법:

1. Figma에서 요소를 명확하게 선택했는지 확인 (클릭 시 파란색 테두리)
2. 선택한 요소에 주석(annotation)이 있다면 제거
3. 더 작은 영역 선택 (큰 페이지 전체 대신 단일 컴포넌트)

❌ "Authentication required" 메시지

해결방법:

/mcp → figma 선택 → Authenticate 클릭 → 브라우저에서 승인

예제 2: 디자인 토큰 비교 및 동기화

시나리오

Figma 디자인 시스템의 색상 토큰과 코드베이스의 CSS 변수가 일치하는지 확인한다.

// Figma 디자인 토큰 예시

// 색상 토큰
primary-500: #0066cc
primary-600: #0052a3
neutral-100: #f5f9fc
neutral-900: #1a3a52

// 간격 토큰
space-xs: 4px
space-sm: 8px
space-md: 16px
space-lg: 24px
space-xl: 32px

// 타이포그래피 토큰
text-heading-1: 32px / 1.2 / 700
text-heading-2: 24px / 1.3 / 700
text-body: 16px / 1.7 / 400

// AI에게 요청하는 프롬프트 예시

"현재 Figma 파일의 색상 변수를 가져와서
우리 프로젝트의 tokens.css 파일과 비교해줘.
일치하지 않는 토큰이 있으면 알려줘."

예제 3: 대규모 페이지 레이아웃 구현

모범 사례

• 작은 단위로 분할: 전체 페이지를 한 번에 선택하지 말고, 헤더, 사이드바, 콘텐츠 영역 등으로 나눠서 처리
• 컴포넌트 우선: 재사용 가능한 컴포넌트를 먼저 생성한 후 조립
• Auto Layout 활용: Figma에서 Auto Layout을 사용하면 AI가 Flexbox/Grid를 더 정확하게 생성
• 시맨틱 레이어명: "Frame 1" 대신 "NavigationBar", "HeroSection" 같은 의미 있는 이름 사용

⚠️ 주의사항
대규모 영역을 한 번에 선택하면 프로세스가 실패할 수 있다. 커뮤니티 피드백을 보면 작은 영역으로 나눠서 작업하는 게 훨씬 안정적이라고 한다.

 

MCP가 개발자에게 얼마나 유용 할까?

이런 생각이 들 수도 있다: "그냥 스크린샷 찍어서 AI에게 보여줘도 되지 않나?" 맞는 말이다. 근데 MCP는 단순히 코드를 생성하는 것 이상의 가치를 제공한다.

1.  토큰 효율성: 컨텍스트 윈도우의 현실

Claude나 GPT랑 대화할 때 가장 큰 제약이 뭘까? 바로 컨텍스트 윈도우 크기다. 스크린샷 방식과 MCP 방식을 한번 비교해보자.

방식	토큰 소비량	정보 정확도
스크린샷 방식	5,000~10,000 토큰/이미지	🔴 추정치 (색상값, 간격 추측)
MCP 방식	1,000~2,000 토큰/컴포넌트	🟢 정확한 값 (Figma 메타데이터)

💡 실제 예시
5개의 컴포넌트를 구현할 때:

• 스크린샷: 25K~50K 토큰 → Claude 3.5 기준 2~3번의 요청 필요
• MCP: 5K~10K 토큰 → 한 번의 요청으로 완료

2. 디자인 변경 추적: 수동 작업 제거

디자이너가 버튼 색상을 #0066cc에서 #0052a3으로 바꿨다고 치자.

❌ 기존 방식

1. 디자이너가 슬랙에 메시지: "버튼 색상 바뀜"
2. 개발자가 Figma 확인
3. 색상값 복사 (#0052a3)
4. 코드에서 검색/수정
5. PR 생성, 리뷰

⏱️ 소요 시간: 15~30분

✅ MCP 방식

1. IDE에서 Claude에게 요청: "버튼 업데이트"
2. Claude가 Figma에서 최신 정보 가져옴
3. 코드 자동 업데이트
4. 변경사항 확인

⏱️ 소요 시간: 2~3분

생산성 향상: 주 10번의 디자인 변경 시 → 주 2~4시간 절약 → 월 8~16시간 절약

3. 타입 안정성: 런타임 에러 방지

MCP는 Figma의 구조화된 메타데이터를 제공하므로 AI가 더 정확한 타입 정의를 생성할 수 있다.

// MCP가 Figma의 Variant 정보를 기반으로 생성한 타입

interface ButtonProps { variant: 'primary' | 'secondary' | 'ghost'; // Figma에서 정의된 정확한 variant 이름 size: 'sm' | 'md' | 'lg'; // Figma property에서 추출 disabled?: boolean; // Figma boolean property } // TypeScript가 컴파일 타임에 에러 검출 <Button variant="danger" /> // ❌ Error: "danger"는 존재하지 않는 variant <Button variant="primary" /> // ✅ OK

4. 디자인 시스템 일관성: Single Source of Truth

디자인 토큰이 여러 곳에 분산되어 있으면 불일치 문제가 발생한다.

구현 방식	일관성 보장	유지보수성
수동 복사/붙여넣기	🔴 낮음 (값이 점점 달라짐)	🔴 낮음
CSS 변수 파일	🟡 중간 (수동 동기화 필요)	🟡 중간
Figma MCP	🟢 높음 (Figma가 유일한 진실의 원천)	🟢 높음

핵심 원칙
MCP를 사용하면 Figma = 디자인의 유일한 진실의 원천(Single Source of Truth)이 된다. 디자이너가 Figma를 업데이트하면 → AI가 최신 정보를 가져와 → 코드가 자동으로 동기화된다.

 

Figma 파일 준비: 최고의 코드를 얻는 방법 🎯

AI가 정확한 코드를 생성하려면 Figma 파일이 체계적으로 구성되어 있어야 한다.

1. 시맨틱 네이밍 (Semantic Naming)

❌ 나쁜 예	✅ 좋은 예
Frame 1	NavigationBar
Rectangle 34	PrimaryButton
Group 5	UserProfileCard

2. 디자인 토큰 사용 (Variables & Styles)

• 색상: 하드코딩된 HEX 값 대신 변수 사용 (예: primary/500 대신 #0066cc 직접 입력 금지)
• 간격: 숫자 대신 토큰 사용 (예: space-md 대신 16px 직접 입력 금지)
• 타이포그래피: Text Styles 적용 (예: Heading 1 스타일 대신 임의 폰트 크기 금지)

3. Auto Layout 활용

Figma의 Auto Layout은 Flexbox와 거의 동일하게 작동합니다. Auto Layout을 사용하면:

• AI가 display: flex와 gap 속성을 정확하게 생성
• 반응형 디자인이 자동으로 코드에 반영
• 정렬(align-items, justify-content) 설정이 정확하게 변환

4. 컴포넌트 시스템 구축

• Main Components: 재사용 가능한 버튼, 입력 필드, 카드 등을 컴포넌트로 생성
• Variants: 같은 컴포넌트의 다양한 상태(primary, secondary, disabled)를 Variant로 관리
• Properties: Boolean, Text, Instance Swap 등의 속성으로 유연성 확보

공식 문서 출처
시맨틱 레이어 이름과 재사용 가능한 컴포넌트로 Figma 파일을 구조화하면 효과적인 MCP 기반 코드 생성의 기초가 됩니다. 디자인 토큰을 사용하는 것은 필수이며, 하드코딩된 값 대신 간격, 색상, 타이포그래피가 토큰 시스템을 통해 흐르도록 해야 합니다.
Figma MCP: Complete Guide - Seamgen 참고

📌 [실제 테스트 필요]
• 한 번에 처리 가능한 최대 프레임 크기나 복잡도에 대한 공식 가이드라인은 아직 명시되지 않았다.
• 큰 선택 영역에서의 실패는 베타 버전의 불안정성 때문일 수 있으며, 정식 버전에서는 개선될 가능성이 있다.
• 실제 프로젝트에 적용 시 다양한 크기로 테스트해보는 것을 권장한다.

 

자주 묻는 질문 ❓

Q1: Figma MCP는 무료로 사용할 수 있나요?

A: 아니요. Figma MCP 서버를 사용하려면 Dev Mode가 포함된 유료 플랜(Pro, Organization, Enterprise)이 필요합니다. 2025년 3월부터 Professional 플랜에서는 Dev 시트가 별도로 제공되며, 이 시트로도 MCP를 사용할 수 있습니다. 기본적인 디자인 검사 기능은 무료로 사용할 수 있지만, MCP 서버 연결은 유료 기능입니다.

Q2: 어떤 프로그래밍 언어와 프레임워크를 지원하나요?

A: 기본적으로 React + Tailwind CSS 조합을 지원합니다. Code Connect를 사용하는 경우 React, React Native, Vue, Angular, Storybook, HTML (Web Components), SwiftUI, Jetpack Compose를 공식 지원합니다. 서버 설정에서 출력 형식을 변경할 수 있으며, AI 도구의 프롬프트를 통해 다른 프레임워크로의 변환도 요청할 수 있습니다.

Q3: get_code 도구가 작동하지 않을 때 어떻게 해야 하나요?

A: 커뮤니티 포럼에서 보고된 일반적인 원인은 다음과 같습니다:

• 주석(annotations) 포함: 선택한 요소에 주석이 있으면 get_code가 실패할 수 있습니다. 주석을 제거하면 해결됩니다.
• Code Connect 라이선스 부족: Organization/Enterprise 플랜의 Code Connect 기능이 없으면 get_code가 실패하고 get_image로 폴백됩니다.
• 너무 큰 선택 영역: 작은 영역으로 나눠서 시도해보세요.
• 인증 만료: IDE에서 MCP 서버를 껐다가 다시 켜거나, 인증을 다시 진행해보세요.

Q4: Figma 브라우저 버전에서도 MCP를 사용할 수 있나요?

A: 로컬 서버 모드는 Figma 데스크톱 앱이 필요하므로 브라우저에서는 작동하지 않습니다. 하지만 원격 서버(https://mcp.figma.com/mcp)를 사용하면 데스크톱 앱 없이도 브라우저 기반 모델에서 Figma에 연결할 수 있습니다. 단, IDE에서 MCP를 설정해야 하므로 IDE 자체는 여전히 필요합니다.

Q5: 생성된 코드를 그대로 프로덕션에 사용할 수 있나요?

A: 생성된 코드는 훌륭한 출발점이지만, 프로덕션 사용 전에 다음을 확인해야 합니다:

• 접근성(Accessibility): ARIA 속성, 키보드 네비게이션, 스크린 리더 지원 확인
• 반응형 디자인: 다양한 화면 크기에서 테스트
• 성능: 불필요한 리렌더링, 큰 번들 크기 등 최적화
• 에러 핸들링: 예외 상황 처리 로직 추가
• 비즈니스 로직: API 연동, 상태 관리 등 추가

현재 MCP의 한계는 "단방향 워크플로우"라는 점입니다. AI는 자신이 생성한 코드의 최종 렌더링 결과를 볼 수 없으므로, 인간 개발자의 검증이 필수입니다.

Q6: MCP 서버의 성능과 안정성은 어떤가요?

A: 현재 Figma MCP 서버는 오픈 베타 단계입니다. 공식 문서에 따르면 일부 기능과 설정이 아직 사용 불가능하며, 버그나 성능 문제가 발생할 수 있습니다. 커뮤니티에서는 연결 끊김, 타임아웃, 500 에러 등의 불안정성이 보고되고 있습니다. 정식 출시 시 사용 가이드라인과 속도 제한(rate limits)이 발표될 예정입니다. 프로덕션 환경에 적용 전 충분한 테스트를 권장합니다.

Q7: Claude Code 외에 다른 IDE도 지원하나요?

A: 네, MCP는 표준 프로토콜이므로 MCP를 지원하는 모든 IDE에서 사용할 수 있습니다. 공식적으로 확인된 지원 IDE는 다음과 같습니다:

• Claude Code: Anthropic의 공식 CLI 도구
• Cursor: AI 페어 프로그래밍 에디터
• Windsurf: AI 통합 개발 환경
• VS Code: GitHub Copilot과 함께 사용

각 IDE마다 설정 방법이 약간 다르므로, 사용 중인 IDE의 MCP 설정 문서를 참고하세요.

Q8: Figma MCP와 Figma 플러그인의 차이는 무엇인가요?

A: Figma 플러그인은 Figma 내에서 실행되는 확장 기능이지만, Figma MCP는 외부 AI 코딩 도구가 Figma의 디자인 데이터에 액세스할 수 있게 하는 서버입니다. MCP는 IDE 내에서 AI와 대화하면서 Figma 데이터를 실시간으로 가져와 코드를 생성하는 방식으로, 개발자의 워크플로우에서 벗어나지 않고 작업할 수 있다는 점이 큰 차이입니다.

Q9: Code Connect가 없어도 Figma MCP를 효과적으로 사용할 수 있나요?

A: 네, Code Connect 없이도 Figma MCP의 기본 기능을 사용할 수 있습니다. Pro 플랜에서도 get_code와 get_variable_defs 도구가 작동합니다. 다만 Code Connect가 있으면 실제 프로덕션 코드 스니펫을 참조하므로 더 정확한 코드가 생성되며, 팀의 실제 구현 패턴과 일치하는 코드를 얻을 수 있습니다. Pro 플랜 사용자는 Figma의 자동 생성 코드를 받게 되며, 이것도 충분히 유용합니다.

마치며

Figma MCP는 주변 지인들의 추천으로 간단하게 알아보았는데, 실제로 난 주로 사용하지 않다보니 간단한 내용들만 살펴 보았다.

그래서 글을 작성하다 지워버릴까도 생각했는데, 조만간 실제 사용하는 사람과 몇가지 실습을 하여 내용을 갱신 할 수 있도록 해봐야 겠다. 

 

다만, 스크린샷 기반의 추측성 코드 생성에서 벗어나, AI가 디자인 시스템을 의미론적으로 이해하고 정확한 코드를 생성하는 시대이니 이젠 간단한 작업? 프로젝트? 개발건? 들은 이런 툴을 활용하여 개발자들이 직접 진행하게 될 것 같아 눈여겨 보고자 간단하게 내용을 작성 하여 둔다. 

참고 자료

• What is Model Context Protocol (MCP)? - Figma 공식 가이드
• Introducing our MCP server - Figma 공식 블로그
• Figma MCP Server Developer Documentation
• Guide to the Figma MCP server - Figma Help Center
• GitHub - Figma MCP Server Guide (공식 저장소)
• Code Connect - Figma Help Center
• Updates to Figma's pricing, seats, and billing - Figma Help Center
• Known issues with MCP clients - Developer Docs