피그마 유료 좌석 없이 AI 에이전트 연결: Figwright 직접 검증

Figma MCP는 공식 서버가 유료 좌석에 묶여 있고, 무료 원격 서버는 곧 사용량 과금 전환이 예고된 상태다. Figwright는 무료 플랜만으로 읽기와 쓰기를 모두 지원하는 양방향 MCP 서버다. 피그마 시안을 프레임워크에 맞는 코드로 바꾸는 작업과, 반대로 코드·문장으로 피그마 캔버스에 화면을 그리는 작업을 Claude Code, Codex, Cursor에서 그대로 쓸 수 있다. 이 글은 격리 환경에서 설치·도구 목록 조회·보안 경계·제거까지 직접 검증한 결과를 정리한다.

핵심 요약

문제: Figma 공식 데스크톱 MCP 서버는 유료 플랜의 Dev/Full 좌석이 필요하고, 무료 원격 서버는 베타 이후 사용량 기반 유료 전환이 예고되어 있다.
해결: Figwright는 로컬 MCP 서버와 피그마 플러그인을 WebSocket 릴레이로 연결한다. 디자인 읽기·쓰기 112개 도구를 무료 플랜에서 쓸 수 있다.
검증 결과: npm 타르볼 sha512 무결성 일치, SLSA provenance(attestation) 확인, 원격 텔레메트리 없음, 릴레이 포트의 Origin/Host 헤더 검증 동작을 직접 확인했다.
주의: 쓰기 도구는 피그마 파일을 변경하고 내보내기 도구는 에이전트가 지정한 경로에 파일을 쓴다. 악성 디자인이나 프롬프트 인젝션에 악용될 수 있으므로 MCP 클라이언트의 도구 승인 설정이 실제 방어선이다.
판정: 피그마를 쓰는 프론트엔드 개발자에게 유용하고, 피그마를 디자인 소스로 쓰지 않는 백엔드 개발자는 설치할 이유가 없다.

Figwright란 무엇인가

항목	내용
이름	Figwright (@figwright/mcp)
유형	로컬 MCP 서버 + 피그마 플러그인 (양방향)
공식 URL	https://github.com/awdr74100/figwright
라이선스	MIT
생성일	2026-06-18
최근 푸시	2026-09-12 (검증 시점 기준)
최신 릴리스	v0.5.0 (2026-08-30)
Stars / Forks	739 / 40 (2026-09-13 관측)
최근 증가	3일간 +22 (+7/일, 실측)
npm 주간 다운로드	433회 (2026-09-05~09-11)

이 표의 스타 수치는 2026-09-13 관측값이며, 증가율은 직전 스냅숏(2026-09-10 717개)과의 실측 차이다. 저장소 생성 90일 미만의 신생 프로젝트라 장기 추이는 아직 판단할 수 없다.

왜 필요한가: 공식 Figma MCP의 제약

Figma 공식 문서에 따르면 두 가지 제약이 있다.

데스크톱 MCP 서버는 유료 플랜의 Dev 또는 Full 좌석이 필요하다. 무료·프로 플랜의 일반 시트로는 로컬 서버를 쓸 수 없다.
원격 서버는 모든 좌석에서 쓸 수 있지만 “AI 에이전트 지원은 결국 사용량 기반 유료 기능이 될 것”이라고 명시되어 있다. 현재는 베타 무료지만 과금 전환이 예고된 상태다.

또한 공식 서버의 코드 생성은 읽기 중심이다. 에이전트가 피그마 캔버스에 직접 프레임·텍스트·컴포넌트를 만들거나 수정하는 쓰기 작업은 Figwright의 차별점이다.

작동 구조와 데이터 경계

Figwright는 세 부분으로 구성된다.

Claude Code / Codex / Cursor
        │ stdio (MCP)
        ▼
@figwright/mcp 서버 (npx 실행)
        │ 로컬 WebSocket · msgpack (127.0.0.1:3055)
        ▼
피그마 데스크톱/브라우저의 Figwright 플러그인
        │ Figma Plugin API
        ▼
      캔버스

서버·릴레이·플러그인이 모두 내 컴퓨터에서 실행된다. 디자인 파일이 외부로 전송되지 않고, API 키도 필요 없다. 외부 호스트로 나가는 통신 코드가 번들에 없음을 직접 확인했다.

루프백 포트라도 웹 페이지가 로컬 포트에 접근할 수 있으므로(DNS 리바인딩), 릴레이는 두 가지 검증을 한다. Host 헤더가 루프백을 지칭해야 하고, Origin 헤더는 플러그인의 샌드박스 핸드셰이크만 허용한다.

Claude Code 설치 방법

Node.js 20.19+ 또는 22.12+가 필요하다 (18/21, 22.0~22.11은 미지원). 프로젝트 루트의 .mcp.json에 추가한다.

{
  "mcpServers": {
    "figwright": {
      "command": "npx",
      "args": ["-y", "@figwright/mcp@latest"]
    }
  }
}

설치 시 바뀌는 것은 설정 파일의 서버 항목뿐이다. 전역 설치나 상주 프로세스는 없다.

피그마 플러그인 설치

플러그인은 아직 피그마 커뮤니티 마켓에 없다. GitHub 릴리스에서 zip을 받아 수동 등록한다.

https://github.com/awdr74100/figwright/releases/latest 에서 figwright-plugin-v0.5.0.zip을 내려받아 압축을 푼다.
피그마 데스크톱 앱에서 메뉴 → Plugins → Development → Import plugin from manifest… 를 선택하고 압축 푼 폴더의 manifest.json을 지정한다.
Plugins → Development → Figwright를 열면 로컬 서버에 자동 연결되어 Connected 상태가 된다.

데스크톱 앱이 필요한 이유는 개발 모드 플러그인 임포트가 데스크톱에서만 지원되기 때문이다. 피그마 플랜 자체는 무료로 충분하다.

Codex와 기타 클라이언트 연결

같은 MCP 설정 형식을 쓰는 클라이언트라면 동일하게 연결된다. Codex는 ~/.codex/config.toml에 [mcp_servers.figwright] 항목으로, Cursor는 MCP 설정 UI에 같은 명령을 등록한다. Hermes Agent에서는 표준 MCP 서버 등록 절차를 따른다. 이번 검증에서는 Hermes 프로젝트 디렉터리가 격리 환경에 없어 자동 설치가 스킵되었음을 확인했다.

스킬 설치(선택)

에이전트가 적절한 순간에 Figwright를 찾도록 도우미 스킬 2종을 제공한다.

npx skills add awdr74100/figwright/skills

figma-codegen: 피그마 선택 영역을 프로젝트 스택에 맞는 코드로 변환하는 워크플로
figma-build: 코드나 설명에서 피그마 디자인을 만드는 워크플로

설치 위치는 ~/.agents/skills/다 (Universal 스킬 경로). 스킬은 서버가 연결되어 있어야 동작한다.

112개 도구의 구성

직접 서버를 실행해 tools/list를 조회한 결과 112개 도구가 노출된다.

읽기: 선택 영역·문서·노드 검사, 스타일·변수·컴포넌트 조회, 폰트, 반응·모션 상태, 스크린샷, 이미지 에셋, PDF·비디오 내보내기, 다중 파일 작업
쓰기: 프레임·텍스트·모양 생성과 편집, 오토레이아웃, 이펙트, 스타일·변수·컴포넌트 제작, 페이지, 반응, 모션 애니메이션, 일괄 편집
그라운딩: get_design_context(중복 제거된 디자인 컨텍스트), component_map/token_map/icon_map(피그마 데이터와 코드베이스 조인), design_diff(기준선 대비 변경 보고)

component_map은 피그마 컴포넌트를 로컬 코드 컴포넌트에 매핑하고 재사용 가능한 것을 알려준다. 스크린샷을 보고 범용 마크업을 생성하는 방식과 달리, 기존 컴포넌트·토큰을 재활용하는 코드를 만드는 것이 그라운딩 도구의 목적이다.

기존 유명 도구와 비교: Figma 공식 MCP vs Figwright

항목	Figma 공식 MCP (데스크톱)	Figwright
분류	직접 대체재	직접 대체재
요구 좌석	유료 플랜 Dev/Full 좌석	무료 플랜 가능
데이터 경로	로컬	로컬 (WebSocket 릴레이)
읽기	지원	지원 (그라운딩 도구 포함)
쓰기	제한적	지원 (캔버스 편집·생성)
도구 수	비공개	112개
스킬	공식 문서로 제공	figma-codegen·figma-build 제공
유지보수	Figma 공식	개인 개발자 (v0.5.0, 2026-08-30)
라이선스	상용	MIT

관계는 직접 대체재다. 유료 좌석이 없거나 쓰기 기능이 필요하면 Figwright를, 공식 지원과 안정성이 우선이면 공식 서버를 선택한다.

좌석이 이미 있다면: 공식 데스크톱 서버가 지원과 문서에서 앞선다. Figwright로 갈 이유는 쓰기 도구다.

좌석이 없다면: Figwright가 유료 없이 양방향 작업을 가능하게 하는 거의 유일한 선택지다.

공식 서버와 섞어 쓰기: 서버 이름을 다르게 지정하면 공식 원격 서버(읽기)와 Figwright(쓰기)를 동시에 연결할 수도 있다.

안전한 복사·붙여넣기 설치 프롬프트

아래 프롬프트를 Claude Code나 Codex에 붙여 넣으면 된다. 운영 환경에서는 버전을 고정하고, 비밀 입력이나 기존 설정 백업 없이 진행하지 않도록 요구한다.

Figwright MCP 서버를 설치해줘. 안전하게 진행해.

1. Node.js 버전을 확인해줘. 20.19+ 또는 22.12+가 아니면 먼저 알려주고 중단해.
2. 이 프로젝트의 .mcp.json을 먼저 백업한 뒤, figwright 서버 항목을 추가해:
   command: npx, args: ["-y", "@figwright/[email protected]"]
   (@latest 대신 0.5.0으로 버전을 고정해)
3. npm 레지스트리 무결성(sha512)과 provenance attestation이 있는지 확인했다고 알려줘.
4. MCP 연결 후 tools/list에서 112개 도구와 ping이 보이는지 확인하고 결과를 보여줘.
5. 쓰기 도구(create_, set_ 계열)는 승인 없이 실행되지 않도록 클라이언트 도구 승인 설정을 켜줘.
6. 내 API 키나 비밀번호를 묻지 마. 필요하면 중단하고 이유를 설명해.
7. 완료되면 설치된 파일 경로와 제거 방법을 안내해줘.

제거는 설정 파일의 figwright 항목을 지우고, 스킬을 설치했다면 npx skills remove figma-codegen과 npx skills remove figma-build를 실행하면 끝난다. 피그마 개발 모드 플러그인은 피그마 앱에서 삭제한다. npx 캐시에만 존재하므로 전역 제거 대상은 없다.

직접 검증한 내용과 검증하지 못한 내용

Figwright 격리 환경 검증 세션 출력 요약: 서버 기동, 도구 112개 조회, 릴레이 403 거부, 스킬 제거 — 격리 환경 검증 세션의 실제 출력 요약
2026-09-13 직접 실행한 명령과 결과를 정리한 그림

직접 검증함 (2026-09-13, 격리 홈 디렉터리):

npm 0.5.0 타르볼 sha512 무결성이 레지스트리 메타데이터와 attestation subject와 일치
SLSA provenance가 GitHub 태그 v0.5.0과 release.yml 워크플로를 가리킴
MCP stdio 핸드셰이크로 서버 기동, tools/list에서 112개 도구 확인
릴레이(127.0.0.1:3055)에 위조 Origin 요청 → 403 거부 확인
DNS 리바인딩 형태의 비루프백 Host 헤더 → 403 거부 확인
번들 정적 검사: 외부 텔레메트리·분석 엔드포인트 없음, child_process는 ps 프로세스 상태 조사용 1회(인자 배열, 셸 미경유)
npx skills add awdr74100/figwright/skills 설치 → skills.sh 보안 스캔 Safe/0 alerts/Low Risk, ~/.agents/skills/에 2개 스킬 설치 확인
npx skills remove로 스킬 2개 제거 확인
실제 사용자 홈의 .claude.json, .claude/settings.json, .codex/config.toml 해시가 검증 전후 동일

검증하지 못함:

피그마 앱·플러그인 연동 (피그마 데스크톱 앱과 GUI가 격리 환경에 없음)
실제 디자인→코드, 코드→디자인 변환 품질 (양방향 실사용 미실시)
대규모 파일·복잡한 컴포넌트에서의 성능과 안정성
Reddit 스레드 점수·댓글 상세 (이 서버 IP에서 Reddit이 HTML 셸만 반환)

유지보수 신호

2026-06-19 v0.1.0 이후 2026-08-30 v0.5.0까지 5회 릴리스 (월 1~2회)
최근 커밋이 2026-09-12까지 이어짐 (의존성 갱신, 그라운딩 안정화, 문서 개선)
CHANGELOG에 기능 개선·버그 수정이 PR 단위로 상세히 기록됨
오픈 이슈 1개, 열린 PR 0개 (2026-09-13 기준)
CI 워크플로 배지가 있고 npm 게시가 provenance와 함께 이루어짐

단일 개발자 프로젝트라 버스 팩터는 낮다. 장기 유지보수 관점에서는 이 점을 감안해야 한다.

유용한 경우와 추천하지 않는 경우

유용한 경우:

유료 좌석 없이 피그마 시안을 실제 컴포넌트 코드로 받고 싶은 프론트엔드 개발자
에이전트가 피그마에 화면을 직접 그리게 하고 싶은 경우 (프로토타입 자동 생성)
기존 코드베이스의 컴포넌트·디자인 토큰을 재활용하는 코드를 원하는 경우

추천하지 않는 경우:

피그마를 디자인 소스로 쓰지 않는 백엔드·인프라 개발자
이미 유료 Dev/Full 좌석이 있고 공식 지원이 필요한 팀
검증되지 않은 서드파티 로컬 서버를 허용하지 않는 보안 정책이 있는 조직
피그마 파일을 로컬 도구에 연결하는 것 자체가 금지된 환경

FAQ

Figwright는 무료인가?

MIT 라이선스 오픈소스고 피그마 무료 플랜에서 동작한다. 서버·스킬 모두 무료다.

공식 Figma MCP와 동시에 쓸 수 있나?

가능하다. 서버 이름을 다르게 등록하면 된다. 공식 원격 서버의 읽기와 Figwright의 쓰기를 병행하는 방식도 있다.

API 키가 필요한가?

필요 없다. 피그마 세션 자체가 인증이고, MCP 연결은 로컬 stdio다.

내 디자인 파일이 외부로 나가나?

서버·릴레이·플러그인이 모두 로컬에서 실행된다. 번들에서 외부 텔레메트리 엔드포인트를 찾지 못했다. 다만 에이전트가 대화 컨텍스트로 디자인 데이터를 모델 제공자에 보내는 것은 MCP 서버가 통제하지 않는다.

데이터 손실 위험은 없나?

쓰기 도구는 피그마 파일을 변경한다. 피그마의 버전 히스토리가 복구 수단이지만, 중요 파일은 쓰기 도구 승인을 켜고 사용하는 것이 안전하다.

스킬 설치 없이 쓸 수 있나?

가능하다. 스킬은 도구를 적절한 순간에 찾도록 돕는 라우터일 뿐, 도구 자체는 서버 연결만으로 노출된다.

공식 참고자료

GitHub 저장소: https://github.com/awdr74100/figwright
npm 패키지: https://www.npmjs.com/package/@figwright/mcp
릴리스: https://github.com/awdr74100/figwright/releases
보안 문서: https://github.com/awdr74100/figwright/blob/main/SECURITY.md
Figma 공식 MCP 가이드: https://help.figma.com/hc/ko/articles/32132100833559
MCP 보안 모범 사례: https://modelcontextprotocol.io/docs/tutorials/security/security_best_practices

피그마 유료 좌석 없이 AI 에이전트 양방향 연결: Figwright 설치·보안·제거 직접 검증

핵심 요약

Figwright란 무엇인가

왜 필요한가: 공식 Figma MCP의 제약

작동 구조와 데이터 경계

Claude Code 설치 방법

피그마 플러그인 설치

Codex와 기타 클라이언트 연결

스킬 설치(선택)

112개 도구의 구성

기존 유명 도구와 비교: Figma 공식 MCP vs Figwright

안전한 복사·붙여넣기 설치 프롬프트

직접 검증한 내용과 검증하지 못한 내용

유지보수 신호

유용한 경우와 추천하지 않는 경우

FAQ

Figwright는 무료인가?

공식 Figma MCP와 동시에 쓸 수 있나?

API 키가 필요한가?

내 디자인 파일이 외부로 나가나?

데이터 손실 위험은 없나?

스킬 설치 없이 쓸 수 있나?

공식 참고자료

답글 남기기 응답 취소

핵심 요약

Figwright란 무엇인가

왜 필요한가: 공식 Figma MCP의 제약

작동 구조와 데이터 경계

Claude Code 설치 방법

피그마 플러그인 설치

Codex와 기타 클라이언트 연결

스킬 설치(선택)

112개 도구의 구성

기존 유명 도구와 비교: Figma 공식 MCP vs Figwright

안전한 복사·붙여넣기 설치 프롬프트

직접 검증한 내용과 검증하지 못한 내용

유지보수 신호

유용한 경우와 추천하지 않는 경우

FAQ

Figwright는 무료인가?

공식 Figma MCP와 동시에 쓸 수 있나?

API 키가 필요한가?

내 디자인 파일이 외부로 나가나?

데이터 손실 위험은 없나?

스킬 설치 없이 쓸 수 있나?

공식 참고자료

You Might Also Like

AI Evals 실무 가이드: LLM 답변 품질을 감으로 평가하지 않는 방법

Claude Code에 맘껏 권한 주고 싶지만 내 노트북은 아깝다면: Trail of Bits coop 설치·보안·제거 직접 검증

AI EXPO KOREA 2026 총정리 — 알파고 이후 10년, 에이전트 시대의 도래

AI 검색 트래픽 측정 방법: ChatGPT·Perplexity·Google AI Overview 유입 확인

개인 서비스 VPS 사양 선택법: 1GB·2GB·4GB 비용과 운영 기준

답글 남기기 응답 취소