figma-generate-design

• 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

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.

• 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.

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.