figma

Figma — Design-to-Code

Overview

Figma is the primary design tool for modern design systems. Its Variables system, Dev Mode, Code Connect, and REST API create a structured pipeline from visual design decisions to production code. The Figma MCP server brings Figma context directly into AI coding tools.

Figma Variables

Variables are Figma's native design token system — reusable values that can be scoped to modes (themes) and collections:

Variable Types

Type	Maps To	Example
Color	color token	#3b82f6
Number	dimension / number token	16, 1.5
String	fontFamily / custom	"Inter"
Boolean	Feature flags	true / false

Collections and Modes

Collection: "Color"
├── Mode: Light
│   ├── surface: #ffffff
│   └── on-surface: #111827
└── Mode: Dark
    ├── surface: #111827
    └── on-surface: #f9fafb

Collection: "Spacing"
└── Mode: Default
    ├── space-xs: 4
    ├── space-sm: 8
    ├── space-md: 16
    └── space-lg: 24

Variable Aliases

Variables can reference other variables, mirroring the DTCG alias pattern:

Global: blue-500 = #3b82f6
Semantic: color-primary = alias → blue-500
Component: button-bg = alias → color-primary

Dev Mode

Dev Mode is the developer-facing view in Figma that surfaces implementation-ready specs:

• Variable inspection — see the full alias chain down to raw values
• CSS / iOS / Android code snippets — auto-generated from component properties
• Ready for dev status — designers mark components as implementation-ready
• Compare changes — diff between design versions
• Component properties — variant, boolean, instance swap, text props

Code Connect

Code Connect links Figma components to real code in your repository, replacing generic snippets with actual component usage:

// Button.figma.tsx
import figma from "@figma/code-connect";
import { Button } from "./Button";

figma.connect(Button, "https://figma.com/file/abc123/...", {
  props: {
    label: figma.string("Label"),
    variant: figma.enum("Variant", {
      Primary: "primary",
      Secondary: "secondary",
    }),
    disabled: figma.boolean("Disabled"),
    icon: figma.instance("Icon"),
  },
  example: ({ label, variant, disabled, icon }) => (
    <Button variant={variant} disabled={disabled} icon={icon}>
      {label}
    </Button>
  ),
});