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
Decision gist · record as of 2026-07-14
Figma Generate Design builds full-page screens in Figma by reusing your design system's published components, variables, and styles. 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.
Use it when
- Yes.
- Figma Generate Design scans your Figma library to identify published components, variables.
Install
openai/skills/figma-generate-design · repository language: Python
generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
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.
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Generate design mockups and UI layouts automatically in Figma”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
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 Use lets you run JavaScript code directly in Figma files through the Plugin API, enabling programmatic creation and modification of design nodes, variables, components, and layouts. Load this skill before every `use_figma` tool call to execute write operations and complex read tasks that require API access.
Figma Use is the prerequisite skill for running Plugin API code in Figma files. Load it before calling the `use_figma` tool to perform write operations, inspect file structure, manage variables and components, or execute custom logic. The skill provides critical rules for text editing, auto-layout, color ranges, and incremental workflows to avoid common failures.
Build production-ready design systems in Figma by orchestrating multi-phase workflows that extract tokens from code, create variable foundations, construct components with proper variant sets, and document design principles. Works alongside the figma-use skill to enforce quality patterns from real-world systems.
This skill guides you through building professional design systems in Figma that sync with your codebase. It breaks the work into five mandatory phases—discovery, foundations, file structure, components, and QA—each with user checkpoints, ensuring tokens are created before components and all bindings are validated.
Figma Use Motion extends the foundational use_figma skill with APIs for animating nodes through manual keyframes, color transitions, animation styles, and timeline control. Load it alongside figma-use whenever your task involves adding, editing, or inspecting motion on a design element.