Integrate figma AI with existing design system library
Dear Figma Support Team,
I’m writing to share feedback regarding a limitation we’ve encountered while using Figma’s AI features to generate UI screens and other design elements.
The Problem
We have an established design system in Figma that includes reusable components, styles, variables, typography, colors, and other design elements. Our design team relies on this system to maintain consistency across our products and ensure that every screen follows our established design guidelines.
However, when we use Figma’s AI features to generate screens, layouts, or other UI elements, the generated designs do not appear to be properly connected to or based on our existing design system library.
Instead of using our existing components, the AI often generates new elements that look similar to our design system but are not actual instances of our reusable components. Similarly, the generated designs may not follow our established styles, variables, spacing rules, typography, or other design conventions.
As a result, the AI-generated output cannot be used directly in our product design workflow without significant manual intervention.
Impact on Our Design Workflow
The primary purpose of using AI in our design process is to accelerate UI development, reduce repetitive work, and improve overall productivity. However, when the generated designs are disconnected from our existing design system, we face several challenges:
Inconsistent UI: AI-generated screens may use different styles, colors, typography, and components from those defined in our design system.
Lack of component reusability: Generated elements are not always instances of our existing library components, making it difficult to maintain consistency and benefit from component updates.
Additional manual work: Designers have to replace generated elements with the correct components, adjust styles, fix spacing, and restructure layouts to align with our design system.
Reduced AI effectiveness: In many cases, it becomes faster and more reliable to create screens manually using our existing components than to correct the AI-generated output.
Maintenance challenges: When generated screens do not use the actual design system components and variables, maintaining and updating those screens becomes more difficult over time.
Ultimately, this limitation reduces the practical value of Figma’s AI features for teams that already have a well-established design system.
Our Feature Request
We would like Figma to provide a way for its AI features to understand, access, and use an existing design system library when generating UI screens and other design elements.
Ideally, users should be able to select a specific Figma design system file or published library as the source of truth before generating a design.
The AI should then:
Use existing design system components: Generate screens using actual instances of components from the selected library rather than creating visually similar but disconnected elements.
Follow established design guidelines: Automatically apply the correct colors, typography, variables, spacing, and other styles defined in the design system.
Understand component properties and variants: Recognize available component variants, properties, and configurations and select the appropriate options based on the design requirements.
Respect existing design patterns: Understand how components are intended to be used and assemble them into layouts that follow the product’s established UI patterns.
Support updates to the design system: When the library evolves, generated designs should remain connected to the underlying components so that updates can be managed through the existing component and library workflow.
Allow designers to specify their design system: Provide an option to select the relevant library or design system file when generating a screen, so the output reflects the actual product rather than a generic UI.
The Expected Outcome
For example, if our design system contains predefined buttons, input fields, navigation bars, cards, modals, and other reusable components, we should be able to ask Figma AI to generate a screen using those existing components.
The generated screen should contain actual instances of the components from our library, with the appropriate variants, properties, styles, and variables applied. This would allow designers to generate a screen and continue refining it immediately, rather than rebuilding much of it manually.
We understand that AI-generated designs may still require human review and refinement. However, the output should provide a solid, design-system-compliant starting point rather than a generic layout that requires substantial rework.
Why This Matters
For teams working on large products with established design systems, AI should do more than generate visually appealing screens. It should help teams build production-ready design explorations that are consistent with their existing products, reusable components, and design standards.
Integrating AI directly with existing design system libraries would make Figma’s AI capabilities significantly more useful for professional design teams. It could reduce repetitive tasks, improve consistency, accelerate prototyping, and help designers focus more on solving user problems rather than manually correcting generated UI elements.
We believe this would be a valuable improvement to Figma’s AI capabilities and would make them much more practical for teams that depend on reusable design systems.
We would appreciate it if your team could consider this request and share whether this capability is already supported, planned for development, or being explored for a future release.
Thank you for your time and consideration. We look forward to seeing how Figma continues to improve its AI-powered design experience.