.svg)
Design System UI Kit for Figma
Battle-Tested, No Fluff Design System for Figma
Save 100+ hours while becoming a better designer
.svg){kind=icon}
5.0
.svg)
UI Prep is trusted by designers from top brands and agencies
Optimized for Customization
Every component and style has been optimized for fast, easy customization and long term maintainability.
Components
Components are built with variants & component properties for easy use and customization.
Color Styles
Smart color styles with synchronized hues allow you to customize your color theme with a single value.
Text styles
Well-balanced text layers applied across all designs can be updated with a single edit.
“UI Prep has been instrumental in our agency work. UI Prep helps us start at 60% instead of 0%. It’s comprehensive, organized, and very thoughtfully designed. I could not recommend this more.”
Jon Moore
Principal Product Designer at Innovate map
Built-in Best Practices
UI Prep is built with industry best practices from Figma, WCAG, and top UI frameworks (Material Design, Bootstrap, Ant Design).
Fully Accessible
100% compliant with WCAG 2.1 accessibility contrast ratios
8pt Grid System
All spacing & sizing is measured in increments of an 8pt base unit
Atomic Design
Components built with nested atoms & molecules for consistency
Clear Documentation
Automatic documentation for consistent use & easy team comms
Responsive Design
Built with Auto layout, constraints, layouts & grids
Light and Dark Themes
Light and dark themes are supported to fit any type of project
Advanced Figma Features Made Easy
Get the most out of Figma by using the latest, most advanced features in Figma. Each one applied where appropriate and made easy to use for all skill levels.
Auto Layout
Components use Auto Layout to automatically grow, shrink, or reflow as their content changes. Giving them the flexibility to fit any design or breakpoint.
Variants & Properties
Component Variants and Properties make maintaining and using components intuitive. Change a component’s state, type, size, or icon with a single click.
Interactive Components
Every stateful component is interactive by default. Meaning instances are immediately “alive” in prototyping mode.
Why UI Prep?
A practical design system for real-world products and websites
Customization is priority #1
Optimized for fast & easy customization
No-fluff
Built to maximize utility and minimize bloat
Framework independent
Not locked into any one UI framework
Battle tested
Built and tested by full time product designers
Figma native
100% optimized for Figma workflow
Educational
Includes tips and guides to teach designers
See for yourself 👀
Preview the light and dark theme in Figma or download the free demo to test it out
.svg)
.png)
.svg)
New User Guide • See how easy it is to get started
.svg)
Loved and trusted by 100,000+ design teams, contractors, and students
Here's what our design community is saying about UI Prep
“I would highly recommend this UI Kit! It was a well organized design system with a variety of components to select from and simple to get started! This kit has dynamic components and is easy to customize my designs. Overall, a great product for me and my team!”
Jason Lopez
UX/UI Designer at H&R Block
“This design system will save you and your team so much time it will feel like magic. As soon as I was involved with the projects and the company, I realized I cannot afford to design a UI design system from scratch because I needed to keep my focus on UX.”
Ezgi Elvan
Product Designer at ARGE 24
“UI Prep is some of the best money we've spent in the life of our company. It has been absolutely critical for us to get our product up and running. As a startup with no dedicated UX resource, we have to be able to make the most of our time and assets. UI Prep helps us hit the ground running, and not waste time reinventing the wheel.”
Anna Eaglin
Head of Product at Uncovered
“UI Prep is more than just ‘a Figma template’. It teaches you the best way to work! It's packed with the best Figma features to help you design better and more effective! If you’re not using this, you are missing out. Don’t think ‘template, think design system! I love the fact I can become a better designer just by using UI Prep!
Marco Kramer
Owner at IMAGA
Pricing
Pay once, use forever in unlimited projects. Free updates for life.
5.0
$199
Team
For design teams, agencies, and startups.
Unlimited Users
Unlimited Projects
UI Kit Light Theme
UI Kit Dark Theme
Quick Start Guide
30+ Component Categories
70+ Essential Styles
Auto Layout
Variants & Properties
Interactive Components
$99
Individual
For solo designers, developers, and students.
Unlimited Users
Unlimited Projects
UI Kit Light Theme
UI Kit Dark Theme
Quick Start Guide
30+ Component Categories
70+ Essential Styles
Auto Layout
Variants & Properties
Interactive Components
Latest Release
If you’re an existing customer, download the latest version by logging into your Gumroad Purchase Library
January 22, 2023
Version 7.0
Updated to include the latest Figma updates. Including new property & variant features (ex. exposed nested variants, preferred variants, simplified components). In addition to many component improvements and additions.
The highlights
- Newest property features
- Newest Auto Layout features
- Improved Tables
- Improved Buttons
- Improved Inputs
- New Components
Change log • See full list of updates
Frequently Asked Questions
Still have a question? Send an email to molly@quantidesign.io
How do I import the design file into Figma?
First, download and unzip the design file. Then, drag and drop the file into your Figma “Project” page or your “Drafts” page.
How do I download a new update?
In your Gumroad Library, select the “UI Prep Design System for Figma” product card, then select “download”.
Can I get an invoice?
Yes! Click the "Generate" button on your receipt from Gumroad after you purchase and you can generate a detailed invoice with any additional information you need.
Can I get the Design System UI Kit for my entire team?
Yes, you just need to select the appropriate license when you check out. We offer an individual licenses (one designer) and a team licenses (unlimited designers).
What do I need to use Design System UI Kit?
All you need is a free Figma account. If you're looking to utilize the Design System as a library in Figma, you'll need to enable the Team Library feature which is available on paid Figma plans.
What's the license agreement for the Design System UI Kit?
You can read the license agreement and the terms of service.
TL;DR: Do pretty much whatever you want with the Design System UI Kit, including using them in open-source projects. Just don't resell them or publish them purely to distribute them for free or anything like that.
TL;DR: Do pretty much whatever you want with the Design System UI Kit, including using them in open-source projects. Just don't resell them or publish them purely to distribute them for free or anything like that.
How do you plan to rollout updates to the UI Prep Design System?
We'll continue to expand the Design System as Figma releases new features and industry best standards evolve. We also schedule regular updates to expand the component system and documentation based on feedback from our subscribers.