Build / Update Screens and Views from Design System

Use this skill to create or update screens, views, and multi-section UI containers in Figma by reusing the published design system — components, variables, and styles — rather than drawing primitives with hardcoded values. This includes full pages, modals, dialogs, drawers, sidebars, panels, and any composed view with multiple sections. 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 composed Figma view (new or updated) — full-page screens, modals, dialogs, drawers, sidebars, panels, or any multi-section container — built from 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.

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/view to build/update

Parallel Workflow with generate_figma_design (Web Apps Only)