Thank you for purchasing the UI Prep design system! We've prepared this guide to help you get started as quickly as possible. You'll learn how to download/import the Figma file, customize text & color styes, use instances, and edit master components.
Getting setup with UI Prep is quick and easy. All you need is a free or paid Figma account. Once you purchase the design system, download one or both of the files and import them into your Figma account. The files can be downloaded as many times as you need and used for unlimited projects!
At the end of the checkout flow, select "view content", then download one or both design files. The design files, and all future updates, can also be downloaded from your Gumroad Library at any time. You can do this by navigating to your Gumroad Library, selecting the "UI Prep Design System UI Kit" product card, and then downloading the design files.
Once you've downloaded the file, drag and drop it into your Figma Project page, Draft page, or Recents page. This can be done using the browser or desktop app. If you run into any issues, use this Figma Help page.
Take a look around at all the pages in your new design system! The Welcome page has some tutorials and playgrounds to help you get started. All other pages have a "tips" section explaining additional information.
If you're new to Figma or want to level up your design skills, take a look at the resources below. We also offer 1:1 tutoring if you'd like to go over any UI Prep, Figma, or general design topics!
If you purchased a Team license, you can publish the design system as a Team Library to access the styles and components from multiple files. Learn how to use and manage Figma libraries here.
Every text and color used in the design system is an applied style. This makes it possible to customize the design system to match your branding in just a few minutes. By using styles, scaling designs and maintaining consistency is very easy.
UI Prep uses light and dark overlays in each of the color style variants to auto-generate a well balanced color range. This means you only need one base hex code to edit all variants of a single color. For example, to edit the primary color, add the new base hex code into each of the 7 variants. Watch the video below and follow along with the mini playground inside the design system.
UI Prep bases it's text sizing and weight on the Material Design Type System for a well balanced hierarchy. Each of the line heights are also rounded to the nearest 4px to best align with the base unit (8px). Adding and updating the text styles is easy. For example, to update the font family across all your designs, click into each text style and select the desired font family from the dropdown. Watch the video below and follow along with the mini playground inside the design system.
Start designing by adding instances of the master components to your designs. Instances can be added by dragging and dropping them from the Assets Panel. They can also be overridden based on the context of your design. For example, you can override the variant values, nested variants, icons, text, styles (eg. text, color, effects), and size. Watch the video below and follow along with the mini playground inside the design system.
All master components can be found on the "Master Components" page. Here you can add, update, or remove master components as needed. Most components have been combined as variants and use a "Bulk Edit Zone" to organize their atoms and base components.
The "Bulk Edit Zone" is unique to UI Prep. It's a space that houses all atoms and base components used to build a particular component. Making changes in the bulk edit zone will impact some or all of its components.
Atoms: Atoms are master components used as building blocks in other, more complex, components. Atomic elements help you build, customize, and maintain components.
Base components: Base components are a way of managing component states and variations efficiently. They work by taking an instance of a component, overriding its properties to create a new state, and then turning the altered instance into a master component of its own. Edit the base component to update the structure and behavior of your variants.
Components with multiple types, states, sizes ect., have been combined as variants for easer use and maintainability. You can learn more about what variants are and how to use them here.
Editing variants in bulk: To edit variants in bulk, go to that component's Bulk Edit Zone and make changes to the appropriate Atom or Base Component(s). For example, to update the label color for every input, simply edit the "label" Atom.
Or, to update the input stroke thickness, select each Base Component input and edit the stroke.
Overriding variants: To update component states and types, select the appropriate variant(s) and apply overrides. For example, to update a button color, select all buttons and override their colors.
Adding variants: More variants can be added by duplicating existing variants or by dragging and dropping master components into the variant bounds. For example, to add a new badge color, duplicate an existing set, update the color, and change the variant name.
All icons in the UI Prep Design System are from the Material Design library. To add more icons, use an icon plugin or drag and drop icons you've downloaded (svg). For example, use the Material Design Icons plugin to add icons, then turn them into master components.
Now that you know the basics, it's time to start designing! If you have any questions, issues, or comments, please reach out to email@example.com.