Claude × Figma Integration Guide

피그마랑 Claude
연동하는 방법

비개발자도 따라할 수 있는 단계별 안내서  ·  피그마 Free 플랜 기준

할 수 있어요
  • 피그마 디자인 파악·분석
  • 색상·폰트·간격 값 추출
  • 디자인 → HTML/CSS 변환
  • 디자인 개선 제안 (정확한 수치)
  • 컴포넌트 구조 파악
한계도 있어요
  • 피그마 파일 직접 수정
  • 레이어 자동 생성
  • (유료 플랜 기능)
💡
그래서 어떻게 쓰냐면요

Claude가 피그마 파일을 읽고 분석해서 → "이 버튼 색을 #FF4444로 바꾸고, 패딩을 16px로 늘리세요" 같은 정확한 수치로 알려드려요. 직접 수정은 여러분이 하지만, Claude가 모든 값을 계산하고 안내해 드려요.

01

피그마 API 토큰 발급받기

1

피그마 웹사이트에 로그인

figma.com 에 접속해서 로그인하세요.

2

프로필 메뉴 열기

화면 왼쪽 위 피그마 로고를 클릭하거나, 오른쪽 위 프로필 아이콘을 클릭하세요.

📍 화면 왼쪽 위 피그마(F) 로고 → "Settings" 선택
3

Settings(설정) 클릭

메뉴에서 Settings를 선택하세요.

4

Personal access tokens 찾기

설정 페이지를 아래로 스크롤하면 "Personal access tokens" 섹션이 나와요.

📍 Settings 페이지 중간쯤 → "Personal access tokens" 섹션
5

새 토큰 생성

"Generate new token" 버튼을 클릭하세요.

이름을 입력하는 칸이 나오면 "Claude" 라고 입력하고 엔터를 누르세요.

6

토큰 복사하기 ⚠️

긴 문자열(토큰)이 나타나요. 이걸 꼭 복사해두세요!

⚠️
딱 한 번만 보여줘요!

창을 닫으면 다시 볼 수 없어요. 메모장에 임시로 붙여넣기 해두세요.

02

Claude에 토큰 알려주기

터미널(Terminal)에서 아래 명령어를 실행하면 돼요. 터미널은 Mac의 경우 Command+Space → "터미널" 검색으로 열 수 있어요.

터미널에 입력할 명령어
# FIGD_로 시작하는 긴 토큰을 큰따옴표 안에 붙여넣기 claude config set env.FIGMA_TOKEN "여기에_토큰_붙여넣기"
💡
예시

토큰이 figd_abc123xyz... 라면
→ claude config set env.FIGMA_TOKEN "figd_abc123xyz..." 이렇게 입력해요

✓

설정 확인

명령어를 실행하고 오류가 없으면 성공이에요! 이제 Claude가 피그마에 접근할 수 있어요.

03

실제로 사용하는 방법

피그마 파일 URL 가져오기

피그마에서 작업하고 싶은 파일을 열고, 브라우저 주소창에 있는 URL을 복사하세요.

📍 피그마 열기 → 브라우저 주소창의 URL 복사
예: https://www.figma.com/file/ABC123.../내-프로젝트

Claude에게 이렇게 요청하면 돼요

나 (You)
피그마 URL + 원하는 작업을 Claude에게 전달
Claude
파일 분석 → 현재 디자인 파악
Claude
수정 방법을 정확한 수치로 안내 (또는 코드 생성)
나 (You)
안내를 따라 피그마에서 직접 수정

대화 예시

이 피그마 파일 봐줘: https://figma.com/file/... 메인 버튼 색이 너무 어두운 것 같아, 어떻게 바꾸면 좋을까?
파일 분석했어요! 현재 메인 버튼이 #2D2D2D(거의 검정)로 설정되어 있네요. 브랜드 컬러를 살리면서 더 생동감 있게 하려면 #FF6B35 (따뜻한 오렌지)나 #4A90E2 (신뢰감 있는 블루)를 추천해요. 피그마에서 버튼 레이어 선택 → Fill 색상 클릭 → 위 코드 입력하면 돼요!
웹사이트로 만들어줄 수도 있어?
물론이요! 분석한 디자인 그대로 HTML 파일로 만들어 드릴게요. 지금 바로 할까요?

정리하면 이렇게 해요

①
figma.com → Settings → Personal access tokens → 토큰 복사
②
터미널에서 claude config set env.FIGMA_TOKEN "토큰" 실행
③
Claude에게 피그마 URL + 작업 내용 전달 → Claude가 분석하고 안내해 줌
🙋
막히는 부분이 있으면 언제든 물어보세요!

어느 단계에서 막혔는지, 화면에 뭐가 보이는지 알려주시면 바로 도와드릴게요.