figma/mcp-server-guide

Figma MCP 서버 가이드 – 무엇인가요

이 리포지토리는 Figma의 Model-Context-Protocol (MCP) 서버의 문서와 설정 지침을 포함합니다. MCP 서버는 AI 기반 코딩 어시스턴트(예: GitHub Copilot, Cursor, Claude Code, Gemini CLI)가 Figma 파일에서 디자인 데이터를 읽고, 일부 경우에 캔버스에 쓰는 것을 허용하는 가벼운 HTTP 서비스입니다. 디자인 전용 도구(예: get_design_context, generate_image, upload_assets 등)를 노출함으로써 LLM은 선택한 Figma 프레임을 구조화된 데이터로 변환하여 실용적인 코드로 전환할 수 있습니다.

핵심 기능

디자인 컨텍스트 읽기 – 선택한 노드에서 컴포넌트, 변수, 자동 레이아웃 정보, React + Tailwind 표현을 가져옵니다.
캔버스에 쓰기 – (베타) AI 클라이언트에서 프레임, 컴포넌트, 변수, 자동 레이아웃을 직접 생성하거나 수정합니다.
플레이스홀더 자산 생성 – 즉시 생성된 이미지를 파일에 업로드합니다.
코드 생성 – 선택한 프레임을 코드로 변환하며, Code Connect를 사용해 생성된 코드를 기존 컴포넌트와 동기화할 수 있습니다.
미래 기능 – 웹 페이지를 Figma 디자인으로 변환합니다.

누구에게 적합한가요?

AI 어시스턴트를 활용해 디자인과 코드를 연결하고 싶은 개발자들입니다. 가이드에서는 VS Code, Cursor, Claude Code, Gemini CLI 등 인기 에디터에서 서버에 연결하는 방법과, 디자인 데이터를 가져오거나 코드를 생성하거나 Figma 파일을 업데이트하도록 어시스턴트를 프롬프트하는 방법을 설명합니다.

레이트 제한 및 요금

스타터 / 보기 / 협업 시트: 월 6회 이내 도구 호출.
프로페셔널, 조직, 엔터프라이즈 플랜의 Dev / Full 시트: Figma의 Tier 1 REST API와 일치하는 분 단위 제한.
캔버스 쓰기는 베타 기간 동안 무료이지만, 향후 사용량 기반 유료 기능이 될 예정입니다.

지원 리소스

완전한 개발자 문서: https://developers.figma.com/docs/figma-mcp-server/
생성된 코드를 코드베이스와 동기화하는 데 사용할 수 있는 Code Connect 문서.
비디오에서 스토리보드로 변환하거나 PRD에서 FigJam 프로젝트 계획을 생성하는 워크플로우 스킬 하위 폴더.

TL;DR

이 리포지토리는 코드 라이브러리가 아닙니다. AI 에이전트가 Figma 프레임에서 디자인 데이터를 읽고 쓰며 코드를 생성할 수 있도록 설정하는 단계별 가이드입니다. 디자인에서 코드로의 워크플로우를 간소화하기 위한 진정한 AI 어시스턴트 통합 프로젝트입니다.