Figma Generate Library
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.
Figma Generate Library automates the creation of professional design systems in Figma by coordinating tokens, components, and documentation across structured phases.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-27
Figma Generate Library automates the creation of professional design systems in Figma by coordinating tokens, components, and documentation across structured phases. 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.
Use it when
- Yes.
- Figma Generate Library builds reusable UI components by constructing components with proper variant sets based on extracted design tokens.
Install
Devin-AXIS/iPolloWork/figma-generate-library · repository language: TypeScript
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 Library do?
Figma Generate Library automates the creation of production-ready design systems by orchestrating multi-phase workflows. It extracts tokens from code, creates variable foundations, constructs components with proper variant sets, and documents design principles—enabling teams to build comprehensive component libraries without manual setup.
Can Figma Generate Library auto-generate a figma library?
Yes. Figma Generate Library automates library creation through multi-phase workflows that handle token extraction, variable setup, component construction, and documentation. This removes the manual work of building design systems from scratch and accelerates the entire library scaffolding process.
How does Figma Generate Library create reusable components?
Figma Generate Library builds reusable UI components by constructing components with proper variant sets based on extracted design tokens and code-driven specifications. It ensures components follow quality patterns and can be efficiently organized into a structured, maintainable design system.
What workflow phases does Figma Generate Library execute?
Figma Generate Library orchestrates multiple phases: extracting design tokens from code, creating variable foundations in Figma, constructing components with variant sets, and documenting design principles. This comprehensive approach ensures production-ready design systems that maintain consistency across your organization.
How does Figma Generate Library work with other skills?
Figma Generate Library works alongside the figma-use skill to enforce quality patterns from real-world systems. Together, they ensure your generated libraries maintain professional standards and integrate seamlessly with your design workflow.
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 or create a Figma component library automatically”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
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 Design equips you with plugin development capabilities, component systems, auto layout controls, and design token management based on the official Figma Plugin API. Automate repetitive design tasks, create responsive frames with constraints, build interactive prototypes, and integrate Figma workflows into agent-based systems.
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.
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 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.
More skills Figma Swiftui (NOASSERTION) · Figma Code Connect (NOASSERTION) · Qt Figma Component Generation (NOASSERTION)