I like many things about Figma, but I especially like the components feature, the component properties, and the auto layout.

I must admit, however, that sometimes it’s not worth using all their power. You might be thinking, “Why not? Figma makes our work so much easier and helps us a lot, so why not use all the power of the software?”

As a product designer, I have worked on many projects, ranging from small apps to very complex ones, developed design systems, and created many UI kits.

Some basic components can be built in less than 5 minutes, for example, the toggle component. However, complex components like the input component can take much longer. Would it be worth building full variants for every project?

Whenever I create components, I ask myself, “If I create them with all their possibilities, will that help me design faster?”

Suppose I build an app with just two input fields: one for email and one for the name. Would it be worth building all the possible input options, including all states and different sizes, or just what I need?

Creating components takes time and can be a job that takes a whole day for one designer. I try to focus on what is necessary, not something that is not needed.

In this article, I want to answer some questions and explain my point of view. I will explain how complex components slow you down and demonstrate we can work efficiently and faster.

I hope you will understand why I think it is not always worth creating a sophisticated design system UI kit.

Usually, there is limited time, so it is better to focus on the design rather than the components

Creating components can take time, even for Figma masters. In addition to creating the component, testing and ensuring it works properly is necessary.

Furthermore, after creating the component, you should explain to the team that you’ve added a new component to the design system kit and how it works.

If you reduce the complexity of the component, you will be able to build it faster and have more time for design. You will also be able to release the component to the design team faster and the explanation to the design team will be easier.

The idea is to work smarter, not to make Figma smarter

Of course, you can build a component with many possibilities and options, but is it really smart? Let’s take a tree component as an example. It has default, hover, selected, and disabled statuses.

In addition to them, there are two more statuses, “hover selected” and “disable hover.” Do we really need to add these two statuses to the Figma UI kit? How often will designers use them?

It is like adding more ingredients to a simple dish. The more ingredients you add, the more complex the dish, but it might not necessarily result in better flavor. If the two statuses are not used often, adding them to the UI kit might not add more value.

In most cases, it is smarter to add these statuses to the product design documentation so that developers know how to implement them, but not to the UI kit. Adding unnecessary options to the UI kit can only confuse designers and slow down the design process.

The goal is to deliver the design to the developer or conduct a usability test as soon as possible

Remember that we use Figma to create a solution. While building components in Figma is fun (at least for me), delivering a solution to the users is the goal. Instead of developing many components that are not the main focus, putting effort into designing a user-friendly interface that is easy to understand and use is the important objective.

Many other factors can influence the choice of a solution, such as feasibility and risks, so it’s crucial to put in the necessary effort and time in Figma — not more than needed, but not less either.

That way, you can reduce the time it takes to deliver a solution to the user, because you’ll be able to conduct usability tests in advance and deliver the screens to development faster.

Build what you need, not what you don’t need.

If you want to buy a new t-shirt from a shop, you can walk, drive, take a taxi, or use a bicycle to get to the shop. All of them are good options in terms of effort and value.

But renting a Ferrari would be ridiculous (I know, I’m exaggerating, but it clarifies the point). Why not a Ferrari? You don’t want to spend so much money to buy a t-shirt from the shop.

The same applies when building components: balancing the need and the solution is necessary. For example, if you’re building a mobile app that will only work on the mobile size, building a button with three different sizes may not be necessary because you don’t need all these elements to complete the mobile app design.

To work fast on Figma, you need to know Figma well

It took me a year and a half to become an expert in Figma. This involved watching videos, keeping up to date with all the new features, reading the Figma documentation, and creating components outside of my daily job to practice.

If you try to create complex components in Figma and don’t understand how to do it, take your time and study Figma well after your working day.

The process is similar to athletes who exercise to achieve great results. In the same way, if you practice Figma, you’ll be able to work faster when the time comes. You can create components, animations, and even games to accomplish this. This will enable you to use various Figma tools and develop your skills.

Designers need to study the design kit; if it is complex, they do not.

If you’re part of a design system team, you know that creating useful components isn’t enough — you have to promote your work so that designers are aware of new components and updates.

Unfortunately, it’s common for designers to not keep up to date with the changes, especially if a component is complex and has many variations. That’s why it’s best to create what’s necessary and not overwhelm designers with complicated components that take time to understand.

This way, they can quickly learn and use them. Of course, sometimes it’s necessary to create complex components, but if you can avoid it, it’s better to do so. Remember that the designers may not take the time to study a design kit if it’s too complex.

Sometimes you work alone in a company, and you need to deliver quickly

Sometimes, you’re the only designer in the company and have to deliver quickly to development, so you don’t have time to create a complete UI design kit.

Since you’re the only designer working on the Figma UI kit, it won’t affect anyone else’s work, so you can create the very minimum necessary and organize the UI design kit when you have the time.

In any case, it’s important to take the time to create the components when you have the chance, that way, you will work faster in the future.

You can always find free time to update your design system UI kit

If your UI kit needs updates, you can work on it when you have free time at work. I believe most of us can find free hours every month, for example, after sending some screens to development or when some people from your team are on vacation. You can organize and update the design system UI kit in Figma during this time.

An effective way is to create a list of components that need to improve so that you will have something to work on when you have free time.

To save time, you can start with something that already exists

If you want to save time creating UI components, you can download some components from the Figma community and make changes to adapt them to your needs.

For example, if you need a button, you can download a Figma file of a button from the Figma community. After that, you can adjust the colors, margins, sizes, and radius according to your needs.

And that’s all. In less than 10 minutes, you will have a component ready to use.

Apart from that, many Figma UI kits are available in the community, so you can download a resource and adapt it to your needs. Here is an example of Ant Design system, Google Material Design, and the iOS UI kit for mobile design.

Remember that apart from this list, you can find icons kits, templates, and more resources for your design project for website design, mobile app design, landing page templates, dashboard kits, and other user interface design resources.

To summary

Throughout this article, we discussed why designing components for a Figma UI kit can be time-consuming and complex and why we must prioritize what is essential and what can be left out to deliver the solutions as fast as possible to users.

We discussed that creating components can take time. Although some components are easy to create, others can be more time-consuming to design. Moreover, I showed why complex components take longer to study, so many designers avoid them.

At the end of the article, I explained why it is a smart idea to update the Figma UI kit when you have free time at work and how Figma community resources can help you build components faster for a Figma project, whether it’s a mobile design, web design, desktop app design, or even a landing page.

One-on-one Figma tutoring with me

Would you be interested in one-on-one Figma tutorials with me to improve your skills and gain confidence using Figma? Fill out this form, and I will get in touch with you.

Thank you for reading the article. I hope this article helped you understand why It is unnecessary to build a full design system UI Kit in Figma to work quickly. Please feel free to share it with your friends or team members, and if you have any questions, please let me know.

If you enjoyed my article, I suggest you follow me and subscribe so you’ll receive an email whenever I post.

Want to get the most out of Medium? Click here to become a member. As a member, you’ll support me and lots of other writers.