Figma Starter Kit: How to Work Faster as a Designer (Part 2. Buttons)

Hello Friend!
I finished work on a large project, so I m again ready to devote time to articles and training. During such a long absence, I have compiled a large list of useful materials that I will definitely share with you later, so do not forget to subscribe. ?
Okay, let s get to the point!
Last time we started to form a Starter-kit, which will save your time when creating the same type of design elements. If you haven t read the first article, then be sure to check out: Figma Starter Kit: (pt.1)

Buttons

It s hard to imagine a web or mobile design without buttons. It seems to me that this is one of the most basic elements of the interface, which is why today we will talk about their creation. Let me tell you a little about the types of buttons and the rules for creating them, and below I will attach a layout with ready-made ones.

1. Types of buttons

There are a huge number of types of buttons and variations in the location of content in them, but for our purpose I want to highlight 3 main types:

• Text Button
• Icon + Text (Icon can be located to the left of the text or to the right)
• Button – icon

2. Anatomy of a button

The main elements that make up the button:

• Text
• Fill (background)
• Outline
• Icon

3. Button state

For myself, I distinguish 4 main states in which the button can be:

• Normal – the standard state of the button, on which there is no interaction
• Hover is an intermediate state when hovering over a button
• Pressed – the state of the pressed button
• Disabled – inactive state

I would strongly recommend not to be lazy and make a set of all four states. When we design a large website or web service, we spend a huge amount of time drawing buttons in different states, and we could spend it on something really interesting.

4. Colors

In the last article we made a color palette, and there I talked about color sets in detail. The same rules apply to buttons as to other elements. We use 5 colors:

• Primary
• Danger
• Warning
• Info
• Success

Homework

Below I will attach a small Figma source, which will contain a small set of buttons. But they will be in the same size – Big, your task is to make this set in two sizes: Medium, Small. And in the next article, you will check your resulting set with mine.

Run into my Telegram for Figma – the source

Previous article- Figma Starter Kit: (pt.1)