Build / Update Screens from Design System

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 skillNames: "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:

1. 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
2. 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.
3. 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:

1. If building from code, read the relevant source files to understand the page structure, sections, and which components are used.
2. Identify the major sections of the screen (e.g., Header, Hero, Content Panels, Pricing Grid, FAQ Accordion, Footer).
3. 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

…