# Figma To Code

> Implements Figma frames, selections, components, or screens in code while preserving assets, variants, tokens, and visual fidelity.

- Skill: `mesteriis/figma-to-code` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add mesteriis/figma-to-code`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mesteriis/figma-to-code/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: Mesteriis (https://skillmd.com/u/mesteriis)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/mesteriis/figma-to-code

---


# Figma To Code

Translate Figma into repo-native frontend code.

## Workflow

1. Read `ui-figma`.
2. Read `figma-use` before any Figma tool/API work when available.
3. Pull only the selected frame/component context needed for the task.
4. Extract tokens and component anatomy with `design-system-extractor`.
5. Implement using existing repo conventions.
6. Validate rendered output with `playwright-visual-qa`.

## Rules

- Do not call Figma tools before reading the required Figma skill.
- Do not treat a Figma screenshot as enough when structured Figma context is
  available.
- Return affected Figma node IDs or the reason they were unavailable.