bernaferrari/FigmaToCode

어떤 프로젝트인가요?

핵심 기능

• 01Figma 선택 항목을 HTML, React, Svelte, styled-components, Tailwind, Flutter, SwiftUI 코드로 생성합니다.
• 02Auto Layout, 중첩 프레임, 정렬, 절대 위치 지정이 혼합된 레이아웃을 변환합니다.
• 03선택적으로 클래스 접두사를 지정해 Tailwind 3 및 Tailwind 4 코드를 출력합니다.
• 04Figma 색상 변수를 사용하고 HTML 출력에서는 이미지를 Base64로 삽입합니다.
• 05실시간 미리보기와 코드로 깔끔하게 변환되지 않는 요소에 대한 경고를 표시합니다.
• 06로컬 에셋을 포함한 Vite, Next.js, Flutter 또는 SwiftUI 스타터 프로젝트를 내보냅니다.

활용 사례

• 완성된 Figma 컴포넌트를 개발자에게 전달해 초기 구현의 기반으로 활용합니다.
• 페이지 일부를 Tailwind 또는 React로 프로토타이핑한 뒤 애플리케이션 로직을 연결합니다.
• 기존 모바일 디자인을 바탕으로 Flutter 또는 SwiftUI의 시작점을 만듭니다.
• 디자인 파일을 외부 AI 또는 클라우드 서비스로 보낼 수 없는 환경에서 작업합니다.

빠른 시작

1. 1

   Figma Community에서 무료 플러그인을 설치하세요

2. 2

   Figma에서 프레임, 컴포넌트, 그룹 또는 레이어를 선택하고 플러그인을 실행한 다음 대상 형식을 선택하세요

사용 전 알아둘 점

• !Figma가 필요합니다. 이 플러그인은 Figma의 플러그인 환경 내에서만 작동합니다.
• !생성된 코드는 시각적 뼈대이며, 의미 구조, 접근성, 애플리케이션 로직에 대한 사람의 검토가 필요합니다.
• !라이선스는 GPL-3.0이며, 카피레프트 라이선스로서 파생 코드의 배포 방식에 영향을 줍니다.

포함된 컬렉션

토픽

자주 묻는 질문

FigmaToCode은(는) 무엇인가요?

선택한 디자인을 편집 가능한 HTML, React, Svelte, Tailwind, Flutter 또는 SwiftUI 코드로 변환하는 로컬 실행 Figma 플러그인입니다. Figma to Code는 선택한 프레임, 컴포넌트, 그룹 또는 레이어를 웹 및 네이티브 대상용 스타터 코드로 변환하는 Figma 플러그인입니다. HTML, React (JSX), Svelte, styled-components, Tailwind CSS (Tailwind 3 및 4 문법), Flutter 위젯, SwiftUI 뷰를 출력할 수 있습니다. 생성된 코드와 로컬 이미지 에셋을 Vite, Next.js, Flutter 또는 SwiftUI 설정과 같은 간단한 스타터 프로젝트로 묶을 수도 있습니다.

FigmaToCode은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

FigmaToCode은(는) GPL-3.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

FigmaToCode은(는) 아직 유지보수되고 있나요?

6개월 이내 업데이트. FigmaToCode의 마지막 커밋은 2026년 8월 5일입니다.

FigmaToCode은(는) 어디에 사용할 수 있나요?

완성된 Figma 컴포넌트를 개발자에게 전달해 초기 구현의 기반으로 활용합니다. 페이지 일부를 Tailwind 또는 React로 프로토타이핑한 뒤 애플리케이션 로직을 연결합니다. 기존 모바일 디자인을 바탕으로 Flutter 또는 SwiftUI의 시작점을 만듭니다. 디자인 파일을 외부 AI 또는 클라우드 서비스로 보낼 수 없는 환경에서 작업합니다.

FigmaToCode는 어떻게 설치하나요?

Figma Community에서 무료 플러그인을 설치하세요 Figma에서 프레임, 컴포넌트, 그룹 또는 레이어를 선택하고 플러그인을 실행한 다음 대상 형식을 선택하세요

FigmaToCode은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/bernaferrari/FigmaToCode