skills.rest
Bangjjack
BangjjackOFFICIAL
Explore all skills by this author →
GitHub

figma-to-component

Convert Figma frames into React and TypeScript components using CVA and Radix patterns.

1|Updated Apr 6, 2026
Search Tags:#typescript#react#figma#tokens#design-to-code#cva#radix
One-click install
npx skills add https://github.com/Bangjjack/Bangjjack-Frontend --skill figma-to-component-bangjjack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-to-component
Source: https://github.com/Bangjjack/Bangjjack-Frontend/tree/main/.cursor/skills/figma-to-component
Command: npx skills add https://github.com/Bangjjack/Bangjjack-Frontend --skill figma-to-component-bangjjack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts Figma frames (URL or screenshot) into React + TypeScript components using CVA, Radix/shadcn patterns, and tokens from src/index.css. Use when the user shares a Figma link, a design screenshot, or asks to implement or match a Figma screen or component.

Core Features & Use Cases

  • Provides a design-to-component workflow that mirrors Figma structure in the DOM, with token mapping and UI patterns.
  • Guides mapping of typography, spacing, tokens, and component hierarchy to existing design system conventions (CVA, Radix/shadcn).
  • Examples include turning a Figma frame into a reusable React component with consistent styling and accessibility.

Quick Start

Provide a Figma URL or screenshot and the skill will generate a React + TypeScript component.

Frequently Asked Questions about figma-to-component

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

FAQPage Schema
How do I convert a Figma design to React components?▼

To convert Figma designs to React components, provide a Figma frame URL or screenshot. The system generates React and TypeScript components using CVA and Radix/shadcn patterns, mapping design specs to DOM structure and tokens.

What is the best way to map Figma tokens to Tailwind CSS?▼

Mapping Figma tokens to Tailwind CSS relies on predefined tokens in your project's src/index.css file. The conversion process reads these existing tokens to ensure generated components maintain consistent styling conventions.

Do I need Tailwind tokens in src/index.css to use this design-to-code workflow?▼

Yes, you need Tailwind tokens defined in src/index.css to use this design-to-code workflow. The system requires existing tokens and UI patterns to map Figma design specifications into consistent React component styling.

Can I use Figma screenshots to generate TypeScript components?▼

Yes, you can use Figma screenshots to generate TypeScript components. The system accepts either a Figma URL or a design screenshot to implement matching React components with accessibility considerations.

How does CVA integrate with Radix UI patterns when converting Figma frames?▼

CVA integrates with Radix UI patterns by applying existing component variants and accessibility structures during Figma frame conversion. This ensures generated React components reuse established design system conventions and DOM hierarchy.

What limitations exist when matching Figma screens to existing UI patterns?▼

A key limitation when matching Figma screens is the strict dependency on pre-existing Tailwind tokens in src/index.css. Without established UI patterns and token definitions, the system cannot accurately map design specifications to code.

Related Skills

Explore More Software Engineering Skills→
hotriluanhotriluan
3

ui-styling

Automate UI styling and component assembly for React apps with shadcn/ui and Tailwind CSS.

Community
Intermediate
solrac97grsolrac97gr
2

new-context

Generate React Context, Provider, and useReducer components with TypeScript unit tests.

Community
Intermediate
datamonsterrdatamonsterr

radix-ui-design-system

Build accessible design systems with Radix UI primitives in React.

Community
Advanced
johnlindquistjohnlindquist
24

figma

Extract design tokens, components, and styles from Figma files.

Community
Intermediate