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

Save time, learn best practices, and ship projects faster.
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
“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
“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
“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 breath of components and attention to detail is excellent.”
Kevin Santos
UX/UI Designer at Utility
“A clean and intuitive UI kit, love it!”
Joe Chiang
UX/UI Freelancer
“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
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.

Get the best design system for Figma

Master Components
Atomic Structure
Nested Instances
8pt grid system
Holistic styles
Sizing constraints
Auto Layout
Grids & Layouts
Automatic Documentation
Quick Start Guide
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 NowPreview in Figma
RELEASES

Latest Release

If you’re a subscriber, you can download the latest version by logging into your Gumroad Purchase Library.
Version 3.0
Optimized for the newest Figma features! We updated resizing behaviors, added new styles & components, and included 4 new UI examples.
Released: August 24th, 2020
Biggest updates:
  • New UI examples
  • New components
  • More color styles
  • Improved Auto Layout
  • Updated button system
  • Updated input field system
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.
© 2020 UI Prep • Privacy & Terms