Learn Figma with hands-on design projects
Design System UI Kit for Figma

Battle-Tested, No Fluff Design System for Figma

UI Prep's design system helps fellow designers create beautiful, user friendly, scalable designs in a fraction of the time.
Get the System
Preview in Figma
Arrow right
5.0
UI prep star ratibngUI prep star ratibngUI prep star ratibngUI prep star ratibngUI prep star ratibng
UI Prep is trusted by designers from top brands and agencies
Kelloggs Brand testimonial
Nike Brand testimonial
Open Table Brand testimonial
Innovate Map Brand testimonial
H&R Block Brand testimonial

Optimized for Customization

Every component and style has been optimized for fast, easy customization and long term maintainability.
“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
UI prep star ratibngUI prep star ratibngUI prep star ratibngUI prep star ratibngUI prep star ratibng

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
Most components use Auto Layout to automatically grow, shrink, or reflow as their content changes. Components will resize when text or new layers are added or removed.
Variants
Every component with multiple types, states, or sizes, has been combined as variants to make them easier to find and use.
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
New User Guide • See how easy it is to get started
Arrow right

Loved and trusted by 75,000+ design teams, contractors, and students

Here's what our design community is saying about UI Prep
UI prep star ratibngUI prep star ratibngUI prep star ratibngUI prep star ratibngUI prep star ratibng
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
UI prep star ratibngUI prep star ratibngUI prep star ratibngUI prep star ratibngUI prep star ratibng
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 star ratibngUI prep star ratibngUI prep star ratibngUI prep star ratibngUI prep star ratibng
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 star ratibngUI prep star ratibngUI prep star ratibngUI prep star ratibngUI prep star ratibng
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

Buy once, use it forever. Get lifetime access to the the Design System today, plus any updates we release in the future for a simple one-time price.
5.0
UI prep star ratibngUI prep star ratibngUI prep star ratibngUI prep star ratibngUI prep star ratibng
Individual
$79
For solo designers and students
Figma design files (light & dark)
High quality components
100+ styles
100+ icons
UI layout examples
Documentation
Quick Start Guide tutorials
Use for unlimited projects
Free updates!
Buy Now
One time payment • Lifetime updates
Team
$158
For teams with multiple designers
Figma design files (light & dark)
High quality components
100+ styles
100+ icons
UI layout examples
Documentation
Quick Start Guide tutorials
Use for unlimited projects
Free updates!
Use with unlimited team members
Buy Now
One time payment • Lifetime updates

Latest Release

If you’re an existing customer, download the latest version by logging into your Gumroad Purchase Library
January 5, 2022

Version 5.0

The design system has been optimized for team use, accessibility, and faster prototyping. Its new file structure, unpublished "helper" components, tokenized naming, and interactive components make it easier than ever to customize and use.
The highlights
  • Updated file structure
  • Added interactive components
  • Introduced new color system with tokens
  • Improved and expanded button components
  • Improved and expanded chart components
  • Improved and expanded table components
  • Improved & expanded text editor 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.
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.