Figma Generate Design

/figma-generate-design — Create Designs Using Existing Components

Generate new screens and pages in Figma using your existing components, variables, and design system. Produces structured, spec-compliant layouts with full self-healing validation. Requires /figma-use.

Freedom Level: High

Full creative freedom within the design system. Must use existing components and variables, never raw values.

Prerequisites

• /figma-use foundational skill loaded
• Design system pulled (memi pull) or variables exist in file
• figma_search_components called this session (nodeIds are session-scoped)

Workflow

Step 1: Check Code Connect & Inventory

get_code_connect_map          → what's already mapped code ↔ Figma?
figma_search_components       → what components exist?
figma_get_variables           → what tokens are available?

If Code Connect mappings exist: use those components. Don't recreate.

Step 2: Plan the Layout (Atomic Design)

Map the design to atomic levels:

Page: AuthLogin
├── Template: AuthTemplate (centered, max-w-md)
│   ├── Organism: LoginForm
│   │   ├── Molecule: FormField (email)
│   │   │   ├── Atom: Label
│   │   │   ├── Atom: Input
│   │   │   └── Atom: HelpText
│   │   ├── Molecule: FormField (password)
│   │   ├── Molecule: SocialLogin
│   │   │   ├── Atom: Button (Google)
│   │   │   ├── Atom: Separator
│   │   │   └── Atom: Button (GitHub)
│   │   └── Atom: Button (Submit)
│   └── Organism: Footer

Step 3: Build Bottom-Up

1. Atoms — instantiate existing or create with use_figma
2. Molecules — compose atoms with Auto Layout
3. Organisms — compose molecules with state considerations
4. Template — page frame with responsive constraints
5. Page — fill template with real content

Prefer use_figma for design-aware writes. It understands your design system and returns structured output.

Step 4: Apply Design Tokens

All visual properties MUST bind to variables:
  background → colors/surface/primary
  text       → colors/text/primary
  border     → colors/border/default
  spacing    → spacing/4, spacing/8, spacing/16
  radius     → radius/default, radius/lg

Never hardcode. If a token doesn't exist, create it with figma_batch_create_variables first.

Step 5: Self-Healing Validation (MANDATORY)

Run the self-healing loop from /figma-use: CREATE → SCREENSHOT → ANALYZE → FIX → VERIFY (max 3 rounds).

Step 6: Generate Spec & Code

After the design is validated:

memi spec component LoginForm → specs/components/LoginForm.json
memi spec page AuthLogin → specs/pages/AuthLogin.json
memi generate LoginForm → generated/components/LoginForm/
add_code_connect_map → establish Figma ↔ code mapping

Layout Patterns

Dashboard

Frame (VERTICAL, fill)
├── Header (HORIZONTAL, hug height, fill width)
│   ├── Logo + Title
│   └── Actions (avatar, notifications)
├── Content (HORIZONTAL, fill)
│   ├── Sidebar (VERTICAL, fixed 240px, fill height)
│   │   └── NavItems
│   └── Main (VERTICAL, fill)
│       ├── MetricsRow (HORIZONTAL, fill, gap=16)
│       │   └── MetricCard × 4 (fill, equal)
│       ├── ChartsRow (HORIZONTAL, fill, gap=16)
│       │   └── Chart × 2 (fill, equal)
│       └── TableSection (VERTICAL, fill)

Auth Flow

Frame (VERTICAL, centered, max-480px)
├── Logo (centered)
├── Card (VERTICAL, fill width, padding=32)
│   ├── Heading + Subtext
│   ├── Form (VERTICAL, gap=16)
│   │   └── FormField × N
│   ├── Button (fill width)
│   └── Links (HORIZONTAL, centered)

Marketing / Landing

Frame (VERTICAL, fill, gap=0)
├── Nav (HORIZONTAL, fixed, z-index)
├── Hero (VERTICAL, centered, min-h=600)
├── Features (grid 3-col, padding=80)
├── Social Proof (HORIZONTAL, scroll)
├── CTA (VERTICAL, centered, bg=primary)
└── Footer (VERTICAL, padding=40)

Responsive Strategy

Use MIN_WIDTH + MAX_WIDTH on content containers. FILL on flexible elements. FIXED only on sidebar, icons, avatars.

Anti-Patterns

• Elements using "hug contents" when they should "fill container"
• Inconsistent padding between similar elements
• Text/inputs not filling available width
• Components floating on blank canvas (always use Section/Frame)
• Raw hex colors instead of variable bindings
• Fixed widths on elements that should be responsive
• Skipping the self-healing screenshot loop
• Using raw Figma execution when use_figma would work better
• Creating components that already exist in Code Connect