플러그인 · 디자인
피그마 디자인→코드 + Code Connect
피그마 공식 플러그인입니다. 원격 MCP 서버(mcp.figma.com — 디자인 컨텍스트·스크린샷·변수·디자인 시스템 검색·캔버스 쓰기)를 설정하고, 디자인 구현·Code Connect 연결·디자인 시스템 규칙 작성 스킬을 함께 넣습니다.
디자인·이미지 용도. 같은 목적의 다른 도구를 한 장에 모아 두었습니다.
이럴 때 씁니다
피그마 시안을 코드로 옮기거나, 코드 컴포넌트를 디자인 컴포넌트와 이어 두고 싶을 때
한 줄로 넣기
Claude Code 에서 마켓플레이스를 먼저 등록한 뒤, 플러그인을 설치합니다.
/plugin marketplace add anthropics/claude-plugins-official
/plugin install figma@claude-plugins-official
전체 설치 절차
순서대로 하나씩 확인하고 싶으실 때 보십시오. 눌러서 펼치면 전체가 나옵니다.
# figma 설치
## 1. 마켓플레이스를 등록합니다
/plugin marketplace add anthropics/claude-plugins-official
## 2. 플러그인을 넣습니다
/plugin install figma@claude-plugins-official
## 3. Claude 를 다시 시작합니다
창만 닫으면 반영되지 않습니다.
Windows 는 작업 표시줄 아이콘에서 종료, macOS 는 Cmd+Q 로 완전히 끄십시오.
## 4. 확인
/plugin 명령으로 설치된 목록에 있는지 확인할 수 있습니다.
넣고 나면 관련 작업에서 알아서 불러 씁니다. 매번 지정하지 않아도 됩니다.이렇게 시켜 보세요
넣고 나서 바로 던져 볼 수 있는 지시문입니다. 누르면 복사됩니다.
알아 둘 것
원격 서버라 데스크톱 앱 없이 브라우저만 있어도 됩니다. 요금제 제한이 있습니다 — Starter 요금제나 유료 요금제의 View·Collab 좌석은 월 6회 도구 호출까지, Dev·Full 좌석은 분당 제한(REST API Tier 1 과 같음)입니다. 캔버스 쓰기는 베타 동안 무료이고 나중에 사용량 기반 유료가 될 예정입니다(README).
자주 막히는 지점
좌석에 따라 금방 막힙니다
View·Collab 좌석은 월 6회면 끝입니다. 본격적으로 쓰려면 Dev 또는 Full 좌석이 필요합니다.
프레임 링크를 그대로 붙여 넣으십시오
주소 안의 node-id 로 어느 프레임인지 찾습니다. 파일 링크만 주면 대상이 없습니다.
큰 화면은 잘라서
한 번에 전체 화면을 읽히면 결과가 뭉개집니다. 섹션 단위로 선택해 옮기십시오.
언제 쓰고, 언제 안 쓰나
디자인 파일이 기준인 팀에서 씁니다. 스크린샷 몇 장 보고 옮기는 정도면 굳이 붙이지 않아도 됩니다.
비슷한 것 중에 왜 이걸
figma-mcp 페이지는 데스크톱 앱이 켜져 있어야 하는 로컬 방식을 다루고, 이 플러그인은 원격 서버를 씁니다. 브라우저만 쓰는 환경이면 이쪽입니다. 캔바 템플릿에 내용을 채우는 쪽은 canva 이고, 개발용 시안을 코드로 옮기는 쪽이 이것입니다.
디자인 도구를 고를 때
Figma 등 디자인 툴과 연동합니다. 팀 플랜이 필요한 기능인지, 읽기 권한만 요구하는지 편집 권한까지 요구하는지 확인하세요.
원본 보기
플러그인 안에는 스킬·명령어·훅·MCP 서버가 함께 들어 있을 수 있습니다. 넣기 전에 한 번 읽어 보시는 것을 권합니다.