The best, most user friendly design system UI kit for Figma

Save time, learn best practices, and ship projects faster.
Variants
Auto Layout
Light & Dark Theme
UI Prep Design System
Subscribe for 1 year so we can provided you with updates and new features as Figma evolves.
Annual subscription
$48
/ year
Get the systemPreview in Figma
Hero-image
Design Faster
Never start from scratch again. Get a jump start on every new project with organized, well-crafted components and styles.
Use best practices
Every component and style is built with best practices to help you make effective, user friendly, and accessible designs.
Get the most out of Figma
The design file takes full advantage of all the latest features in Figma to improve your workflow and keep your designs consistent.

Meet UI Prep

See what’s included and how to customize styles in less than 2 min.
TESTIMONIALS
Loved by teams & individuals
“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
“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
“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
“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
“The breath of components and attention to detail is excellent.”
Kevin Santos
UX/UI Designer at Utility
“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
“UI Prep Kit really helped me 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
“A clean and intuitive UI kit, love it!”
Joe Chiang
UX/UI Freelancer
SAVE TIME
Save hours of production time on each project
Never start from scratch again
Start every project with a well-crafted and meticulously organized design file ready to be customized and used.
Apply your branding in minutes
Customize 59 color styles and 14 text styles to apply your branding in just a few minutes.
Clear documentation
All styles and components are automatically documented for consistent use and easy team communication.
Design-Better
DESIGN BETTER
Built with industry best practices
Atomic design
Components are built with atomic, nested instances for consistent use and quick design updates.
Consistent UI
The design system uses the 8pt grid system, a balanced type scale, and holistic color palette system.
Resizing behavior
All components are built with grids, constraints or auto layout for flexible, consistent usage across all designs.
SCALE FASTER
Maintain consistency as your design file grows
Master components
Master components are strategically built to be flexible, consistent, and easily maintainable.
Saved styles
All components use saved text, fill, stroke, grid, and effect styles for consistency and easy bulk updates.
Variants
Quickly find, use, and customize components with advanced variants and base components.
PREVIEW

Preview in Figma

Preview the light & dark themes in Figma
Preview light theme
Preview dark theme
GET THE SYSTEM

Get the best design system for Figma

Light & Dark Theme
Advanced Variants
Advanced Auto Layout
Atomic Structure
Nested Instances
8pt grid system
Color, Text, Effect, Grids & Layouts Styles
Automated Documentation
Quick Start Guide Tutorials & Playgrounds
Use for unlimited projects
Use by yourself or with a team
UI Prep Design System
Subscribe for 1 year so we can provided you with updates and new features as Figma evolves.
Annual subscription
$48
/ year
Buy Now
RELEASES

Latest Release

If you’re a subscriber, you can download the latest version by logging into your Gumroad Purchase Library.
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.
Released: May 3rd, 2021
The highlights
  • New dark theme
  • Optimized auto layout & variant components
  • Optimized input, button, & table component behavior + added new variants.
  • Improved file structure and organization
  • Added video tutorials & playgrounds to the "Quick Start Guide"
  • Optimized variants for interactive components (beta)
FAQ

Frequently Asked Questions

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 checkout. We offer licenses for team sizes of 2-4, 5-9, and 10+.
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 here and the terms of service here.
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.
What if I have more questions?
No problem at all! Email us at molly@quantidesign.io with your questions.
© 2021 UI Prep • Privacy & Terms