# Figma To Code

> Figma to Code

- Skill: `dojogenesis/figma-to-code` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dojogenesis/figma-to-code`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dojogenesis/figma-to-code/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: DojoGenesis (https://skillmd.com/u/dojogenesis)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dojogenesis/figma-to-code

---


# Figma to Code

---

## I. Philosophy: Design Intent Over Pixel Copying

The goal is not to reproduce every pixel from Figma — it is to capture the *design intent* (spacing rhythm, color relationships, typographic hierarchy) and express it in idiomatic code for the target framework. A good conversion reads like a developer wrote it with the design open, not like a screenshot was OCR'd into divs.

---

## II. When to Use This Skill

Use when:
- User shares a Figma URL and wants code generated
- Building HTML kits that should match an existing Figma design
- Extracting design tokens (colors, spacing, typography) from a Figma file
- Need to verify implementation fidelity against a Figma source

Do NOT use when:
- User wants to CREATE a Figma design from code (use `use_figma` MCP tool directly)
- Design is a screenshot, not a Figma file (use manual CSS instead)

---

## III. Workflow

### Step 1: Resolve Figma Context

Extract `fileKey` and `nodeId` from the Figma URL.
Call `get_design_context` MCP tool with these parameters.
This returns: reference code, screenshot, component metadata, and Code Connect mappings.

### Step 2: Extract Design Tokens

From the design context, extract:
- **Colors**: hex values, CSS custom properties, semantic names
- **Typography**: font families, sizes, weights, line heights
- **Spacing**: padding, margin, gap values
- **Border radius**: corner radius values
- **Shadows**: box-shadow definitions
- **Layout**: flex/grid structure, auto-layout direction and gap

If DESIGN.md files are available in `HTMLCraftStudio/templates/design-systems/`, cross-reference tokens against the closest matching design system.

### Step 3: Generate Framework Code

Based on user's target framework:

| Framework | Output |
|-----------|--------|
| HTML/CSS | Semantic HTML + CSS custom properties + utility classes |
| Svelte | `.svelte` component with scoped styles |
| React | TSX component with Tailwind or CSS modules |
| Vue | SFC with `<script setup>` and scoped styles |

Rules:
- Use semantic HTML elements (`nav`, `section`, `article`, `button`) not generic divs
- Extract repeated patterns as sub-components
- Use CSS custom properties for design tokens, not hardcoded values
- Preserve auto-layout as flexbox/grid, not absolute positioning

### Step 4: Verify Fidelity

Compare generated code against the Figma screenshot:
- Layout structure matches
- Typography hierarchy preserved
- Color relationships correct
- Spacing rhythm consistent
- Interactive states accounted for (hover, focus, active)

---

## IV. Best Practices

1. **Tokens first, components second.** Extract the design token set before generating any component code.
2. **Respect the component boundary.** If Figma shows a component with variants, generate one component with props — not multiple separate components.
3. **Use existing design system tokens when available.** Check `HTMLCraftStudio/templates/design-systems/` for matching DESIGN.md files before inventing new token names.
4. **Preserve accessibility.** Add `aria-label`, `role`, and proper heading hierarchy even if not explicit in the Figma design.
5. **Generate mobile-first.** Start with the smallest breakpoint and add `@media` queries for larger sizes.

---

## V. Quality Checklist

- [ ] Design tokens extracted and documented as CSS custom properties
- [ ] Semantic HTML used throughout (no div soup)
- [ ] Layout uses flexbox/grid matching Figma auto-layout
- [ ] Typography hierarchy preserved (h1 > h2 > h3 > p)
- [ ] Colors reference token variables, not hardcoded hex
- [ ] Component is responsive (mobile-first)
- [ ] Accessibility attributes present

---

## VI. Related Skills

- `canvas-design` — Visual artifact generation
- `theme-factory` — Styling toolkit for HTML pages
- `artifacts-builder` — HTML artifact scaffolding

## Output

- CSS custom properties block documenting all extracted design tokens (colors, typography, spacing, radius, shadows)
- Framework-specific component file: `.html` + `.css`, `.svelte`, `.tsx` (React), or `.vue` based on user's target
- Fidelity verification notes comparing generated output against the Figma screenshot

## Examples

**Scenario 1:** "Implement this Figma card component in HTML" -> Token set extracted (primary blue #1a73e8, Inter 16/24, 8px radius, 16px padding), semantic HTML `<article>` with CSS custom properties generated, auto-layout mapped to flexbox, accessibility attributes (`aria-label`, `role`) added

**Scenario 2:** "Build this navigation sidebar from the Figma design in Svelte" -> Svelte component with scoped styles generated, Figma auto-layout (vertical stack, 8px gap) mapped to `display: flex; flex-direction: column; gap: 8px`, active state variant captured as CSS class, mobile-first responsive breakpoint added

## Edge Cases

- **Figma file has no design tokens defined (all values are hardcoded in nodes):** Extract values directly from node properties and name them semantically based on their usage (e.g., `--color-nav-active` not `--color-1a73e8`); note in output that token naming is inferred
- **Design contains overlapping absolute-positioned layers (not auto-layout):** Preserve relative positioning using CSS `position: relative/absolute`; flag in output that this area did not use auto-layout and may need manual responsive handling
- **User provides a Figma URL but the MCP tool returns an error:** Ask user to verify the file is shared with link access enabled; do not guess at the design from the URL alone

## Anti-Patterns

- Generating `div` soup instead of semantic HTML — use `nav`, `section`, `article`, `button`, `header` based on the element's role in the design
- Hardcoding hex values directly in component styles instead of extracting them as CSS custom properties — hardcoded values cannot be themed or updated centrally
- Treating the Figma screenshot as the acceptance gate without also verifying that the code works at mobile breakpoints