figma-generate-design

To generate Figma screens from a design system, provide a Figma file URL or context. The skill loads published components, variables, and text styles via use_figma to assemble full-page layouts or update sections without rebuilding UI primitives.

Yes, you can update individual sections within a Figma page. The skill applies bound design tokens, including colors, spacing, and typography, to specific frames or components inside a page wrapper without rebuilding the entire layout.

Translating code structure into a Figma layout requires loading your design system components and variables. The skill follows a step-by-step workflow to map code descriptions into Figma frames that mirror centralized design tokens.

Yes, a centralized design system is required. The skill relies on loading published design system components, variables, and text or effect styles to assemble screens and avoid drift between code and design.

To avoid design drift when updating Figma UI components, reuse published design system tokens and styles. The skill imports and binds these centralized variables directly to frames and text, ensuring code and design stay synchronized.

Figma screens may not reflect updated variables if the published design system is not properly loaded. The skill requires explicitly fetching design system components, variables, and styles via use_figma before applying them to page wrappers.