# Figma To Code

> Bridge Figma MCP output to Stellar Lab code conventions. Invoke after calling get_design_context to translate Figma's reference code into project-appropriate components, classes, and patterns.

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

---


# Figma to Code

## Purpose

The Figma MCP's `get_design_context` returns generic reference code (often plain
HTML/CSS). This skill bridges the gap between that output and the project's
actual conventions: `@stellar/design-system` components, SCSS with BEM-ish
naming, and specific layout patterns.

> For the full SDS component catalog, props, SCSS conventions, and usage
> examples, invoke `/component-guide`.

> For element mapping tables, spacing/layout patterns, and Figma variable
> mappings, see `reference/figma-mapping.md` (loaded automatically).

## Workflow

### 1. Get the Figma design context

```
mcp__figma-desktop__get_design_context({
  nodeId: "1234:5678",
  artifactType: "COMPONENT_WITHIN_A_WEB_PAGE_OR_APP_SCREEN",
  clientFrameworks: "react",
  clientLanguages: "typescript,scss"
})
```

Also get a screenshot for visual reference:
```
mcp__figma-desktop__get_screenshot({ nodeId: "1234:5678" })
```

### 2. Translate the output

Do NOT copy the Figma reference code directly. Instead, map each element to the
project's conventions using the mapping rules in `reference/figma-mapping.md`.

### 3. Verify against screenshot

After implementing, visually compare the rendered component against the Figma
screenshot. Focus on: layout, spacing, typography hierarchy, and interactive
states.

## Common Pitfalls

1. **Don't copy Figma's HTML structure literally** — Figma groups elements for
   design purposes, not component architecture. Think about what makes sense as
   React components.

2. **Don't use arbitrary colors** — Figma may show raw hex values. Map them to
   SDS color tokens (`--sds-clr-*`).

3. **Don't ignore interactive states** — Figma may show one state. Consider
   hover, focus, disabled, loading, and error states using design system props.