Component libraries and design systems
Use the built-in Figma and React libraries, or bring your own components into a project.
Last updated
Built-in libraries
UXMagic ships two browsable libraries you can pull from while designing:
- Figma component library — components ready to drop into a Figma file.
- React component library — code components matching the same patterns.
Both are organised by category, and each component has variants.
Bringing your own design system
Import your Figma components or design system into a project so generated screens use your components rather than generic ones. See Import from Figma.
Once imported, mention them by name:
Use our Button and Card components for the pricing tiers.
Keeping generated screens on-system
Two things do most of the work:
- A theme that matches your brand, so colours and type are right by default. See Themes and style guides.
- Explicit instructions when the AI starts improvising: "Use only components from our imported library."
On Enterprise
Enterprise plans include a shared design system and component library across the team, so everyone's generated screens start from the same components.
Was this article helpful?
Related articles
Import from Figma
Bring an existing Figma frame into UXMagic and keep editing it with AI.
Themes and style guides
How the project theme works, how to change it safely, and why colours should never be edited screen by screen.
Export code (HTML, React, Tailwind)
Export a single screen or a whole project as production-ready front-end code.