skills.rest
okgoogle13
okgoogle13COMMUNITY
Explore all skills by this author →
GitHub

figma-to-page

Convert Figma Inspect details into React page TSX and CSS files.

1|Updated Aug 12, 2025
Search Tags:#automation#frontend#react#code generation#figma#ui development#design to code#page scaffolding
One-click install
npx skills add https://github.com/okgoogle13/careercopilot --skill figma-to-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-to-page
Source: https://github.com/okgoogle13/careercopilot/tree/main/.claude/skills/figma-to-page
Command: npx skills add https://github.com/okgoogle13/careercopilot --skill figma-to-page

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Translating Figma designs into functional React code is a manual, time-consuming process prone to errors. This skill automates the generation of a full React page from Figma's 'Inspect' panel details, bridging the gap between design and development.

Core Features & Use Cases

  • Automated Page Generation: Scaffolds a complete React page 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.
  • Integrated Scaffolding: Leverages the react-page-scaffolder skill to create the initial page structure, then intelligently fills it with Figma-derived code.
  • Use Case: When a new page design is finalized in Figma, use this skill to rapidly generate the initial React code, significantly accelerating frontend development and reducing manual translation errors.

Quick Start

Create a new React page named 'UserProfile' from the Figma 'Inspect' details I will provide.

Frequently Asked Questions about figma-to-page

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

FAQPage Schema
How do I convert a Figma design into React code?▼

Convert Figma designs into React code by copying the Inspect panel details, providing a page name, and running this Skill to automatically generate a complete page directory with TSX and CSS files that match your design.

Can I generate a React page directly from Figma without manual coding?▼

Yes. Paste your Figma Inspect data and specify a page name to automatically scaffold the full React page structure, JSX components, and styled CSS modules without writing code manually.

What does the Skill do with Figma CSS properties?▼

The Skill translates Figma CSS properties into a .module.css file and creates matching JSX structure, preserving design fidelity while generating production-ready styled components.

Does this work with existing React page scaffolding?▼

Yes. The Skill leverages react-page-scaffolder to create the initial page structure, then fills it with Figma-derived JSX and CSS, integrating seamlessly into your existing page directory.

What's the fastest way to get a new React page from a Figma design?▼

Copy Inspect details from Figma, provide a PascalCase page name, and let the Skill generate the complete page directory with TSX, CSS, and linting applied automatically in seconds.

Can I use this Skill if my design isn't finalized in Figma yet?▼

This Skill works best once your Figma design is finalized and ready to inspect. Complete your design first, then use the Inspect panel data to generate accurate React code.

Related Skills

CodeGeneration-2020CodeGeneration-2020
1

cgs.qa.visual

Analyze rendered UI screenshots against Figma frames to detail visual discrepancies.

Community
Advanced
cadalt0cadalt0

website/app

Create responsive React web interfaces with reusable CSS-styled components.

Community
Basic
ookamiincookamiinc
1

ookami-coding-style-web

Codify frontend coding conventions for React projects using ES2015+, CSS Modules, and Prettier.

Official
Intermediate
riethmayerriethmayer
2

visual-verdict

Compare generated UI screenshots against reference images and output a JSON verdict.

Community
Advanced