converting-figma-designs

Estrellas10

Forks3

Actualizado4 de enero de 2026 a las 23:32

Figma Dev Mode MCP 도구를 활용한 디자인-코드 변환 지원. 디자인 요소 추출, 코드 생성, 스크린샷 캡처, 메타데이터 분석 시 사용. Figma 링크나 디자인 작업 요청 시 자동 활성화.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Fuente

jeongsk

jeongsk/claude-skills

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Diseñadores de interfaces web y digitalesOcupaciones informáticas y matemáticas·SOC 15-1255

Explorador de archivos

4 archivos

SKILL.md

readonly

name	converting-figma-designs
description	Figma Dev Mode MCP 도구를 활용한 디자인-코드 변환 지원. 디자인 요소 추출, 코드 생성, 스크린샷 캡처, 메타데이터 분석 시 사용. Figma 링크나 디자인 작업 요청 시 자동 활성화.

Figma Dev Mode MCP Support

Figma Dev Mode MCP 서버 도구를 활용하여 디자인에서 코드로의 변환을 지원합니다.

핵심 원칙

정확한 도구 선택: 작업 목적에 맞는 MCP 도구 사용
컨텍스트 우선: 디자인 컨텍스트 파악 후 작업 진행
점진적 접근: 컨텍스트 → 메타데이터 → 변수/토큰 순서로 진행

MCP 서버 설정

이 플러그인은 .mcp.json 파일을 통해 Figma Dev Mode MCP 서버를 자동으로 설정합니다.

플러그인 설치 시 다음 MCP 서버가 활성화됩니다:

figma-dev-mode-mcp-server: http://127.0.0.1:3845/mcp

사용 가능한 MCP 도구

1. get_design_context (핵심 도구)

용도: 디자인 요소의 전체 컨텍스트 정보 조회 및 코드 생성

가장 먼저 사용해야 하는 도구입니다. 선택된 Figma 요소의 구조, 스타일, 레이아웃 정보를 종합적으로 파악하고 React + Tailwind CSS 코드를 생성합니다.

지원 파일: Figma Design, Figma Make

사용 시점:

Figma 디자인을 처음 분석할 때
컴포넌트 구조를 파악해야 할 때
레이아웃 및 스타일 정보가 필요할 때
디자인을 코드로 변환할 때

2. get_metadata

용도: Figma 요소의 메타데이터 조회

요소의 ID, 이름, 타입, 위치, 크기 등 기본 정보를 Sparse XML 형식으로 가져옵니다.

지원 파일: Figma Design

사용 시점:

특정 요소의 기본 정보가 필요할 때
요소 식별이 필요할 때
요소 타입을 확인해야 할 때

3. get_screenshot

용도: 디자인 화면 스크린샷 캡처

현재 Figma 화면 또는 선택된 영역의 스크린샷을 캡처합니다.

지원 파일: Figma Design, FigJam

사용 시점:

디자인 전체 화면을 캡처할 때
디자인 리뷰용 이미지가 필요할 때
레이아웃 정확도 검증이 필요할 때
문서화를 위한 스크린샷이 필요할 때

4. get_variable_defs

용도: 디자인 시스템 변수 및 스타일 정의 조회

색상, 간격, 타이포그래피 등의 디자인 토큰을 가져옵니다.

지원 파일: Figma Design

사용 시점:

디자인 토큰/변수를 확인할 때
테마 시스템을 구현할 때
일관된 스타일 적용이 필요할 때

5. get_code_connect_map

용도: Figma 노드와 코드 컴포넌트 매핑 조회

Figma 디자인 요소가 어떤 코드 컴포넌트에 연결되어 있는지 확인합니다.

지원 파일: Figma Design

사용 시점:

기존 컴포넌트 재사용 가능 여부 확인 시
디자인-코드 연결 상태 파악 시

6. add_code_connect_map

용도: Figma 노드와 코드 컴포넌트 매핑 설정

Figma 디자인 요소와 실제 코드 컴포넌트를 연결합니다.

지원 파일: Figma Design

사용 시점:

컴포넌트 라이브러리 연동 시
디자인 시스템과 코드베이스 동기화 시

7. create_design_system_rules

용도: 디자인 시스템 규칙 파일 생성

에이전트 가이드를 위한 규칙 파일을 생성합니다.

사용 시점:

프로젝트 초기 설정 시
팀 협업 규칙 정의 시

8. get_figjam

용도: FigJam 다이어그램 메타데이터 조회

FigJam 다이어그램을 XML 형식의 메타데이터로 변환합니다.

지원 파일: FigJam

사용 시점:

FigJam 다이어그램 분석 시
플로우차트, 와이어프레임 해석 시

워크플로우 가이드

디자인 → 코드 변환 워크플로우

1. get_design_context 호출
   → 전체 구조, 스타일 파악 + 코드 생성

2. 필요시 get_metadata 호출
   → 특정 요소 상세 정보 확인

3. 생성된 코드를 프로젝트 컨벤션에 맞게 수정

디자인 토큰 기반 구현 워크플로우

1. get_variable_defs 호출
   → 디자인 토큰/변수 확인

2. get_design_context 호출
   → 컨텍스트 파악 + 코드 생성

3. 토큰을 적용하여 코드 최적화

컴포넌트 재사용 확인 워크플로우

1. get_code_connect_map 호출
   → 기존 컴포넌트 매핑 확인

2. 매핑된 컴포넌트가 있으면 재사용
   → 없으면 get_design_context로 새로 생성

디자인 문서화 워크플로우

1. get_screenshot 호출
   → 화면 캡처

2. get_design_context 호출
   → 컴포넌트 정보 수집

3. 문서 작성

레이아웃 검증 워크플로우

1. get_screenshot 호출
   → 원본 디자인 캡처

2. get_design_context 호출
   → 코드 생성 및 구현

3. 구현 결과와 스크린샷 비교 검증

트리거 패턴

이 스킬은 다음과 같은 상황에서 자동 활성화됩니다:

Figma 링크 공유 시
"피그마", "Figma" 언급
"디자인 코드로", "디자인 구현" 요청
"컴포넌트 추출", "에셋 추출" 요청
"스크린샷", "캡처" 요청 (디자인 컨텍스트에서)

베스트 프랙티스

Do's

작업 전 항상 get_design_context로 컨텍스트 파악 및 코드 생성
코드 생성 후 프로젝트 스타일에 맞게 조정
반복되는 패턴은 컴포넌트로 분리
get_variable_defs로 디자인 토큰 활용
get_screenshot으로 레이아웃 정확도 검증

Don'ts

컨텍스트 파악 없이 바로 코드 작성 시도
생성된 코드를 검토 없이 그대로 사용
모든 디자인 요소를 한 번에 처리 시도
디자인 토큰 무시하고 하드코딩

참고 문서

MCP 도구 상세 - 각 도구의 파라미터 및 응답 형식
워크플로우 예시 - 실제 사용 사례
트러블슈팅 - 일반적인 문제 해결

Más de este repositorio

mismo repositorio

creating-plugins

jeongsk/claude-skills

Guide for creating Claude Code plugins with commands, agents, skills, hooks, and MCP servers. Use when the user wants to create a new plugin, add plugin components (commands, agents, hooks), set up a plugin marketplace, or needs help with plugin.json configuration.

2026-01-0510

applying-fsd-architecture

jeongsk/claude-skills

Feature-Sliced Design(FSD) 아키텍처를 적용한 프론트엔드 프로젝트 개발 지원. FSD 레이어, 슬라이스, 세그먼트 구조 설계, 의존성 규칙 적용, 마이그레이션 시 사용.

2026-01-0410

developing-reactflow-ui

jeongsk/claude-skills

React Flow 라이브러리를 사용한 노드 기반 UI 개발 지원. 노드/엣지 생성, 커스터마이징, 레이아웃, 상호작용 구현 시 사용. 항상 최신 문서를 WebFetch로 참조하여 정확한 정보 제공.

2026-01-0410

finding-skills

jeongsk/claude-skills

Searches and recommends Claude Code skills and plugins from local database and SkillsMP API. Activates when user asks to find skills, search plugins, get recommendations for PDF/Git/code-review/frontend tools, or requests feature-based tool discovery.

2026-01-0410

name	converting-figma-designs
description	Figma Dev Mode MCP 도구를 활용한 디자인-코드 변환 지원. 디자인 요소 추출, 코드 생성, 스크린샷 캡처, 메타데이터 분석 시 사용. Figma 링크나 디자인 작업 요청 시 자동 활성화.

Figma Dev Mode MCP Support

Figma Dev Mode MCP 서버 도구를 활용하여 디자인에서 코드로의 변환을 지원합니다.

핵심 원칙

정확한 도구 선택: 작업 목적에 맞는 MCP 도구 사용
컨텍스트 우선: 디자인 컨텍스트 파악 후 작업 진행
점진적 접근: 컨텍스트 → 메타데이터 → 변수/토큰 순서로 진행

MCP 서버 설정

이 플러그인은 .mcp.json 파일을 통해 Figma Dev Mode MCP 서버를 자동으로 설정합니다.

플러그인 설치 시 다음 MCP 서버가 활성화됩니다:

figma-dev-mode-mcp-server: http://127.0.0.1:3845/mcp

사용 가능한 MCP 도구

1. get_design_context (핵심 도구)

용도: 디자인 요소의 전체 컨텍스트 정보 조회 및 코드 생성

가장 먼저 사용해야 하는 도구입니다. 선택된 Figma 요소의 구조, 스타일, 레이아웃 정보를 종합적으로 파악하고 React + Tailwind CSS 코드를 생성합니다.

지원 파일: Figma Design, Figma Make

사용 시점:

Figma 디자인을 처음 분석할 때
컴포넌트 구조를 파악해야 할 때
레이아웃 및 스타일 정보가 필요할 때
디자인을 코드로 변환할 때

2. get_metadata

용도: Figma 요소의 메타데이터 조회

요소의 ID, 이름, 타입, 위치, 크기 등 기본 정보를 Sparse XML 형식으로 가져옵니다.

지원 파일: Figma Design

사용 시점:

특정 요소의 기본 정보가 필요할 때
요소 식별이 필요할 때
요소 타입을 확인해야 할 때

3. get_screenshot

용도: 디자인 화면 스크린샷 캡처

현재 Figma 화면 또는 선택된 영역의 스크린샷을 캡처합니다.

지원 파일: Figma Design, FigJam

사용 시점:

디자인 전체 화면을 캡처할 때
디자인 리뷰용 이미지가 필요할 때
레이아웃 정확도 검증이 필요할 때
문서화를 위한 스크린샷이 필요할 때

4. get_variable_defs

용도: 디자인 시스템 변수 및 스타일 정의 조회

색상, 간격, 타이포그래피 등의 디자인 토큰을 가져옵니다.

지원 파일: Figma Design

사용 시점:

디자인 토큰/변수를 확인할 때
테마 시스템을 구현할 때
일관된 스타일 적용이 필요할 때

5. get_code_connect_map

용도: Figma 노드와 코드 컴포넌트 매핑 조회

Figma 디자인 요소가 어떤 코드 컴포넌트에 연결되어 있는지 확인합니다.

지원 파일: Figma Design

사용 시점:

기존 컴포넌트 재사용 가능 여부 확인 시
디자인-코드 연결 상태 파악 시

6. add_code_connect_map

용도: Figma 노드와 코드 컴포넌트 매핑 설정

Figma 디자인 요소와 실제 코드 컴포넌트를 연결합니다.

지원 파일: Figma Design

사용 시점:

컴포넌트 라이브러리 연동 시
디자인 시스템과 코드베이스 동기화 시

7. create_design_system_rules

용도: 디자인 시스템 규칙 파일 생성

에이전트 가이드를 위한 규칙 파일을 생성합니다.

사용 시점:

프로젝트 초기 설정 시
팀 협업 규칙 정의 시

8. get_figjam

용도: FigJam 다이어그램 메타데이터 조회

FigJam 다이어그램을 XML 형식의 메타데이터로 변환합니다.

지원 파일: FigJam

사용 시점:

FigJam 다이어그램 분석 시
플로우차트, 와이어프레임 해석 시

워크플로우 가이드

디자인 → 코드 변환 워크플로우

1. get_design_context 호출
   → 전체 구조, 스타일 파악 + 코드 생성

2. 필요시 get_metadata 호출
   → 특정 요소 상세 정보 확인

3. 생성된 코드를 프로젝트 컨벤션에 맞게 수정

디자인 토큰 기반 구현 워크플로우

1. get_variable_defs 호출
   → 디자인 토큰/변수 확인

2. get_design_context 호출
   → 컨텍스트 파악 + 코드 생성

3. 토큰을 적용하여 코드 최적화

컴포넌트 재사용 확인 워크플로우

1. get_code_connect_map 호출
   → 기존 컴포넌트 매핑 확인

2. 매핑된 컴포넌트가 있으면 재사용
   → 없으면 get_design_context로 새로 생성

디자인 문서화 워크플로우

1. get_screenshot 호출
   → 화면 캡처

2. get_design_context 호출
   → 컴포넌트 정보 수집

3. 문서 작성

레이아웃 검증 워크플로우

1. get_screenshot 호출
   → 원본 디자인 캡처

2. get_design_context 호출
   → 코드 생성 및 구현

3. 구현 결과와 스크린샷 비교 검증

트리거 패턴

이 스킬은 다음과 같은 상황에서 자동 활성화됩니다:

Figma 링크 공유 시
"피그마", "Figma" 언급
"디자인 코드로", "디자인 구현" 요청
"컴포넌트 추출", "에셋 추출" 요청
"스크린샷", "캡처" 요청 (디자인 컨텍스트에서)

베스트 프랙티스

Do's

작업 전 항상 get_design_context로 컨텍스트 파악 및 코드 생성
코드 생성 후 프로젝트 스타일에 맞게 조정
반복되는 패턴은 컴포넌트로 분리
get_variable_defs로 디자인 토큰 활용
get_screenshot으로 레이아웃 정확도 검증

Don'ts

컨텍스트 파악 없이 바로 코드 작성 시도
생성된 코드를 검토 없이 그대로 사용
모든 디자인 요소를 한 번에 처리 시도
디자인 토큰 무시하고 하드코딩

참고 문서

MCP 도구 상세 - 각 도구의 파라미터 및 응답 형식
워크플로우 예시 - 실제 사용 사례
트러블슈팅 - 일반적인 문제 해결