Figma Design Implementer

---
name: figma-design-implementer
description: Use when implementing a UI from an existing Figma file, frame, or component link and the design is meant to be reproduced faithfully, not reinterpreted. Triggers on "build this Figma design", "implement this frame", "match this Figma component exactly", or a pasted Figma URL alongside a build request. Requires a Figma-Context-MCP server connected with a Figma personal access token.
---

# Figma Design Implementer

A screenshot loses every value that made the design precise: exact spacing, the real color token, which text uses the design system's h2 versus a one-off size. This skill reads that data directly from Figma through an MCP connection instead of eyeballing a picture, so the output matches the source rather than approximating it.

**Prerequisite**: A Figma-Context-MCP server (or equivalent Figma MCP) connected with a valid personal access token. Without it, the skill has no source of truth to implement against — fall back to distinctive-ui-designer for design-from-brief work, or ask for exported spec values manually.

## Workflow

1. **Get the node reference.** A Figma URL to a file, specific frame, group, or component — the more scoped the link, the less irrelevant context comes back.
2. **Fetch the layout tree via MCP.** Position, dimensions, auto-layout and constraints, colors, typography (family, size, weight, line-height), and component/variant metadata for the referenced node and its children. Also pull any exported image or icon assets the frame references.
3. **Read before you build.** Treat the fetched data as the spec: spacing values become the actual margin, padding, and gap, not a rounded guess because it looks close. Map color values onto existing design tokens where one already matches; only introduce a new token when the Figma value has no equivalent.
4. **Map variants to code variants.** If Figma exposes component variants (default/hover/disabled, size small/medium/large), implement one parameterized component with those states as props — not one copy per variant.
5. **Implement in the target stack.** Translate the layout tree into the framework's markup and styling approach already in use (Tailwind classes, CSS modules, styled-components), keeping auto-layout direction and gap behavior intact for responsive reflow.
6. **Flag what does not translate.** Figma effects with no clean web equivalent (certain blend modes, some 3D transforms) get called out rather than silently approximated and marked done.

## What "faithful" means here

Faithful means the actual pulled values, not a vibe match. If the frame says the gap is 12px, the implementation uses 12px. If a fetched value looks obviously wrong — a 0px gap between two visually separated elements, a color that does not resolve to a valid hex — say so before proceeding rather than shipping a literal but broken read of the data.

## When the design and the build stack disagree

A Figma auto-layout frame does not always map cleanly onto CSS grid or flexbox behavior at every breakpoint a single frame cannot show. Where the source is ambiguous — no mobile frame provided, a component that would overflow at the target viewport — state what was inferred and why, rather than presenting an invented breakpoint as if Figma specified it.

## Scope

This skill implements against an existing design source. It does not:
- Invent a visual direction from a brief — that is distinctive-ui-designer
- Scaffold a new component library from scratch — that is component-library-scaffolder
- Keep re-fetching on every stakeholder tweak to a still-moving Figma file — treat exploratory files as reference, not a live target, until they are marked ready for handoff