Figma MCP 서버 가이드

Figma MCP 서버는 Figma Design, FigJam, Make 파일에서 코드를 생성하는 AI 에이전트에게 중요한 컨텍스트를 제공하여 개발자가 디자인을 빠르고 정확하게 구현할 수 있도록 도와줍니다. MCP 서버 내 도구는 Figma의 코드가 기존 시스템에만 맞지 않고 디자인에도 적절히 맞도록 Figma에서 업무 흐름으로 추가 컨텍스트를 가져옵니다.

MCP 서버는 AI 에이전트가 모델 컨텍스트 프로토콜을 사용하여 데이터 소스와 상호 작용할 수 있는 표준화된 인터페이스의 일부입니다.

MCP 서버 및 Figma를 업무 흐름에 통합하는 방법에 대한 자세한 내용은 Figma MCP 컬렉션을 참조하세요 →

서버가 활성화되면 다음을 수행할 수 있습니다.

• 선택한 프레임에서 코드 생성

  Figma 프레임을 선택하고 코드로 변환합니다. 새로운 흐름을 만들거나 앱 기능을 반복 작업으로 개선하는 제품 팀에게 적합합니다.

• 디자인 컨텍스트 추출

  변수, 컴포넌트, 레이아웃 데이터를 직접 IDE로 가져옵니다. 디자인 시스템과 컴포넌트 기반 업무 흐름에 특히 유용합니다.

• FigJam 리소스 가져오기

  FigJam 다이어그램의 콘텐츠에 접근하여 코드 생성 업무 흐름에서 사용하세요. 초기 아이디어, 흐름 또는 아키텍처 맵을 직접 개발에 통합하세요.

• Make 리소스 가져오기

  Make 파일에서 코드 리소스를 수집하고 이를 LLM에 컨텍스트로 제공하세요. 이는 프로토타입에서 생산 애플리케이션으로 전환하는 데 도움이 될 수 있습니다.

• Code Connect를 통해 디자인 시스템 컴포넌트를 일관적으로 유지하세요

  실제 컴포넌트를 재사용하여 출력 품질을 향상시킵니다. Code Connect는 생성된 코드와 코드베이스를 일관성 있게 유지합니다.

  Code Connect에 대해 자세히 알아보기 →

MCP 서버 설정

Figma MCP 서버에 연결하는 두 가지 방법은 다음과 같습니다.

• 데스크톱 MCP 서버: Figma 데스크톱 앱을 통해 로컬에서 실행됩니다.
• 원격 MCP 서버: https://mcp.figma.com/mcp에서 Figma의 호스팅된 엔드포인트에 직접 연결됩니다.

데스크톱 MCP 서버 활성화

1. Figma 데스크톱 앱을 열고 최신 버전으로 업데이트했는지 확인합니다.

2. Figma Design 파일을 생성하거나 엽니다.

3. 하단의 도구 모음에서 Dev Mode로 전환하거나 키보드 단축키 Shift⁠D를 사용합니다.

4. 검사 패널의 MCP 서버 섹션에서 데스크톱 MCP 서버 활성화를 클릭합니다.

서버가 실행 중일 때 창 하단에 확인 메시지가 나타납니다.

MCP 서버를 편집기에 연결

Figma MCP 서버를 로컬 또는 원격으로 연결하기 위한 특정 편집기 설명서를 따르세요.

MCP 클라이언트 실행

Figma MCP 서버에는 LLM이 Figma에서 디자인을 번역하는 데 도움이 되는 도구 세트가 있습니다. 연결되면 MCP 클라이언트가 특정 디자인 노드에 액세스하도록 요청할 수 있습니다.

AI 클라이언트에게 Figma 디자인 컨텍스트를 제공하는 방법은 두 가지가 있습니다.

선택 기반(데스크톱 서버 전용)

1. Figma 데스크톱 앱을 사용하여 프레임 또는 레이어를 선택합니다.
2. 클라이언트에 현재 선택한 항목을 구현하도록 도와달라고 요청하세요.

링크 기반

1. Figma에서 프레임 또는 레이어 링크를 복사합니다.
2. 클라이언트에 현재 선택한 URL에서 디자인을 구현하도록 도와달라고 요청하세요.
   

도구 및 사용 방법 제안

Figma MCP 서버에는 AI 도우미가 디자인에 맞춰 코드 생성, 조정, 정렬을 지원하는 여러 도구가 포함되어 있습니다. 각 도구는 코드 생성에서 컴포넌트 매핑 또는 디자인 토큰 검색에 이르기까지 다양한 업무 흐름을 지원합니다. 사용 가능한 도구 및 사용 제안에 대한 자세한 내용은 Figma MCP 서버 개발자 문서를 참조하세요.