Figma Generate Design

What This Skill Does

This skill creates or updates full-page screens in Figma by reusing published design system components, variables, and styles. It helps avoid hardcoded values and ensures consistency with the codebase's UI components and tokens. It is intended for users who want to build screens from existing design systems.

When to Use

• Build a new screen using design system components.
• Update an existing screen with design system elements.
• Create a consistent UI with design tokens.
• Generate a Figma screen from a web app.
• Populate a screen from a description.
• Populate a screen from source code.

Key Features

• Reuses published design system components.
• Utilizes variables and styles.
• Avoids hardcoded values.
• Ensures consistency with the codebase.
• Supports parallel workflow with web apps.
• Requires the figma-use skill.

Use this skill to create or update full-page screens in Figma by reusing the published design system — components, variables, and styles — rather than drawing primitives with hardcoded values. The key insight: the Figma file likely has a published design system with components, color/spacing variables, and text/effect styles that correspond to the codebase's UI components and tokens. Find and use those instead of drawing boxes with hex colors.

MANDATORY: You MUST also load figma-use before any use_figma call. That skill contains critical rules (color ranges, font loading, etc.) that apply to every script you write.

Always pass skill Names: "figma-generate-design" when calling use_figma as part of this skill. This is a logging parameter — it does not affect execution.

Skill Boundaries

Use this skill when the deliverable is a Figma screen (new or updated) composed of design system component instances. If the user wants to generate code from a Figma design, switch to figma-implement-design. If the user wants to create new reusable components or variants, use figma-use directly. If the user wants to write Code Connect mappings, switch to figma-code-connect-components.

Prerequisites

Figma MCP server must be connected The target Figma file must have a published design system with components (or access to a team library) User should provide either:

• A Figma file URL / file key to work in
• Or context about which file to target (the agent can discover pages) Source code or description of the screen to build/update

Parallel Workflow with generate_figma_design (Web Apps Only)

When building a screen from a web app that can be rendered in a browser, the best results come from running both approaches in parallel:

In parallel:

• Start building the screen using this skill's workflow (use_figma + design system components)
• Run generate_figma_design to capture a pixel-perfect screenshot of the running web app Once both complete: Update the use_figma output to match the pixel-perfect layout from the generate_figma_design capture. The capture provides the exact spacing, sizing, and visual treatment to aim for, while your use_figma output has proper component instances linked to the design system. Once confirmed looking good: Delete the generate_figma_design output — it was only used as a visual reference.

This combines the best of both: generate_figma_design gives pixel-perfect layout accuracy, while use_figma gives proper design system component instances that stay linked and updatable.

This workflow only applies to web apps where generate_figma_design can capture the running page. For non-web apps (iOS, Android, etc.) or when updating existing screens, use the standard workflow below.

Required Workflow

Follow these steps in order. Do not skip steps.

Step 1: Understand the Screen

Before touching Figma, understand what you're building:

If building from code, read the relevant source files to understand the page structure, sections, and which components are used. Identify the major sections of the screen (e.g., Header, Hero, Content Panels, Pricing Grid, FAQ Accordion, Footer). For each section, list the UI components involved (buttons, inputs, cards, navigation pills, accordions, etc.).

Step 2: Discover Design System — Components, Variables, and Styles

You need three things from the design system: components (buttons, cards, etc.), variables (colors, spacing, radii), and styles (text styles, effect styles like shadows). Don't hardcode hex colors or pixel values when design system tokens exist.

2a: Discover components

Preferred: inspect existing screens first. If the target file already contains screens using the same design system, skip search_design_system and inspect existing instances directly. A single use_figma call that walks an existing frame's instances gives you an exact, authoritative component map:

const frame = figma.current Page.find One(n => n.name === "Existing Screen"); const unique Sets = new Map(); frame.find All(n => n.type === "INSTANCE").for Each(inst => { const mc = inst.main Component; const cs = mc?.parent?.type === "COMPONENT_SET" ? mc.parent : null; const key = cs ? cs.key : mc?.key; const name = cs ? cs.name : mc?.name; if (key && !unique Sets.has(key)) { unique Sets.set(key, { name, key, is Set: !!cs, sample Variant: mc.name }); } }); return [...unique Sets.values()];

Only fall back to search_design_system when the file has no existing screens to reference. When using it, search broadly — try multiple terms and synonyms (e.g., "button", "input", "nav", "card", "accordion", "header", "footer", "tag", "avatar", "toggle", "icon", etc.). Use include Components: true to focus on components.

Include component properties in your map — you need to know which TEXT properties each component exposes for text overrides. Create a temporary instance, read its component Properties (and those of nested instances), then remove the temp instance.

Example component map with property info:

Component Map: Button → key: "abc123", type: COMPONENT_SET Properties: { "Label#2:0": TEXT, "Has Icon#4:64": BOOLEAN } Pricing Card → key: "ghi789", type: COMPONENT_SET Properties: { "Device": VARIANT, "Variant": VARIANT } Nested "Text Heading" has: { "Text#2104:5": TEXT } Nested "Button" has: { "Label#2:0": TEXT }

2b: Discover variables (colors, spacing, radii)

Inspect existing screens first (same as components). Or use search_design_system with include Variables: true.

WARNING: Two different variable discovery methods — do not confuse them.

• use_figma with figma.variables.get Local Variable Collections Async() — returns only local variables defined in the current file. If this returns empty, it does not mean no variables exist. Remote/published library variables are invisible to this API.
• search_design_system with include Variables: true — searches across all linked libraries, including remote and published ones. This is the correct tool for discovering design system variables. Never conclude "no variables exist" based solely on get Local Variable Collections Async() returning empty. Always also run search_design_system with include Variables: true to check for library variables before deciding to create your own.

Query strategy: search_design_system matches against variable names (e.g., "Gray/gray-9", "core/gray/100", "space/400"), not categories. Run multiple short, simple queries in parallel rather than one compound query:

Primitive colors: "gray", "red", "blue", "green", "white", "brand" Semantic colors: "background", "foreground", "border", "surface", "text" Spacing/sizing: "space", "radius", "gap", "padding"

If initial searches return empty, try shorter fragments or different naming conventions — libraries vary widely ("grey" vs "gray", "spacing" vs "space", "color/bg" vs "background").

Inspect an existing screen's bound variables for the most authoritative results:

const frame = figma.current Page.find One(n =