클로드 코드(Claude Code)에 피그마 MCP를 연결하면, 피그마 프레임 링크 하나만 붙여 넣어도 색·글자·간격·컴포넌트를 정리한 개발 전달 문서(handoff.md)를 받을 수 있어요. 변수로 연결되지 않고 값만 들어간 곳도 따로 골라 줘요.
이런 분께
시안을 넘길 때마다 "이 버튼 색 코드가 뭐예요?", "제목 글자 크기 몇이에요?" 질문을 메신저로 받는 디자이너. 디자인 시스템 변수를 정리해 뒀는데 실제 화면에 직접 입력한 값이 섞여 있는지 확인하고 싶은 분.
끝나면 이렇게 됩니다
작업 폴더에 handoff.md 파일 하나와 프레임 캡처 이미지가 생겨요. 아래는 문서 구성이에요(공식 도구 설명 기준, 실제 값은 내 파일에서 채워져요).
- 화면 이름, 캡처 이미지 경로
- 색 표: 이름 | 값 | 쓰인 곳
- 글자 표: 스타일 이름 | 글꼴 | 크기 | 굵기 | 줄 간격
- 간격·모서리 표
- 컴포넌트 목록과 상태(기본·눌림·비활성)가 시안에 있는지
- 직접 입력값 표: 변수·스타일 없이 값만 들어간 곳 이 파일을 그대로 개발자에게 보내거나 노션에 붙여 넣으면 돼요.
준비물
- 클로드 코드: Claude Pro 이상 유료 요금제에 들어 있어요. 무료 요금제에는 없어요(2026년 11월 기준).
- 피그마 계정: Starter(무료)부터 피그마 MCP 서버를 쓸 수 있어요. 다만 Starter나 View·Collab 좌석은 도구 호출이 월 20회까지예요. Professional 요금제의 Dev·Full 좌석은 하루 200회까지예요(2026년 11월 기준). 한 번 정리할 때 호출이 여러 번 쓰이니 무료라면 프레임 1~2개로 먼저 해 봐요.
- 터미널(컴퓨터에 글자로 명령하는 창). 윈도우는 시작 메뉴에서 "PowerShell" 검색, 맥은 Spotlight에서 "터미널" 검색.
- MCP(AI가 다른 프로그램의 정보를 읽어 오게 이어 주는 연결 방식)는 아래 명령어로 한 번만 연결하면 돼요.
따라 하기
- 터미널을 열고 클로드 코드를 설치해요. 맥은
curl -fsSL https://claude.ai/install.sh | bash, 윈도우 PowerShell은irm https://claude.ai/install.ps1 | iex. 설치 뒤 새 터미널 창에서claude --version을 쳐서 버전 숫자가 나오면 돼요. - 같은 터미널에 아래 명령어를 붙여 넣어 피그마 플러그인을 설치해요. 피그마가 만든 스킬(정해진 작업 순서 묶음)까지 같이 들어와요.
claude plugin install figma@claude-plugins-official
- 작업용 폴더를 하나 만들고 그 폴더에서
claude를 실행해요. 처음이면 브라우저에서 클로드 계정 로그인을 해요. - 클로드 코드 안에서
/plugin을 치고 「Installed」 탭에서 figma를 골라 엔터, 한 번 더 엔터를 눌러 로그인해요. 브라우저가 열리면 「Allow access」를 눌러요. 다시/plugin을 쳐서 figma가 연결됨으로 보이면 돼요. - 피그마에서 정리할 프레임을 오른쪽 클릭하고 「Copy link to selection」을 눌러 링크를 복사해요(영어 화면 기준).
- 클로드 코드에 아래 "복사해서 쓰는 프롬프트"를 붙여 넣고 링크 자리를 바꿔 보내요. 피그마 도구를 써도 되는지 물으면 「Yes」를 골라요. 파일을 만들기 전에도 물어보니 내용을 보고 허락해요.
- 작업 폴더에서 handoff.md를 열어 "확인 필요" 줄부터 피그마와 맞춰 봐요.
플러그인 설치가 막히면(회사에서 막아 둔 경우) 대신 claude mcp add --transport http figma https://mcp.figma.com/mcp로 연결하고, 클로드 코드를 새로 연 뒤 /mcp에서 figma를 골라 「Authenticate」를 누르면 돼요. 이 방법은 스킬이 같이 설치되지 않아요.
