🎨
Figma
디자인-코드 변환 개발 도구설치 명령어
npx clawhub@latest install figma
설치 안내
1
환경 확인
Node.js 22 이상과 OpenClaw가 설치되어 있는지 확인하세요. 터미널에서 openclaw --version을 실행하여 확인할 수 있습니다.
2
설치 실행
위의 설치 명령어를 터미널에서 실행하세요. ClawHub가 자동으로 Figma을(를) ~/.openclaw/skills/ 디렉토리에 다운로드하고 설치합니다.
3
설치 확인
openclaw skills list를 실행하여 설치된 스킬 목록을 확인하고, Figma이(가) 목록에 표시되는지 확인하세요.
4
매개변수 설정 (선택사항)
아래 소개의 설정 안내에 따라 ~/.config/openclaw/openclaw.json5에 스킬 설정 항목을 추가하세요.
수동 설치 방법: Skill 폴더를
~/.openclaw/skills/ 또는 프로젝트의 skills/ 디렉토리에 복사하세요. 폴더에 SKILL.md 파일이 포함되어 있어야 합니다.
Figma 디자인 파일 및 컴포넌트 정보 읽기
스타일 변수 및 디자인 토큰 추출
디자인을 활용 가능한 코드 구조로 변환
상세 소개
Figma MCP Server는 AI가 Figma 디자인 파일을 직접 읽고 이해할 수 있게 하여, 디자인 정보를 코드 구현의 기반으로 원활하게 변환합니다.
핵심 기능
- 디자인 파일 읽기: Figma 파일의 페이지, 아트보드 및 레이어 구조에 직접 접근하여 완전한 디자인 계층 정보 획득
- 컴포넌트 및 스타일 추출: 디자인 시스템의 컴포넌트 정의, 색상 변수, 폰트 스타일 및 간격 토큰을 읽어 코드와 디자인의 일관성 보장
- 레이아웃 정보 파싱: Auto Layout, 제약 조건 및 반응형 레이아웃 설정을 해석하여 AI가 정확한 CSS/스타일 코드를 생성하도록 지원
설정 방법
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp"],
"env": {
"FIGMA_API_KEY": "Figma 개인 액세스 토큰"
}
}
}
}
사용 시나리오
- Figma 디자인에서 프론트엔드 컴포넌트 코드 자동 생성
- 디자인 토큰을 추출하여 코드 저장소의 스타일 시스템에 동기화
- AI가 디자인 의도를 이해하여 코딩 시 시각적 일관성 유지
- 디자인 리뷰 시 디자인 스펙 데이터 빠르게 확인