skills.rest
bitovi
bitoviOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma-implement-component

Translate analyzed Figma designs into React components with Storybook stories and Code Connect mapping.

1|6|Updated Dec 22, 2025
Search Tags:#react#figma#component#storybook#design-to-code#code-connect#modlet
One-click install
npx skills add https://github.com/bitovi/carton-case-management --skill figma-implement-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-implement-component
Source: https://github.com/bitovi/carton-case-management/tree/main/.github/skills/figma-implement-component
Command: npx skills add https://github.com/bitovi/carton-case-management --skill figma-implement-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translates analyzed Figma designs into production-ready React components, reducing manual interpretation and hand-coding work.

Core Features & Use Cases

  • Verifies design analysis exists and triggers modlet generation; builds a complete component modlet with proper README, one or more Storybook stories, and a Code Connect mapping.
  • Implements the component to match Figma visuals, variants, and props; applies the project’s styling and accessibility patterns.
  • Creates Storybook stories for every Figma variant and provides a README with design context and mapping rationale.

Quick Start

Provide the Figma URL and run the figma-implement-component skill after figma-design-react has produced design-context.md and proposed-api.md to generate a ready-to-use component modlet.

Frequently Asked Questions about figma-implement-component

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

FAQPage Schema
How do I turn Figma designs into React components?▼

To turn Figma designs into React components, you provide a Figma URL and the workflow translates the analyzed design into a production-ready component modlet with Storybook stories and a Code Connect mapping.

What do I need to generate a React component from a Figma design?▼

Generating a React component from a Figma design requires design-context.md and proposed-api.md files to exist under .temp/design-components/{component-name}/, produced by the figma-design-react workflow.

How do I create Storybook stories for every Figma variant in React?▼

Creating Storybook stories for every Figma variant happens automatically during component generation, mapping Figma visuals and props to individual story files alongside a README explaining the design context and mapping rationale.

Can I map Figma variants to React props using Code Connect?▼

Yes, you can map Figma variants to React props using Code Connect. The implementation builds the Code Connect mapping to ensure the generated component matches Figma visuals, variants, and props accurately.

Does the generated React component include styling and accessibility patterns?▼

Yes, the generated React component includes styling and accessibility patterns. The workflow applies the project's existing styling and accessibility patterns to the component to ensure it matches the Figma visuals.

What is a component modlet and how does it structure React code?▼

A component modlet is a structured React component output that includes the component implementation, a README with design context, Storybook stories for all variants, and a Code Connect mapping for Figma integration.

Related Skills

Explore More Software Engineering Skills→
bitovibitovi
1

figma-design-react

Analyze Figma designs to generate React component and prop API specifications.

Official
Advanced
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate
coinbasecoinbase
493

figma.create-connect

Generate Figma Code Connect mapping files for React components.

Official
Intermediate
ahandselahandsel
1

figma-code-connect

Generate Figma Code Connect .figma.ts template files from Figma URLs.

Community
Advanced