FigmaToCode

개요

FigmaToCode (by bernaferrari)는 Figma 디자인을 여러 프레임워크의 반응형 프로덕션 코드로 변환하는 오픈소스 Figma 플러그인. 무료·로컬 실행·모바일 프레임워크 지원이 차별점. 디자인이 외부 서버로 전송되지 않고 Figma 내부에서 동작.

GitHub: https://github.com/bernaferrari/FigmaToCode
Stars: ~4,890 / Forks: ~476
언어: TypeScript
라이선스: GPL-3.0
Figma Community: https://figma.com/community/plugin/842128343887142055

지원 출력 포맷

카테고리	포맷
웹 마크업	HTML / CSS
웹 유틸리티	Tailwind CSS
웹 프레임워크	React (JSX), Svelte, styled-components
모바일	Flutter (Dart), SwiftUI (Swift) ⭐
이메일	Email-compatible HTML (최근 추가)
템플릿	Twig (최근 추가)

→ 한 디자인에서 여러 플랫폼 코드 동시 생성 가능

차별점: 다른 도구와 비교

도구	라이선스	출력	차별점
FigmaToCode ⭐	GPL-3.0 무료	Web + Flutter/SwiftUI	유일하게 모바일 네이티브 지원, 무료 로컬 실행
Anima	상용 (freemium)	HTML, React, Vue	다듬어진 React 컴포넌트, 사용자 ~140만
Locofy.ai	상용 (freemium)	React, Next, Vue, RN	AI 기반, 재사용 컴포넌트 props 자동
Builder.io / Visual Copilot	상용	React, Vue, Svelte, Angular, Qwik	AI 기반, Builder CMS 통합
Vercel v0	상용 AI	React + Tailwind	프롬프트 기반 (Figma-first 아님)

핵심 강점: 무료 + 오픈소스 + 로컬 실행 + 모바일 지원 (다른 모든 도구가 못 하는 조합)

동작 원리: 4단계 IR 파이프라인

1. Figma 네이티브 노드 → JSON 변환
   (속성 보존, 부모 참조 추가)

2. JSON → AltNodes (커스텀 가상 표현)
   (프레임워크 독립적 중간 표현)

3. 레이아웃 최적화·분석
   - auto-layout 패턴 감지
   - 반응형 제약 조건 추론
   - z-order 정렬

4. 프레임워크별 코드 생성기로 emit
   (HTML, Tailwind, Flutter, SwiftUI 등)

이 IR(Intermediate Representation) 구조 덕에 새 프레임워크 추가가 용이.

주요 기능

단일 디자인 → 멀티 프레임워크

같은 컴포넌트를 Tailwind·Flutter·SwiftUI로 동시 export

반응형 출력

Auto-layout 인식
Constraints 기반 반응형 변환

컴포넌트화

페이지 전체 OR 개별 컴포넌트 선택
For-loop·재사용 패턴 인식

디자인 시스템 호환

컬러 변수 지원 (테마 일관성)
그라디언트·그림자 처리 (multi-shadow 리팩터 완료)
부모-자식 관계 + z-index 보존
커스텀 Tailwind 폰트 패밀리 설정 지원

Tailwind 출력 예시

// FigmaToCode가 생성하는 React + Tailwind 코드
<div className="flex flex-col items-center gap-4 p-6 bg-white rounded-lg shadow-md">
  <h2 className="text-2xl font-bold text-gray-900">제목</h2>
  <p className="text-base text-gray-600">설명 텍스트</p>
  <button className="px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    버튼
  </button>
</div>

Flutter 출력 예시

Container(
  padding: EdgeInsets.all(24),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
    boxShadow: [BoxShadow(blurRadius: 4, color: Colors.black12)],
  ),
  child: Column(
    children: [
      Text("제목", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
      Text("설명 텍스트", style: TextStyle(fontSize: 16, color: Colors.grey)),
      ElevatedButton(onPressed: () {}, child: Text("버튼")),
    ],
  ),
)

SwiftUI 출력 예시

VStack(spacing: 16) {
    Text("제목")
        .font(.title)
        .fontWeight(.bold)
    Text("설명 텍스트")
        .font(.body)
        .foregroundColor(.gray)
    Button("버튼") { }
        .buttonStyle(.borderedProminent)
}
.padding(24)
.background(Color.white)
.cornerRadius(8)
.shadow(radius: 4)

설치 & 사용

일반 사용자

1. Figma → Plugins → "Figma to Code" 검색
   또는 https://figma.com/community/plugin/842128343887142055
2. 프레임/컴포넌트 선택
3. 플러그인 실행
4. 프레임워크 선택 (Tailwind / Flutter / SwiftUI 등)
5. 생성된 코드 복사

개발자 (셀프 빌드)

# 모노레포 (pnpm + Turborepo)
git clone https://github.com/bernaferrari/FigmaToCode
cd FigmaToCode
pnpm install
 
# 개발 모드 (디버그 UI: localhost:3000)
pnpm dev
 
# 프로덕션 빌드
pnpm build
 
# 린트
pnpm lint

주요 패키지:

packages/backend — 변환 로직
packages/plugin-ui — Figma 플러그인 UI

최근 업데이트

날짜	변경
2026-02-04	변수 컬러에 opacity 모디파이어 적용 안 함
2026-01-03	styled-components 명명 규칙 수정
2026-01-03	htmlShadow 다중 그림자 처리 리팩터
2025-12-23	JSX html-entities & 중괄호 호환성 개선
2025-12-22	이메일 생성 패널 신규
2025-11-28	Twig 컴포넌트 지원 추가
2025-11-28	Tailwind 커스텀 폰트 패밀리 지원

한계

벡터·래스터 이미지·일부 도형(line, star, polygon)은 부분 지원
매우 복잡한 핸드 튠 디자인은 정리 필요
AI 기반 도구(Locofy 등) 대비 “스마트한 컴포넌트화” 부족
출력 코드를 그대로 프로덕션에 쓰기보다 참고/시작점으로 활용 권장

활용 시나리오

시나리오	추천
무료로 시작	FigmaToCode (유료 도구 대비)
모바일 앱 프로토타이핑	FigmaToCode (Flutter/SwiftUI 유일)
디자인 시스템 검증	Tailwind/styled-components 출력으로 즉시 확인
이메일 템플릿	신규 이메일 패널 활용
AI 기반 자동화 필요	Locofy/Anima/v0
CMS 통합 필요	Builder.io

Bigstones

Explorer