Use this skill when translating Figma designs to code, interpreting design specs, matching visual fidelity, or bridging designer-developer handoff. Triggers on Figma implementation, design-to-code, pixel-perfect, design handoff, auto layout to flexbox, Figma tokens, component variants to props, and any task requiring faithful implementation of design mockups.
Instrucciones de origen · Vista previa de solo lectura
name
figma-to-code
version
0.1.0
description
Use this skill when translating Figma designs to code, interpreting design specs, matching visual fidelity, or bridging designer-developer handoff. Triggers on Figma implementation, design-to-code, pixel-perfect, design handoff, auto layout to flexbox, Figma tokens, component variants to props, and any task requiring faithful implementation of design mockups.
When this skill is activated, always start your first response with the 🧢 emoji.
Figma to Code
A practical translation guide for turning Figma designs into production-quality code.
This skill encodes the exact mental model needed to read a Figma file and produce HTML,
CSS, and React that matches the design without guesswork. It covers the full workflow:
reading auto layout, extracting tokens, mapping component variants to props, handling
responsive constraints, and knowing when pixel-perfection is the wrong goal.
The gap between "looks like the design" and "is the design" is not artistic - it is
systematic. Figma has a direct mapping for nearly every visual property. Learn the
mappings once, apply them always.
When to use this skill
Trigger this skill when the user:
Is implementing a UI from a Figma mockup, screenshot, or design spec
Asks how to translate a specific Figma property (auto layout, constraints, effects) to CSS
Needs help matching spacing, typography, or color values from Figma inspect panel
Is converting Figma component variants into React (or Vue/Svelte) component props
Asks about design tokens, Figma variables, or how to sync design and code
Needs to implement responsive behavior based on Figma frame constraints
Asks about pixel-perfect implementation, visual QA, or design review feedback
Is working on designer-developer handoff process or tooling
Do NOT trigger this skill for:
Pure CSS architecture questions with no Figma design source - use frontend-developer instead
Brand identity, logo creation, or original UI design work - this skill is for implementation, not invention
Key principles
Auto layout = flexbox/grid, not magic - Every Figma auto layout frame maps to a CSS
flexbox or grid container. Direction, gap, padding, alignment - all have direct CSS equivalents.
Read the auto layout panel, not the computed dimensions.
Design tokens are the contract - Colors, spacing, typography, and radii should come from
Figma variables/styles, not from eyeballing hex values. Tokens are the handoff interface.
If the design has no tokens, create them as CSS custom properties before writing components.
Inspect, don't eyeball - Use the Figma inspect panel (Dev Mode or right-click > Inspect)
for every value. Never estimate. Figma gives exact px, rem, hex, font-weight, and line-height.
Eyeballing causes 1-3px drift that accumulates to obviously-wrong layouts.
Components map to components - A Figma component with variants maps to a React/Vue/Svelte
component with props. Variant properties (Size, State, Type) become prop names. Use the
component name from the Figma layers panel as the component name in code.
Responsive intent over pixel perfection - A Figma frame is designed at a fixed viewport.
The designer's intent is what scales - not the exact pixel values. Use Figma constraints
(left/right = percentage widths, center = auto margins, scale = percentage sizing) to infer
responsive CSS. Ask the designer if constraints are ambiguous.
Match the Figma layer structure directly. Each Figma layer becomes a DOM element; each
auto layout frame becomes a flex/grid container; optional layers become optional props.
If the design shows off-scale values (13px, 27px), flag it with the designer - it's likely
a mistake. Never hard-code arbitrary values without confirming intent.
5. Handle responsive behavior from Figma constraints
Figma designs are fixed-width frames. Read constraints to infer responsive intent, then check
any separate mobile frames the designer provided for the small-viewport layout.
Use Figma's local styles/variables panel. Maintain two layers - primitives (raw hex values)
and semantic tokens (purpose-mapped aliases). This mirrors how Figma variables work.
For raster images: export at 1x, 2x, 3x from Figma. Use <img srcset> or Next.js <Image>.
Never substitute emojis for icons in code. Figma designs use vector icons - implement them as SVG components using Lucide React, Heroicons, Phosphor, React Icons, or Font Awesome. Emojis render inconsistently across platforms and cannot be styled.
Anti-patterns
Anti-pattern
Why it's wrong
Correct approach
Hard-coding hex values from screenshots
Colors drift with screenshot compression; misses semantic meaning
Use Figma inspect panel or copy from Figma color styles
Using position: absolute for everything
Figma absolute positions don't translate to responsive layouts
Check if the layer uses auto layout first; use flexbox/grid
Ignoring auto layout and using margin/padding guesses
Results in spacing drift and non-responsive components
Read the auto layout gap and padding from Figma inspect
Treating variant properties as CSS classes
class="state-hover" doesn't map to real states
Use disabled, aria-*, :hover, :focus real state selectors
Implementing one fixed-width breakpoint
Figma mobile frames are hints, not the only breakpoints
Use fluid layouts and test between Figma breakpoints too
Converting px directly to rem without a base check
Assumes 16px base - breaks if the design uses a different base size
Verify Figma uses 16px base. Divide: value / 16 = rem
Gotchas
Figma's "Fixed" width/height is not the same as a CSS fixed value - A frame with a fixed 400px width in Figma is an absolute constraint for that design viewport. In a responsive implementation it may need to be max-width: 400px or width: 100% with a cap. Don't convert Figma fixed dimensions to hardcoded CSS pixels without understanding the responsive intent.
position: absolute child coordinates in Figma are relative to their direct parent frame, not the page - When a Figma frame uses absolute positioning, the X/Y values shown in Inspect are relative to the parent frame's top-left corner. If you wrap the element in an extra div in code, the offset coordinates will be wrong.
Figma letter-spacing is in percent, CSS is in em - Figma displays letter-spacing as a percentage (e.g., 2%). CSS letter-spacing uses em. Divide the Figma value by 100 to get the em value: 2% -> 0.02em. Using the raw percentage number as a CSS value (e.g., letter-spacing: 2%) is invalid CSS and silently does nothing.
Auto layout "Fixed size" vs "Hug contents" is not always visible without switching modes - A frame that appears to be fixed-width in Figma might actually be set to "Hug contents" for one axis, which would make it width: fit-content in CSS. Always open the auto layout panel to verify both width and height sizing modes before writing dimensions in code.
Figma effects like box shadows use X/Y offsets, spread, and blur - CSS box-shadow order differs - Figma: x offset, y offset, blur, spread, color. CSS: offset-x, offset-y, blur-radius, spread-radius, color. The order is the same, but Figma's "Spread" can be negative (inset-like behavior). A Figma shadow with negative spread requires box-shadow: X Y B -S color in CSS, not an inset keyword.
References
For detailed mapping tables and property-by-property reference:
references/figma-css-mapping.md - Complete Figma properties to CSS equivalents, including effects, typography, constraints, and blend modes
Only load the references file when implementing complex layouts or needing the full property reference - it is comprehensive and will consume context.
Companion check
On first activation of this skill in a conversation: check which companion skills are installed by running ls ~/.claude/skills/ ~/.agent/skills/ ~/.agents/skills/ .claude/skills/ .agent/skills/ .agents/skills/ 2>/dev/null. Compare the results against the recommended_skills field in this file's frontmatter. For any that are missing, mention them once and offer to install:
