5.0

10X your speed while becoming a Figma expert

Figma Design system UI Kit to design quickly & confidently

Buy the SystemPreview in Figma

Used by designers working at top companies

Featured at Config23

UI Prep received a special shout-out from Dylan Field, the CEO of Figma, during the Config23 Keynote!!!

Best practices baked in

Hit the ground running with best practices for UI design and Figma already applied.

Tokenized (new!)

Tokenized colors and numbers with Figma’s new Variable feature.

WCAG compliant

100% compliant with WCAG 2.1 accessibility contrast ratios.

8pt base unit

All spacing & sizing is measured in increments of an 8pt base unit.

Responsive

Built with auto layout, constraints, layouts & grids enabled.

Atomic design

Nested atoms for consistency and improved performance.

Light & dark mode

Toggle between light and dark mode with a single click.

Documented

Documented variables, styles, and components for easy communication.

Newest features

Newest Figma features like variants, auto layout, properties & variables.

Optimized for customization

Every variable, style, and component has been optimized for fast, easy customization and long term maintainability.

Buy the SystemPreview in Figma

Color Variables

Customize a small number of Primitive Variables (ie. Blue-100) and watch all of the Semantic Variables (ie. bg/brand/default) using that color update automatically.

Number Variables

Customize a few number Variables and watch every component update it’s sizing, spacing, and corner radius.

Text Styles

Update all text styles to match your branding with the click of one button in the Batch Styler plugin.

Loved and trusted by 100,000+

Teams, designers, students, contractors, PMs, and developers!

“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

“It’s a 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

“UI Prep's kit is extremely thorough and well-organized. I highly recommend the kit to any designer that wants to save time and create beautiful, cohesive work.”

Renee Bruhn

Student at Design Lab

“This is an absolute time-saver. The entire product is prepared with utmost attention to detail, everything is well organized and easy to use even for inexperienced designers and developers. It helps to save hundreds of hours!!

Murat Alpay

Product Designer at Teknasyon

“The UI kit has helped 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

“l love the attention to structure & approach taken to build the system. By far one of the best organized and structured kits out there, especially with the base components and use of variants.”

Shane Goodwin

Product Designer at Nomos One

“@molly_hellmuth is the Figma Queen, as far as I am concerned. She created an extraordinarily advanced design system that contains everything and the kitchen sink. A great learning and prototyping resource, worth every penny.”

@webgyver

UX & UI Designer

“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 Designer at Innovatemap

“I highly recommend this UI Kit! It was a well organized 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. 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

“What convinced us to use the UI Prep Design System is its ease of use and clarity. It contains exactly what is needed and therefore it is easy to grasp.”

Florian Mysliwetz

Product Designer at PatentPlus

“UI Prep is super easy to use and speeds up the work in a way I couldn't imagine. The infinite number of possible combinations and customizations makes it the perfect tool for any designer and team, highly recommended!”

Matteo Meneghetti

Head of Design at AFG

“The UI Prep toolkit has been invaluable for our small team in the few short months that we've had access to it - if only we'd found it sooner! It has at least halved the time needed to set up our design system!

Jason Arnold

Sr. Designer at Publicis Worldwide

Advanced features made easy

Built with Figma’s newest and most powerful features to make a system that is efficient, intuitive, and easy to use for the whole team!

Fully tokenized

Fully tokenized with Figma’s newest feature, Variables. Allowing colors and numbers to be customized, used, and synced with the dev team like never before.

Color Variables broken into two collections, Primitive and Semantic

Number Variables for consistent spacing, sizing, and corner radius

Light & Dark Modes that can be toggled between with a single click

Multi-Brand ready for teams with multiple products

Responsive behavior

Components use Auto Layout to automatically grow, shrink, or reflow as their content changes. Meaning Designs automatically look great on any device or screen size.

Auto Layout applied to components for seamless resizing.

Auto Layout Wrap applied where dynamic behavior is needed for both vertical and horizontal growth.

Max & Min Sizing applied for a greater level of control over a component’s height and width.

Grid & Layout styles for every breakpoint and resizing behavior.

Intuitive Components

Components are built with Figma’s most powerful features. Making each one easy to maintain, discover, and customize with Properties and Variants.

Variants for components with multiple types, states, and sizes, etc.

Exposed nested instances to make customizing nested elements easy in larger, more complex components.

Properties to make customizing components quick and intuitive while designing.

Interactive components for instant prototyping interactions and capabilities.

Color with confidence

Establishing an attractive, accessible, tokenized color system is hard. UI Prep makes it easy!

Buy the SystemPreview in Figma
Light & Dark
Fully tokenized with Variables to make designing, theming, and developing as seamless as possible.  Toggle between light & dark with a single click!
Adobe Spectrum
Heavily influenced by the industry leader in color, Adobe Spectrum. With detailed guides to follow, you’ll be confident your doing color right.
Intuitive naming
Practical variant naming makes them easy to understand, predictable, and more likely to be used correctly by the whole team.

Who this system was built for

No-fluff design system that delivers value

Students

All skill levels who are learning how to best utilize Figma and it’s newest features.

“It teaches you the best way to work! It's packed with the best Figma features to help you design better and be more effective! I love the fact I can become a better designer just by using UI Prep!”

Marco Kramer

UX/UI Designer

Designers

Solo-designers, contractors, and startups who need to be quick and nimble.

“This design system will save you and your team so much time it will feel like magic. 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

Agencies

Agencies who need a jump start with each client to deliver value quickly without sacrificing quality.

“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 Designer at Innovatemap

Teams

Teams building new or updated design systems and want to get started on the right foot.

“Highly recommend the UI Kit! It is well organized with lots of components and simple to get started! The kit has dynamic components and is easy to customize our designs. A great product for my team!”

Jason Lopez

UX/UI Designer at H&R Block

5.0

Simple pricing

Pay once, use forever in unlimited projects. Free updates for life.

Free Demo
$0
Try a free version of the design system with fewer components, variables, and styles.
Unlimited Editors
Interactive components
25+ Number Variables
3+ Component Categories
150+ Color Variables
Light Mode & Dark Mode
Auto Layout, Properties, Variants
Quick Start Guide
Unlimited Projects
Free updates for life!
Get for Free
Individual Plan
$99
Get a single license for solo designers, developers, and contractors.
Unlimited Editors
Interactive components
25+ Number Variables
30+ Component Categories
150+ Color Variables
Light Mode & Dark Mode
Auto Layout, Properties, Variants
Quick Start Guide
Unlimited Projects
Free updates for life!
Buy Now
Team plan
$199
Get an unlimited team license for small & large teams, agencies, and startups.
Unlimited Editors
Interactive components
25+ Number Variables
30+ Component Categories
150+ Color Variables
Light Mode & Dark Mode
Auto Layout, Properties, Variants
Quick Start Guide
Unlimited Projects
Free updates for life!
Buy Now

FAQs

Still have a question? Send an email to molly@uiprep.com

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.

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.