/figma-component-library

name: figma-component-library
description: Generate a complete component library in Figma from a design system config — atoms, molecules, and organisms with all variants, auto layout, and component properties
allowed-tools: ["Read", "Write", "Edit", "Bash", "Glob", "Grep", "mcp__*"]
triggers:
  - component library
  - figma library
  - design system figma
  - build component library
  - create components figma
  - generate components
  - atoms molecules organisms
  - figma components
arguments: "$ARGUMENTS"

/figma-component-library

Generate an entire component library in Figma — atoms → molecules → organisms — from a design system config or a description. Produces named components with auto layout, variant groups, component properties, and correct layer naming conventions.

**Usage:** `/figma-component-library <description or config>`

**Examples:**

• `/figma-component-library SaaS product with blue primary, minimal style`
• `/figma-component-library e-commerce: product cards, cart, checkout forms`
• `/figma-component-library --config design-tokens.json`
• `/figma-component-library --scope atoms` — generate only atom-level components

**Flags:**

• `--scope atoms | molecules | organisms | full` (default: full)
• `--style minimal | bold | corporate | playful | dark-tech` (default: minimal)
• `--config <file>` — read color/typography tokens from a JSON file
• `--framework` — output companion React/TypeScript interface spec alongside Figma output

---

Step 1: Parse Input

Extract from `$ARGUMENTS`:

1. **Product context**: What is being built? (SaaS, e-commerce, dashboard, mobile app, etc.) 2. **Brand signals**: Any color, style, or tone mentioned → use as seed for token generation 3. **Scope flag**: `--scope` determines which tiers to generate 4. **Config file**: If `--config` is provided, read token values; otherwise generate sensible defaults 5. **Style flag**: Maps to a visual personality (see style table in Step 2)

If no brand color is provided, default to a neutral blue (#3B82F6) with slate grays.

---

Step 2: Generate Token Foundation

Before building components, establish the token system that all components will reference.

Color Tokens

Generate a complete semantic token set from the brand color:

--color-brand-50 through --color-brand-900   (tints/shades)
--color-neutral-50 through --color-neutral-950

Semantic aliases:
--color-interactive         (brand-600 default)
--color-interactive-hover   (brand-700)
--color-interactive-active  (brand-800)
--color-interactive-subtle  (brand-50)
--color-surface             (#ffffff)
--color-surface-raised      (neutral-50)
--color-surface-overlay     (neutral-100)
--color-border              (neutral-200)
--color-border-strong       (neutral-400)
--color-text-primary        (neutral-900)
--color-text-secondary      (neutral-600)
--color-text-disabled       (neutral-400)
--color-text-inverse        (#ffffff)
--color-focus-ring          (brand-600 + 25% alpha)
--color-success             (#22c55e)
--color-warning             (#f59e0b)
--color-error               (#ef4444)
--color-info                (brand-500)

Typography Tokens

--font-family-sans: system-ui, -apple-system, sans-serif
--font-family-mono: ui-monospace, monospace

Scale: xs(12) sm(14) base(16) lg(18) xl(20) 2xl(24) 3xl(30) 4xl(36)

--text-display: 3xl/1.2/semibold
--text-heading-1: 2xl/1.3/semibold
--text-heading-2: xl/1.4/semibold
--text-heading-3: lg/1.5/medium
--text-body: base/1.6/regular
--text-body-sm: sm/1.5/regular
--text-label: sm/1.4/medium
--text-caption: xs/1.4/regular
--text-code: sm mono/1.6/regular

Spacing + Radius Tokens

Spacing: 2 4 6 8 12 16 20 24 32 40 48 64 80 96 (px)
Aliases: --space-1 through --space-24

Border radius: --radius-sm(4) --radius-md(8) --radius-lg(12) --radius-xl(16) --radius-full(9999)
Shadows: --shadow-sm --shadow-md --shadow-lg

**Style modifiers:**

| Style | Primary color | Radius | Type weight | Personality | |-------|--------------|--------|-------------|-------------| | minimal | neutral blue | md | regular | Clean, lots of whitespace | | bold | vibrant brand | lg | semibold | High-contrast, assertive | | corporate | navy/slate | sm | regular | Conservative, structured | | playful | warm/colorful | xl | medium | Rounded, friendly | | dark-tech | blue-gray dark | md | medium | Dark surface, accent glow |

---

Step 3: Plan the Component Hierarchy

Determine which components to generate based on `--scope`:

Atoms (single-purpose primitives)

| Component | Variants / States | Key props | |-----------|------------------|-----------| | **Button** | Size: sm/md/lg · Variant: primary/secondary/ghost/danger · State: default/hover/focus/disabled/loading | label, icon-left, icon-right, full-width | | **Badge** | Variant: default/success/warning/error/info · Size: sm/md | label, dot indicator | | **Tag** | Removable: yes/no · Size: sm/md | label, on-remove | | **Icon** | Size: 16/20/24px | name (placeholder frame) | | **Avatar** | Size: xs/sm/md/lg/xl · Type: image/initials/placeholder | initials, image-src | | **Spinner** | Size: sm/md/lg · Color: brand/neutral/white | — | | **Divider** | Orientation: horizontal/vertical · Style: solid/dashed | label (optional) | | **Tooltip** | Position: top/bottom/left/right | content | | **Checkbox** | State: unchecked/checked/indeterminate/disabled | label, description | | **Radio** | State: unselected/selected/disabled | label, description | | **Toggle** | State: off/on/disabled | label | | **Input** | State: default/focus/error/disabled · Size: sm/md/lg | label, placeholder, hint, error-msg, icon | | **Textarea** | State: default/focus/error/disabled · Resize: vertical/none | label, hint, error-msg, row-count | | **Select** | State: default/open/selected/error/disabled | label, placeholder, options | | **Link** | Variant: default/subtle · State: default/hover/visited | label, external indicator | | **Code** | Display: inline/block | content,