Figma Generate Design
Create or refresh complete page layouts in Figma by leveraging your design system's published components, variables, and text styles. This skill discovers what's already in your library, then assembles screens section-by-section using design tokens rather than manual primitives. Works best alongside figma-use for pixel-perfect results.
Figma Generate Design builds full-page screens in Figma by reusing your design system's published components, variables, and styles.
AI-generated summary based on this skill's SKILL.md
Install
openai/skills/figma-generate-design · repository language: Python
git clone https://github.com/openai/skills
cp -r skills ~/.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 refreshes complete page layouts in Figma by leveraging your design system's published components, variables, and text styles. The skill discovers what's already in your library, then assembles screens section-by-section using design tokens rather than manual primitives, accelerating your design workflow with AI-powered design creation.
Can Figma Generate Design auto generate figma designs?
Yes. Figma Generate Design automatically generates Figma designs by discovering your design system's published components, variables, and text styles, then assembling them into complete page layouts section-by-section. This automates repetitive design tasks and helps you create prototypes and design variations quickly without building from scratch.
How does Figma Generate Design use my design system?
Figma Generate Design scans your Figma library to identify published components, variables, and text styles already defined in your design system. Rather than creating primitives manually, it uses these design tokens to assemble screens, ensuring consistency and leveraging work you've already done. Works best alongside figma-use for pixel-perfect results.
What's the best way to use Figma Generate Design?
Figma Generate Design works best when you have a well-organized design system with published components and variables in place. Set it up to discover your library, then use it to generate complete page layouts section-by-section. Pair it with figma-use for pixel-perfect refinement of the generated designs.
Can Figma Generate Design create design alternatives?
Yes. Figma Generate Design can explore design alternatives and iterations with generative AI, allowing you to create multiple variations of layouts quickly. By assembling different combinations of your design system's components and tokens, it helps you iterate faster and test different approaches without manual redesign.