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.