Product design 101 part II.

Every designer working in Figma would agree that having components is vital to make your work (and life) easier — whether you’ve been in the industry for years, or just starting, this feature is key to optimizing your work. Today, let’s have a look at this important element of the Figma design process, how to create it, and what you should know about its properties, states, and more.

What are the components?

Components are elements (created by you or your team) that you can reuse anytime you want across different design projects — see, why these elements can facilitate your work. You can create components out of any layer or object you’ve designed, which gives you plenty of creative freedom. Components could be literally anything, from buttons to labels to search bars to icons — you name it. Components could be divided into two different aspects: the main component, or the one you originally created, and instances of the said component. The two are linked so that instances will be automatically updated with all the modifications you add to the main component [1].

As a designer, you can define the styles, states, and properties that your component will have.

How to create a component

There’s hardly anything easier than creating a component. First thing first, make sure you know exactly which layers you want to use to create your component. If we consider a button as an example, you might need a background and some text. Based on the type of your component, however, this can change. Next, select your desired layers and click the “Component” icon in the toolbar. You will then see a component icon appearing in your layers panel. To reuse your component in the future, you can create the instance. When your component is selected, you can create a duplicate of your master component (use the shortcut command + D for this purpose). While holding the Alt key down, simply drag your instance out of your component. You can then copy and paste it to any other location.

Based on the types of the component, there are some peculiarities to consider when working with them, so we’ll have a look at some of the most common components.

Working with buttons

Buttons might seem simple, but in reality, many aspects make them work: omit any of these elements, and you’ll unleash your developer’s rage! Therefore, consider these things when working with buttons:

• Buttons have different states. The default state is the very basic state of your component; the disabled state means the button is not activated, but your design goes beyond these basic two states. Don’t forget about press state (what users will see when pressing the button), and loading state — the one people very often forget about — but it’s important because nothing in this life happens instantly!)

• You have to respect a certain hierarchy when designing your buttons. Don’t forget that there should be primary and secondary buttons, and make sure you define them clearly.

• Ensure you don’t have even one single button without states — this is a huge error that you better avoid at all costs!

Working with inputs

If your design includes any input fields for users to use and fill in with any information, here’s what you should know:

• Your input fields may include icons and be of multiple sizes — don’t be afraid to experiment and be creative.
• Input fields might be different not only in looks but in states and styles, too.

• You might want to differentiate the inputs to demonstrate different states, like process, for when the user is using the field to add any information; error, for when something goes wrong; and success, for when the information was entered correctly.
• It’s important to be as clear and precise as possible when trying to convey any information. For example mark the “error” state with not only color but something else, too, to highlight that something is wrong and attract the user’s attention.

Working with labels

Labels are important to structure your content, and you can even link them to different layers. They come quite in handy when documenting the changes and navigating them later, however, there are a few things to consider, too:

• Style your labels differently than your buttons. Styling them in the same way is a huge mistake since these are the two different components, and yes, it makes a huge difference when working with them later.
• Don’t forget that labels are for conveying information. So aim at being as clear as possible when creating them.

Working with search bars

Some people would argue that search bars are not that important, but I believe every single element of your design should be carefully thought through. Search bars should respect some rules as well. My best tip for working with search bars would be to allow them to be expandable. This way, they’ll be changing and automatically adapting to what’s been typed in.

What’s even more important when working with any component, is to specify all the components you’re creating. Both, to organize your own work better and to facilitate the communication between you and your colleagues if you work in a team and share your components in a library, you should name them and position them in the correct folder, after having them tested. In particular, you should always test how they look and try out different variants before using them.

These are just a few components to consider — but there are many more you’ll encounter when working with Figma, so it’s worth taking your time and getting yourself familiar with how they work. At the end of the day, once you get used to creating components and using them, you’ll see how your productivity skyrocket — and you’ll appreciate having a library of elements you can reuse as many times as needed.

Learning design might seem complicated because you have to navigate a lot of different textbooks and materials that might be confusing. I’ve been there, and I know the struggle. That’s why I decided to create my own design handbook with easy-to-digest guidelines for you to apply in your work as you’re navigating your design journey — find out more and become a better designer with more tips!

[1] https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma