UI Prep is trusted by designers from top brands and agencies
UI Prep design system checks all the boxes
Everything you need to start designing and get the most out of Figma
Components & Variants (new)
Components are thoughtfully built with multiple variations for dynamic use.
Auto Layout 3.0 (new)
Auto layout is applied for easy resizing and responsive design.
Light and Dark Theme
Light and dark themes are supported to fit any type of project.
Styles
Text, color, grid, and effect styles are applied for easy customization.
Atomic Design
Components are built with nested atoms and molecules for consistency.
8pt Grid System
All spacing and sizing is measured in increments of an 8pt base unit.
Icon Library
100+ of the most common icons from the Material Design icon library.
Documentation
Automatic documentation for consistent use and easy team communication.
Quick Start Guide Tutorials
Video tutorials and mini playgrounds to hit the ground running.
“UI Prep has been instrumental in our agency work. I’m a firm believer in efficiencies and never starting projects from scratch, and 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 Innovatemap
Design faster
Never start from scratch again. The design file is thoughtfully prepared with everything you need to start your actual design work right away.
⚡️ Large component library
⚡️ Large icon library
⚡️ Documentation
⚡️ Color styles
⚡️ Text styles
⚡️ Grid & Layout styles
Design better
Create designs that not only look beautiful but are more accessible, scaleable, and responsive. Each component has been optimized with best practices and the latest Figma features.
⭐️ Variants (new)
⭐️ Auto layout 3.0 (new)
⭐️ Resizing constraints
⭐️ Atomic design
⭐️ Accessible
⭐️ 8pt grid system
Customizable
Apply your branding in minutes by updating text styles, color styles, and component properties.
✨ Saved text & color styles
✨ Base components
✨ Quick start guide tutorials
Why UI Prep?
A practical design system for real-world products and websites
No-fluff
Built to maximize design utility and minimize bloat. The Design System has everything you need to get started, without the extra fluff.
Battle-tested
We personally use UI Prep as the starting point for multiple products every year. Every component, style, and layout has been tried & tested.
Figma native
Created exclusively for Figma and quickly updated when new Figma features are released. You'll always have the latest Figma features at your finger tips.
Educational
You don't have to be a design pro to use the system. Follow the Quick Start guide, Playground, & Tips to learn how to use the design system, and Figma, to the fullest.
See for yourself 👀
Download the free demo to test it out or Preview the light and dark theme in Figma
Loved and trusted by solo designers, teams, and students
Here's what our design community is saying about UI Prep
49k+
Figma Community Duplicates
18k+
Gumroad Downloads
50+
Countries sold in
Design System
“I would highly recommend this UI Kit! It was a well organized design system with variety of components to select from and simple to get started! The document guides were helpful and the emojis made it feel personal and friendly. This kit has dynamic components and easy to customize my designs. Overall, a great product!”
Jason Lopez
UX/UI Designer at H&R Block
Design System
“Its great starting point for new projects, if you want to start designing quickly and effectively, without the hassle of setting up a design system yourself!”
Tim Roth
UX Designer at Swiss Radio & TV
Design System
“The UI kit has been helpful in helping me understand how to make, organize, and name components in Figma. I want to make sure I am following best practices for my team, and this kit is helping me ensure that I am.”
Dana Rome
UX Designer at Sidebenc
Design System
“The breath of components and attention to detail is excellent.”
Kevin Santos
UX/UI Designer at Utility
Design System
“UI Prep's kit is extremely thorough and well-organized. I'm excited about being able to swap instances so easily and utilizing the grid layouts while designing responsively. I highly recommend the kit to any designer that wants to save time and create beautiful, cohesive work.”
Renee Bruhn
Student at Design Lab
Design System
“UI Prep Kit really helped my team accelerate their learning of Figma and how to structure our design system. The kit has a great support team looking after it and if be happy to recommend it”
Chris Kerr
UX Designer
Design System
“A clean and intuitive UI kit, love it!”
Joe Chiang
UX/UI Designer at Koala
Design System
"This is a fantastic design system. Best thing on Gumroad!"
Christopher Yellen
UX/UI Designer at Fidelity
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.
If you’re an existing customer, download the latest version by logging into your Gumroad Purchase Library
May 3, 2021
Version 4.0
This latest release includes our first ever dark theme version of UI Prep, in addition to some major auto layout and variant optimizations and other improvements to the design system.
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.
.svg)
.svg){kind=small}
.svg)
.svg){kind=small}
.svg)
.svg)
