Figma to Code 설치

01. 설치 — Figma to Code

Figma to Code (bernaferrari/FigmaToCode)는 Figma 플러그인 형태로 동작하는 오픈소스 코드 변환 도구입니다. MCP가 아닌 Figma 플러그인 UI 안에서 동작하며, 선택한 노드를 즉시 다양한 프레임워크/언어 코드로 변환해줍니다.

•

HTML + Tailwind CSS

•

HTML + 일반 CSS

•

React (Tailwind / inline / CSS Modules)

•

Flutter (Dart)

•

SwiftUI

•

Compose (Jetpack)

Figma Desktop App 또는 웹 → 좌측 메뉴 → Plugins → Manage plugins

검색: Figma to Code

작성자: Bernardo Ferrari

Install 클릭

git clone <https://github.com/bernaferrari/FigmaToCode.git>
cd FigmaToCode
npm install
npm run build
PowerShell
복사

Figma Desktop App:

메뉴 → Plugins → Development → Import plugin from manifest

FigmaToCode/packages/plugin-ui/manifest.json 선택

플러그인 목록에 추가됨

•

웹: https://www.figma.com/community/plugin/842128343887142055

•

또는 GitHub README 링크 참조

Figma에서 변환할 노드(Frame/Component) 선택

Plugins → Figma to Code 실행

플러그인 패널에서:

•

출력 프레임워크 선택 (Tailwind / Flutter / SwiftUI 등)

•

옵션 조정 (반응형, JSX/HTML, 컴포넌트 분리 여부 등)

우측에서 코드 미리보기 + Copy 버튼

•

Tailwind

◦

JSX 모드 / HTML 모드

◦

Color: 가까운 Tailwind 색상으로 매핑 / Custom color

•

Flutter

◦

Material / Cupertino

◦

Stateless / Stateful

•

SwiftUI

◦

iOS 16+ API 사용 여부

증상	원인 / 해결
코드가 비어있음	노드 미선택 / 빈 그룹 선택
너무 많은 div 중첩	Auto Layout 미적용 → Figma에서 정리 후 재시도
색상이 이상함	Tailwind 매핑 오차 → Custom Color 모드로 전환
플러그인 멈춤	너무 큰 프레임 → 작은 단위로 분리

•

AI 없이 빠른 코드 초안 필요할 때

•

Flutter / SwiftUI 등 비-React 환경

•

오프라인 / 사내망 제한 환경 (외부 LLM 호출 불가)

•

AI 기반 변환 결과의 검증/대조용