skills.rest
alpoxdev
alpoxdevCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-to-code

Convert Figma designs into React components and Tailwind v4 CSS tokens.

3|Updated Nov 30, 2025
Search Tags:#figma#pixel-perfect#responsive-design#design-to-code#figma-mcp#tailwind-v4
One-click install
npx skills add https://github.com/alpoxdev/claude-code --skill figma-to-code-alpoxdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-to-code
Source: https://github.com/alpoxdev/claude-code/tree/main/.claude/skills/figma-to-code
Command: npx skills add https://github.com/alpoxdev/claude-code --skill figma-to-code-alpoxdev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Figma 디자인을 코드로 100% 정확하게 변환하기 어렵고 시간이 많이 걸리는 문제를 해결합니다.

Core Features & Use Cases

  • Pixel-perfect 변환: Auto Layout를 React/Flexbox로 정확히 매핑
  • 디자인 토큰 추출: MCP를 통해 색상, 간격, 타이포그래피를 @theme으로 변환
  • 에셋 관리: WebP로 압축 및 폴더 구조화된 자원 생성
  • 디자인 시스템 코드화: 토큰과 컴포넌트의 재사용 가능한 코드 생성
  • Use Case: 대규모 디자인 시스템을 Figma에서 코드로 자동생성

Quick Start

간단히 시작하려면 Figma 파일을 업로드하고 이 스킬을 호출하여 React 컴포넌트와 Tailwind 토큰을 생성합니다.

Frequently Asked Questions about figma-to-code

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert Figma designs to pixel-perfect React components?▼

To convert Figma designs to pixel-perfect React components, this skill uses MCP data extraction to map Auto Layout directly to Flexbox and Grid, generating precise pixel values for all UI outputs.

How does extracting design tokens from Figma to Tailwind v4 work?▼

Extracting design tokens from Figma to Tailwind v4 works by pulling colors, spacing, and typography via MCP and mapping them directly into the Tailwind @theme configuration for reusable styling.

Can I generate responsive system assets from Figma using MCP?▼

Yes, you can generate responsive system assets from Figma using MCP by extracting images and compressing them into WebP format while maintaining a structured folder hierarchy for your codebase.

What is the best way to translate a Figma design system into code?▼

The best way to translate a Figma design system into code is to extract reusable design tokens and components simultaneously, mapping them to Tailwind v4 and React for production-ready output.

Do I need Figma MCP to map Auto Layout to Flexbox?▼

Yes, Figma MCP is required to accurately extract layout data and enforce the precise mapping of Figma Auto Layout to CSS Flexbox and Grid structures for pixel-perfect results.

Related Skills

Explore More Design & Creative Skills→
maplin-comaplin-co

figma

Fetch Figma design data and download SVG and PNG assets via MCP server.

Official
Intermediate
calesthiocalesthio
46.2k

tailwind-design-system

Build Tailwind CSS v4 design systems with @theme tokens and CVA variants.

Community
Advanced
RodrigoTomeESRodrigoTomeES
12

tailwind-design-system

Standardize Tailwind CSS v4 design systems with CSS-first semantic tokens and reusable variants.

Community
Advanced
tankpkgtankpkg
1

@tank/figma-to-code

Translate Figma designs into CSS and component structures.

Official
Advanced