Skills
.Work. You
Rest

figma-to-code

Official

Figma to code, pixel-perfect and fast.

Design & Creative#automation#frontend#design system#UI implementation#Figma#design to code#visual parity
AuthorCodeTonight-SA
Version1.0.0
Installs0

System Documentation

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."

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: figma-to-code
Download link: https://github.com/CodeTonight-SA/claude-optim/archive/main.zip#figma-to-code

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository