skills.rest
ikastner
ikastnerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-to-code

Convert Figma designs into React/Next.js components with TypeScript and Tailwind.

Updated Mar 16, 2026
Search Tags:#react#components#figma#nextjs#tailwind#design-to-code#design-tokens
One-click install
npx skills add https://github.com/ikastner/skills-larockette --skill figma-to-code-ikastner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-to-code
Source: https://github.com/ikastner/skills-larockette/tree/main/10-integration/figma-to-code
Command: npx skills add https://github.com/ikastner/skills-larockette --skill figma-to-code-ikastner

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extrait les designs Figma et les traduit en composants React/Next.js avec TypeScript et Tailwind, accélérant le développement et réduisant les erreurs de traduction manuelle.

Core Features & Use Cases

  • Extraction et conversion des designs Figma en composants React/Next.js typés (TypeScript) avec Tailwind.
  • Mapping clair des sections de la maquette (Navbar, Hero, Features, Testimonials, Pricing, CTA, Contact, Footer) vers des composants réutilisables.
  • Extraction des tokens design (couleurs, typographie, espacements, bordures, ombres) et application via Tailwind pour une cohérence design-system.

Quick Start

Chargez votre maquette Figma et laissez le système générer les composants React/Next.js correspondants.

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 React components with Tailwind?▼

To convert Figma designs to React components, the Skill extracts design tokens and maps maquette sections into typed Next.js or React components styled with Tailwind. It requires a SKILL.md file with YAML frontmatter specifying the name and description.

What is the best way to extract design tokens from Figma for Next.js?▼

Extracting design tokens from Figma involves capturing colors, typography, spacing, borders, and shadows, then applying them via Tailwind. The Skill automates this to ensure design-system consistency across generated React components.

Does this Figma to code workflow support TypeScript and Next.js?▼

Yes, the Figma to code workflow supports TypeScript and Next.js. It translates design files into ready-to-use, typed React components, accelerating frontend development and reducing manual translation errors.

How do I map Figma sections like Hero and Navbar to React components?▼

Mapping Figma sections to React components involves identifying Navbar, Hero, Features, Testimonials, Pricing, CTA, Contact, and Footer areas. The Skill uses component naming conventions to generate corresponding reusable elements.

Can I generate reusable React components from Figma automatically?▼

Yes, you can generate reusable React components from Figma automatically. By loading your Figma maquette, the system applies component mapping and Tailwind styling to output ready-to-use Next.js elements.

What are the limitations of converting Figma designs to Tailwind components?▼

The main limitation of converting Figma designs to Tailwind components is the strict dependency on predefined section mapping like Navbar and Hero. Complex custom layouts outside standard design tokens may require manual adjustments.

Related Skills

Explore More Design & Creative Skills→
lalaABClalaABC

figma-create-design-system-rules

Generates Markdown-based design system rules for Figma-driven codebases.

Community
Advanced
congthang12312congthang12312

ui-styling

Integrate accessible shadcn/ui components with Tailwind tokens into React apps.

Community
Advanced
somachaksomachak

modern-css-architecture

Standardize design tokens and component styling patterns for Tailwind-based React projects.

Community
Intermediate
takumi12311123takumi12311123
1

frontend-design

Translate Figma designs into React components with TypeScript and Tailwind CSS.

Community
Advanced