figma-to-component

Name: figma-to-component
Availability: InStock
Author: okgoogle13

Generate React component files from Figma Inspect panel details.

1|Updated Aug 12, 2025

Search Tags:#automation #frontend #react #code generation #figma #component #ui development #design to code

One-click install

npx skills add https://github.com/okgoogle13/careercopilot --skill figma-to-component

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: figma-to-component
Source: https://github.com/okgoogle13/careercopilot/tree/main/.claude/skills/figma-to-component
Command: npx skills add https://github.com/okgoogle13/careercopilot --skill figma-to-component

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Manually translating Figma component designs into React code is tedious and error-prone, leading to discrepancies between design and implementation. This skill automates the generation of React components from Figma's 'Inspect' panel details.

Core Features & Use Cases

Automated Component Generation: Scaffolds a new React component directory and populates its .tsx and .module.css files directly from pasted Figma 'Inspect' details.
CSS & JSX Translation: Translates Figma CSS properties into a .module.css file and creates the corresponding JSX structure, ensuring design fidelity.
Prop Inference: Translates Figma component properties/variants into React props in the interface ...Props, promoting type safety and reusability.
Use Case: When a new UI component is designed in Figma, use this skill to rapidly generate its initial React code, significantly accelerating frontend development and ensuring pixel-perfect implementation.

Quick Start

Create a new React component named 'FigmaButton' in 'src/components/Figma' from the Figma 'Inspect' details I will provide.