Figma Starter UI – Kit: How to Work Faster as a Designer (Part 1)

Hi my friend!
Today I would like to talk a little about how much time a designer spends on tasks, and how to reduce this time. We will also analyze the creation of your first starter UI-Kit in figma. It is he who will become the main tool when working with new projects.
Figma source is here!

Why do you need this

Let s remember the beginning of your work with a document in figma:
you create a file, throw screenshots with technical specifications and some kind of prototypes there. Then you gradually begin to sketch out the interface elements and again draw the buttons that you drew a million times. Then you add text, apply font styles to it. I can directly see how you are looking for your favorite Montserrat or Roboto again, then you go into the palette, choose the desired color, and some even use an eyedropper. Then you adjust the shadows for the buttons, rounding, blurring … Ugh, it s already scary to imagine!
As a result, you spend several hours of your time on 1-2 simplest screens. That being said, you have a whole bunch of styles and colors, although there are a few simple elements on the screen. Then the developer starts cursing you for this mess with layers, colors and other parameters.
That s why you need to create your own Starter UI – kit.

What is Starter UI-Kit?

Starter UI – Kit is a basic set of elements and styles, which is designed to reduce the time for creating standard elements. It differs from a full-fledged design system in a simpler set of elements and is not tied to a specific style. Simply put, these are asset buttons, fonts, colors, and everything that you usually draw on your artboards.

Get to the point!

I don t want to burden you with a lot of information, so we will split this article into several parts. Directly in this we will create the following:

• Color palette
• Shadows
• Text style set

Color palette

Any design element has its own color, so the first thing we do is create a competent color palette. Most often in interface design, each color corresponds to a specific state of an element, for example:
red – (error), green – (success) and yellow – (warning), blue – (clickable link). It follows that we need to create the following set of colors:

• Primary (element s primary color)
• Success
• Info (links, etc.)
• Warning
• Danger (error)

I will also create a few more colors.
For example Black and Gray, they are required for the text.

Next, we need to create a set of shades for each color.
To do this, I use the online tool Eva Colors Generator It generates the desired shades and their number by itself. As a result, we get this:

To group all shades into categories, you need to assign a name to each of them in the following form: Category name / Shade number.
For instance:

• Primary / 100
  Primary / 200
  Primary / 300
• Warning / 100
  Warning / 200
  Warning / 300

Then our palette will have the following structure:

Fonts

Everything here is as simple as possible!
You need to create a set of all the necessary fonts in all the necessary sizes that you use in your work. Usually you need heading styles, a basic body font, fonts for buttons and links, but it all depends on your specific needs.
I personally use Roboto as the base family. I don t know, I just love him! For each desired size, I create 3 sub-styles: alignment on the left side, centered font and on the right.
It looks like this:

Next, we assign a name to each of the fonts, the same rules apply here as when creating colors: Category name / alignment type

For instance:

• Body large / left
• Body large / center
• Body large / right

Shadows

I think you are starting to understand the principle of creating styles. Therefore, now you have to create a small set of shadows with your own hands.
I, in turn, will give you the Figma source with all the materials that we talked about today in this article.

This was the first part of a series of articles on creating the Figma Starter Kit.
In the future, we will jointly design a powerful tool that includes a huge number of components and symbols!

• Figma-source of this lesson is in the cart, be sure to download it and see 🙂

• You can feel free to contact me for all questions
• If you are too lazy to wait for the next lessons and you want to have access to the full design system now, then you are here