UI Prep: The Best Design System UI Kit for Figma

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

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

Here's what our design community is saying about UI Prep

“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

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

See more reviews

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

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.

Battle-Tested, No Fluff Design System for Figma

Optimized for Customization

Main Components

Color Styles

Text styles