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
“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
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
New User Guide • See how easy it is to get started
Arrow right

Loved and trusted by 100,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

Pay once, use forever in unlimited projects. Free updates for life.
5.0
UI prep star ratibngUI prep star ratibngUI prep star ratibngUI prep star ratibngUI prep star ratibng
$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
Buy Now
$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
Buy Now

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.
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.