skills.rest
CodeTonight-SA
CodeTonight-SAOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma-to-code

Translate Figma designs into React code with visual parity.

Updated Aug 23, 2026
Search Tags:#automation#frontend#design system#UI implementation#Figma#design to code#visual parity
One-click install
npx skills add https://github.com/CodeTonight-SA/claude-optim --skill figma-to-code-codetonight-sa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-to-code
Source: https://github.com/CodeTonight-SA/claude-optim/tree/main/skills/figma-to-code
Command: npx skills add https://github.com/CodeTonight-SA/claude-optim --skill figma-to-code-codetonight-sa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manually translating Figma designs into production-ready code is often slow, prone to visual discrepancies, and inefficient. This skill streamlines the design-to-code handoff, ensuring 1:1 visual parity and adherence to project conventions.

Core Features & Use Cases

  • Structured Design Data Fetching: Uses get_design_context to retrieve a structured representation of Figma nodes, not just screenshots.
  • Visual Parity & Asset Management: Fetches screenshots for visual reference and downloads necessary assets directly from Figma.
  • Design System Adherence: Guides the translation to reuse existing components and adhere to the project's color system, typography, and spacing tokens.
  • Use Case: You need to implement a new UI component or a complete page based on a Figma design, ensuring it matches the design exactly.

Quick Start

"Implement the user profile component from the attached Figma file." "Translate the login form design from Figma into React code."