04-FigmaMCP

피그마 MCP 활용 Design to HTML 가이드

1. 피그마 MCP 주요 명령어 정리

MCP 환경에서 디자인 데이터를 분석하고 추출할 때 사용하는 핵심 명령어이다.

명령어 (Command)	기능 설명	활용 사례
get_file	피그마 파일의 전체 구조(JSON) 호출	전체 레이아웃 및 노드 ID 파악
get_file_nodes	특정 노드(프레임, 컴포넌트) 상세 정보 추출	특정 요소의 CSS 속성 분석 및 코드화
get_image	노드를 이미지(PNG, SVG 등)로 렌더링	아이콘, 로고 등 그래픽 자산 추출
get_file_styles	문서 내 정의된 스타일(색상, 텍스트) 조회	CSS 공통 변수(Design Tokens) 생성
get_file_components	사용된 컴포넌트 라이브러리 목록 확인	공통 UI 컴포넌트 구조 파악

---

2. 단계별 생성 프롬프트

STEP 1: 디자인 분석 (Analysis)

“Figma MCP를 통해 [피그마 파일 URL]의 [특정 프레임 이름] 디자인을 분석해라. 해당 디자인의 레이아웃 구조, 사용된 색상(Hex code), 폰트 크기 및 간격 정보를 추출한다.”

STEP 2: 코드 구현 (HTML/CSS)

“추출된 데이터를 바탕으로 HTML/CSS 코드를 작성해라. 다음 지시 사항을 준수한다:

• HTML: 시맨틱 태그를 사용한다.
• CSS: Flexbox를 사용하여 레이아웃을 구현하고 디자인 토큰을 변수로 정의한다.
• 반응형: 모바일 우선(Mobile-first) 방식으로 작성한다.”

STEP 3: 최적화 및 리팩토링 (Refactoring)

“초보자가 이해하기 쉽게 코드를 최적화해라. CSS 클래스 명은 BEM 방법론을 적용하고, 주요 섹션마다 설명 주석을 추가한다. 외부 라이브러리 없이 순수 CSS로 구현한다.”

---

3. 프론트엔드 강의 활용 팁

• 노드 ID 매핑: get_file을 통해 얻은 Node ID가 실제 HTML의 DOM 구조와 어떻게 매칭되는지 설명한다.
• 수치 데이터 시각화: absoluteBoundingBox의 좌표와 크기 데이터를 CSS의 width, height로 변환하는 과정을 실습한다.

피그마 MCP 활용 Design to HTML 가이드

1. 피그마 MCP 주요 명령어 및 프롬프트 정리

MCP 환경에서 디자인 데이터를 분석하고 코드로 변환할 때 사용하는 핵심 명령어이다.

명령어 분류	프롬프트 예시 (/)	주요 목적
디자인 분석	/figma get-file [URL]	피그마 파일의 전체 구조 및 메타데이터 호출
요소 추출	/figma get-nodes [ID]	특정 프레임, 버튼, 아이콘 등 개별 요소 정보 추출
스타일 확인	/figma get-styles	디자인에 정의된 색상, 타이포그래피, 효과 정보 확인
이미지 변환	/figma get-image [ID]	특정 노드를 PNG/SVG 등 이미지 파일로 변환
코드 생성	/generate HTML/CSS from [ID]	선택한 노드를 시맨틱 HTML과 CSS로 즉시 변환
반응형 변환	/convert to responsive	정적 디자인을 미디어 쿼리가 포함된 유동 레이아웃으로 변경

2. 상세 기능 설명

• get_file_nodes: 특정 노드(프레임, 컴포넌트)의 상세 정보를 추출하여 CSS 속성을 분석한다.
• get_file_components: 파일 내 사용된 컴포넌트 라이브러리 목록을 확인하여 공통 UI 구조를 파악한다.
• get_comments: 디자인 파일의 주석을 확인하여 수정 사항 및 협업 히스토리를 파악한다.

3. 단계별 실행 프롬프트

STEP 1: 디자인 분석 (Analysis)

“Figma MCP를 통해 디자인을 분석해라. 레이아웃 구조, 사용된 색상(Hex code), 폰트 크기 및 간격 정보를 추출한다.”

STEP 2: 코드 구현 (HTML/CSS)

“추출된 데이터를 바탕으로 HTML/CSS 코드를 작성해라. 시맨틱 태그 사용, Flexbox 레이아웃 적용, 디자인 토큰의 변수화를 준수한다.”

STEP 3: 최적화 및 리팩토링 (Refactoring)

“초보자가 이해하기 쉽게 코드를 최적화해라. BEM 방법론 적용 및 주요 섹션에 주석을 추가한다.”

---

4. 프론트엔드 강의 활용 팁

• 노드 ID 매핑: get_file을 통해 얻은 Node ID가 실제 HTML의 DOM 구조와 어떻게 매칭되는지 설명한다.
• 수치 데이터 시각화: 피그마의 좌표와 크기 데이터를 CSS 속성으로 변환하는 과정을 실습한다.