Figma Generate Design
Create or update full-page screens, modals, dialogs, drawers, and other multi-section UI containers in Figma by leveraging your published design system—components, variables, and styles—rather than drawing with hardcoded values. The skill discovers design system assets from Code Connect files and existing screens, then assembles views incrementally section-by-section using design tokens. Works best alongside the parallel web app capture workflow for pixel-perfect layouts with proper component instances.
Figma Generate Design builds composed screens and views in Figma by assembling design system components, variables, and styles from your codebase.
AI-generated summary based on this skill's SKILL.md
Install
Devin-AXIS/iPolloWork/figma-generate-design · repository language: TypeScript
git clone https://github.com/Devin-AXIS/iPolloWork
cp -r iPolloWork ~/.claude/skills/figma-generate-designgenerated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What does Figma Generate Design do?
Figma Generate Design creates or updates full-page screens, modals, dialogs, drawers, and other multi-section UI containers in Figma by leveraging your published design system—components, variables, and styles—rather than drawing with hardcoded values. The skill assembles views incrementally section-by-section using design tokens and discovers design system assets from Code Connect files and existing screens.
How can I auto generate figma designs with this skill?
Figma Generate Design automates repetitive design tasks by using your design system's components, variables, and styles to build layouts automatically. Instead of manual drawing, the skill assembles multi-section UI containers section-by-section using design tokens, significantly speeding up your workflow and reducing manual design effort.
Can Figma Generate Design create design variations and templates?
Yes. Figma Generate Design uses AI to create design variations and templates by leveraging your design system assets. It discovers components and styles from Code Connect files and existing screens, then applies them intelligently to generate multiple layout options and template variations for your UI needs.
How does Figma Generate Design integrate with my workspace?
Figma Generate Design integrates directly into your Figma workspace by accessing your published design system—components, variables, and styles. It works best alongside the parallel web app capture workflow for pixel-perfect layouts with proper component instances, allowing seamless generation within your existing design environment.
What design system assets does Figma Generate Design use?
Figma Generate Design discovers and uses design system assets including components, variables, and styles from your Code Connect files and existing screens. These assets serve as the foundation for generating UI layouts, ensuring consistency across your designs and eliminating the need for hardcoded values in your generated mockups.