figma-generate-design

To generate Figma screens from a design system, this skill discovers components, variables, and text styles, then builds sections using component instantiation and text overrides within a page frame, validating the final output with screenshots.

Yes, you can update existing Figma screens with design system tokens. This skill supports both creating new screens and updating existing ones, applying component instantiation and text overrides while running safety checks to prevent errors during the modification.

The workflow for building full-page UI layouts involves discovering design system assets, wrapping content in a page frame, assembling sections step by step using component instantiation, and validating the assembled screen via screenshots to ensure visual accuracy.

Yes, you need a published design system to create full-page Figma screens efficiently. This skill relies on discovering existing components, variables, and text styles from your design system context to assemble layouts rather than drawing primitives from scratch.

Applying design system tokens improves UI design consistency by enforcing the reuse of predefined variables and text styles. This skill ensures full-page screens are assembled using these standardized components, maintaining visual alignment across the project.

A limitation of reusing design system components for Figma layouts is that the skill is constrained to the existing assets, variables, and text styles in your published design system, meaning it cannot draw custom primitives outside that system.