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