Claude Code와 Figma를 활용한 앱 디자인 및 빌드 설정 공유
My Full Claude Code + FIgma Setup to Design & Build Apps.
핵심 요약
Claude Code와 Figma MCP를 연동해 디자인 시스템을 활용한 앱 개발 효율화 방법과 실제 경험을 공유함.
- Figma MCP 연동 — Figma의 읽기/쓰기 권한을 Claude Code에 부여하여 디자인 시스템을 직접 제어함.
- Skill 활용 — figma-use와 figma-generate-design 스킬을 통해 캔버스 내 편집 및 컴포넌트 생성을 자동화함.
- 디자인 시스템 동기화 — 컴포넌트 변수와 스타일을 자동으로 매핑하여 수동 작업 시간을 획기적으로 단축함.
- 한계점 발견 — 복잡한 오토 레이아웃이나 부모 프레임 구조를 인식하지 못해 절대 위치로 배치되는 오류가 발생함.
이전에는 Figma의 MCP가 읽기 전용이었습니다. 에이전트가 컨텍스트를 가져올 수는 있었지만, 아무것도 수정할 수는 없었죠.
figma-use는 쓰기 권한을 제공합니다. 에이전트는 먼저 게시된 라이브러리를 읽은 다음, 그 안에 존재하는 것을 사용하여 빌드합니다.
스킬은 캔버스에서 에이전트가 어떻게 행동할지 결정하는 마크다운 지침 파일입니다. 두 가지가 필요합니다:
/figma-use: 캔버스에서 작성 및 편집하기 위한 용도/figma-generate-design: 컴포넌트 라이브러리에서 새로운 디자인을 빌드하기 위한 용도
전체 설정
1단계: Figma 플러그인 설치
터미널에서 다음을 입력하세요:
claude plugin install figma@claude-plugins-official
Claude Code를 재시작하세요.
/plugin을 입력하고 Installed 탭으로 이동하여 figma 서버를 찾은 뒤, Enter를 눌러 인증 페이지를 엽니다. 다시 Enter를 누르고 브라우저에서 Allow Access를 클릭하세요.
/plugin을 다시 실행하세요. figma 서버가 연결된 것으로 표시되어야 합니다.
2단계: 스킬 설치
MCP 연결은 설정의 절반일 뿐입니다. 스킬도 필요합니다.
figma.com/community/skills로 이동하여 figma-use와 figma-generate-design을 다운로드하세요. 각각은 SKILL.md 파일입니다.
Claude Code 데스크탑 앱에서 Customize > Skills로 이동하여 + 버튼을 클릭하고 두 파일을 모두 업로드하세요.
3단계: 라이브러리 게시
에이전트는 읽을 수 있는 것만 사용할 수 있습니다. 게시되지 않은 컴포넌트는 시스템과 연결되지 않은 일반적인 결과물을 생성합니다.
쓰기 권한은 현재 유료 Figma 플랜의 Full 및 Dev 시트에서 사용할 수 있습니다. 베타 기간에는 무료이며, 이후에는 사용량 기반으로 과금됩니다.
프롬프트 작성
스킬 접두사를 사용하세요:
/figma-use apply my color variables to the frames of this section [section link]
접두사는 스킬을 활성화합니다. 에이전트는 추측하는 대신 워크플로우를 따릅니다.
4단계: 코드 작성
전체 앱을 디자인한 후 Claude Code에서 Expo Coding CLI를 로드하세요. 전체 앱을 빌드하고 배포하기 위해 크로스 플랫폼 웹/앱(IOS & Android)을 작성하세요.
잘 작동한 점
기존 디자인에 컬러 변수 적용하기. 하드코딩된 16진수 값으로 가득 찬 프레임들이 있었습니다. 에이전트가 라이브러리를 읽고 각 16진수 값을 가장 가까운 게시된 변수와 일치시켜 선택 영역 전체에 적용했습니다. 20분 걸리던 수동 클릭 작업이 프롬프트 하나로 끝났습니다.
