skills.rest
nroze22
nroze22COMMUNITY
Explore all skills by this author →
GitHub

figma-to-code

Convert Figma designs into React/TypeScript components with Tailwind CSS and Storybook stories.

1|1|Updated Feb 24, 2026
Search Tags:#typescript#react#design system#figma#tailwind css#component generation#storybook
One-click install
npx skills add https://github.com/nroze22/TalosixSkills --skill figma-to-code-nroze22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-to-code
Source: https://github.com/nroze22/TalosixSkills/tree/main/.claude/skills/figma-to-code
Command: npx skills add https://github.com/nroze22/TalosixSkills --skill figma-to-code-nroze22

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill bridges the gap between design and development by automatically converting Figma designs into production-ready React and TypeScript components, complete with Tailwind CSS styling and Storybook stories.

Core Features & Use Cases

  • Automated Component Generation: Converts Figma designs into functional React/TypeScript code.
  • Design Token Extraction: Maps Figma styles (colors, typography, spacing) to design tokens.
  • Accessibility Integration: Incorporates ARIA attributes and semantic HTML.
  • Talosix EDC Conventions: Adheres to specific patterns for clinical trial EDC applications.
  • Storybook Integration: Generates Storybook stories for each component.
  • Use Case: A designer creates a new UI element in Figma. This Skill takes the Figma URL and generates the corresponding React component, its TypeScript types, and a Storybook story, ready for developers to integrate.

Quick Start

Use the figma-to-code skill to convert the Figma design at the provided URL into React components.

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 TypeScript components?▼

Figma to React TypeScript component conversion works by analyzing design data via the Figma MCP server, extracting design tokens, and generating production-ready components styled with Tailwind CSS. It outputs functional code complete with TypeScript types and Storybook stories.

Does Figma to React component generation include Tailwind CSS and Storybook?▼

Yes, Figma to React component generation includes Tailwind CSS and Storybook. The process extracts Figma styles into design tokens to apply Tailwind CSS styling, and automatically generates a Storybook story for each created React component.

How are design tokens extracted when converting Figma to code?▼

When converting Figma to code, design tokens are extracted by mapping Figma styles directly to code tokens. This process captures colors, typography, and spacing from the Figma design data to ensure the generated React components match the original visual specifications.

Can I generate accessible React components from a Figma URL?▼

Yes, you can generate accessible React components from a Figma URL. The component generation process incorporates ARIA attributes and semantic HTML directly into the code, ensuring the resulting React and TypeScript components meet accessibility standards.

What are the limitations of automated Figma to React component generation?▼

A limitation of automated Figma to React component generation is that it adheres strictly to Talosix EDC conventions, meaning the output patterns are specialized for clinical trial EDC applications. Complex custom design systems may require manual adjustment to fit these specific conventions.

Related Skills

Explore More Design & Creative Skills→
wiltaylorwiltaylor

figma-implement-design

Convert Figma design files into application code with design tokens.

Community
Advanced
alekspetrovalekspetrov
196

visual-regression

Automate visual-regression testing setup for Storybook components with CI workflows.

Community
Advanced
algusaemalgusaem

tailwind-design-system

Build Tailwind CSS design systems with semantic tokens and CVA-based components.

Community
Intermediate
nesnilnehcnesnilnehc
7

review-vue

Identify Vue 3 framework convention issues in code scopes.

Community
Intermediate