Figwright

읽고 쓰는 것이 모두 되는 무료 피그마 MCP 서버

npx -y @figwright/mcp@latest

MCP 서버와 피그마 플러그인을 지역 소켓으로 이어 에이전트가 피그마를 보기만 하는 것이 아니라 함께 작업하게 합니다. 읽기 쪽은 선택한 요소를 프레임워크에 맞는 코드로 바꾸되 배치와 서체, 변수, 컴포넌트를 중복 없이 정리한 맥락 위에서 만듭니다. 쓰기 쪽은 캔버스를 직접 편집해 프레임과 텍스트, 자동 배치, 스타일, 변수, 컴포넌트, 화면 전체를 만듭니다. 112개 도구가 양방향을 덮습니다. 공식 개발 모드 MCP 가 유료 좌석을 요구하는 것과 달리 무료 등급에서 돌아갑니다. 실제 스택을 감지해 기존 컴포넌트와 토큰, 아이콘을 재사용합니다. 서버와 중계, 플러그인이 전부 내 컴퓨터에서 돕니다.

판단

이럴 때 씁니다

  • 디자인을 코드로 옮기는 작업이 반복될 때
  • 에이전트가 캔버스를 직접 편집해야 할 때
  • 유료 좌석 없이 피그마를 붙이고 싶을 때

이럴 땐 쓰지 마세요

  • 플러그인을 넣으려면 데스크톱 앱이 필요합니다
  • 노드 판 요구가 까다롭습니다
  • 디자인 파일이 정리되지 않으면 결과가 나빠집니다

차별점

  • 읽기와 쓰기를 모두 지원하는 양방향 연결입니다.
  • 공식 개발 모드와 달리 무료 등급에서 돌아갑니다.
  • 실제 스택을 감지해 기존 컴포넌트와 토큰을 재사용합니다.
  • 서버와 중계, 플러그인이 전부 지역에서 돌아 디자인이 외부로 나가지 않습니다.

워크플로

  1. 01MCP 설정에 서버를 넣습니다.
  2. 02피그마 데스크톱 앱에 플러그인을 넣습니다.
  3. 03선택 영역을 코드로 바꿉니다.
  4. 04필요하면 캔버스를 직접 편집합니다.
  5. 05프로젝트 토큰과 컴포넌트를 재사용하게 둡니다.

주요 명령

명령설명
npx -y @figwright/mcp@latestMCP 설정에 이 명령을 넣습니다.

함정

설치 전에 확인하세요

  • 노드 18과 21, 22.0에서 22.11 사이는 지원하지 않습니다. 서버가 별도 프로세스로 도니 프로젝트 판과는 무관합니다.
  • 플러그인을 넣으려면 피그마 데스크톱 앱이 필요합니다. 무료 등급으로 충분합니다.
  • 112개 도구가 읽기와 쓰기를 모두 덮습니다. 쓰기 권한을 열면 캔버스가 바뀝니다.
  • 스택 감지가 잘못되면 엉뚱한 컴포넌트를 재사용합니다. 결과를 확인해야 합니다.

비교

피그마를 에이전트에 붙이는 다른 방법은 대체로 읽기 전용이고 공식 경로는 유료 좌석을 요구합니다. 이쪽은 무료 등급에서 쓰기까지 됩니다. 대신 플러그인 설치와 노드 판 조건이 붙습니다.

최근 변경

텍스트 줄바꿈 방식을 노드와 구간, 텍스트 스타일 전반에서 읽고 쓸 수 있게 됐습니다. 특정 CSS 프레임워크의 설정 파일을 프로젝트 토큰 원천으로 읽는 기능도 들어갔습니다.

공식 변경 내역