How to Design Your Own Component Library Without Spending $$$ on Courses

I started a new position as a product manager in a pre-seed stage startup 4 months ago. I was tasked with designing a B2B SaaS dashboard with multiple components to enable education based service businesses to list and manage their classes.

After having 5 discovery calls, I was aware of the issues that our potential users were experiencing, and we mapped out 7 scopes for the initial MVP using low-fidelity wireframes.

It was then time to convert them into high fidelity designs, but there was a problem.

I hadn't built an entire library of components before.

I was aware that if we didn't get it right from the start—with a growing design team to manage, a two-week deadline, and the knowledge that this would be a long term project—we'd wind up with a Frankenstein product.

By the end of this article, you'll understand how I solved it without needing to invest a lot of time or money in pricey Figma design courses.

When I first faced this challenge, the options I had to overcome it wasn't great:

• At most, I'd have to watch 3-5 YouTube videos. It would have taken too much time to return to it, relocate the useful parts, and inspect it by zooming into the Figma panels in the video.
• I didn't want to find a mentor either because I felt uncomfortable to constantly interrupt someone with my questions. Some questions are too nuanced, like knowing "when to utilize variants and properties," which only comes up when you're in the process of designing the components, not before.
• A three-month, high-priced Figma UI design course was not something I could entertain or devote the time to because I needed to hit the ground running quickly.

Without a reliable source to depend on, I was running out of time before the sprint had to start.  That's when I began researching design kits.

In the past, I've learned that handwriting any top-selling advertisements, is one of the best methods for learning how to write compelling copy. "Copy work" is a term that refers to this type of learning. By rewriting the text from the advertising, our brain starts to establish a pattern for what appeals to people. Learning component design can be done using a similar approach.

When I remembered this, I went to Google and typed in "Best UI kits figma," which brought me a lengthy post from Untitled UI comparing them to other design kits and claiming why they were superior and what the competition lacked. It turns out that they are actually superior.

They position themselves as a way to "Kickstart any project, save thousands of hours, and level up as a designer."

Even though thousands of hours could be an exaggeration, it turned out to be a good starting point for this project and, more importantly, a way for me to grow my component design skills and understand where I was lacking.

Getting started with Untitled UI is easy

They've free and paid versions of the kit, and it's well documented with no filler language. I really liked that the documentation was concise and complete.

To start using the free version, you simply have to copy a draft of their file from Figma into your own account.

Once you've done that you'll see the pages on the left side panel to be neatly organised into separate sections. It goes from UI foundations to application components like card headers, modal, charts and much more.

So how does this help you become better at designing a component library?

Instead of watching someone else do it, inspect the components in Figma to learn how to create them.

A side panel navigation was one of the common design pattern in our low fidelity wireframes. Since it was used repeatedly across the product, I decided it would be better if we made it a component.

I began by going to Untitled UI, where I got a close reference to the component and copied it into our project. Then, before creating one from scratch, I quickly scanned the component's layers to understand how they were structured.

I noticed differences between what I was doing and how they were implementing it.  They should have been identical, but they weren't. For instance, if I added content to a navigation link, the text would overflow. I scrolled to their component since I was aware that I was still lacking something and made an effort to identify what it was. They had set their layer's resizing for width to fill container whereas my one was set to hug contents, which had resulted in the overflow, when the content inside the component changes, the parent component has to accommodate it otherwise it won't be usable. That's how I learned how to properly use layer resizing.

Instead of doing this, you could have observed someone else do it on YouTube. What's frustrating about watching YouTube is that they may not be teaching using the exact component you want. They might also fail to clarify layer resizing's importance in the context of what you might be designing. Your performance and productivity will significantly improve after you learn how to use it properly. I couldn't understand it before (even with Figma's official documentation because it was too abstract). I do understand now thanks to Untited UI.

Reference the design kit for answers if any questions come up when designing a component.

Creating variants and properties for components was one of the key difficulties I encountered when designing our component library.

During the design process, questions like "Should I just make it a property so it's flexible?" or "Does this need to be a variant?" and similar ones arose. Answering them was easy as opening up my copy of Untitled UI.

It's simple to incorporate a component into a design that wouldn't work in all situations. The result is a design system that is bloated and complex due to poor adoption by other designers. What happens thereafter is that they'd build components that are too concrete in order to fulfill their job but it's a painful workaround.

In one particular case, we were creating a button with dynamic content. It had to vary in size and behave differently depending on the context of what had to be done in the screen.

Untitled UI's button component implementation has exactly what we required when I checked it out. I had confidence that it would meet our needs in the majority of situations after seeing how it was set up.

If you're designing a component library, you'll probably have a lot of complex questions, just like I did. I didn't need to consult anyone. The creator – Jordan Hughes – has baked all the solutions inside the Figma file and you can just refer to it. In a certain sense, it is like them advising you but through the design kit.

Save time, use a design kit.

Given the time constraints, it was easy to complete the high fidelity conversion since we used the kit to create our component library; without it, the effort would have been too significant and likely resulted in a messy situation that we'd have to pay for later on.

It's as close as you can get to having a book or an experienced UI designer that you can ask questions while you're learning and building . Which is far more preferable than spending weeks or months on a pricey design course.

Next actions for you

• Go ahead and grab your copy of Untitled UI
• Use the Styler plugin to extract the styles from their file and then paste it into your own project. Then use the Apply Styles function in Styler to automatically create the required styles.
• Once you have their styles setup in your project, inspect the input field component layer by layer to view how it's structured. Ask yourself, where have they used auto-layout? How have they managed icons inside input fields? How does that affect the text input area? How did they manage layer resizing when the input and the icon need to work together?
• (The reason for choosing the input field component is because it's diverse in its nature to include most of what you need to know when you're building out the rest of your component library.)
• Once you're done inspecting it, try creating it from scratch by yourself and then try applying the child component into a screen where it will be utilised and observe if it works as intended.
• Repeat this process for all the other components in your library!

There's no one size fits way to learn how to build your component library. However, if you're like me and you enjoy learning by doing then using pre-existing design kits is the way to go.

If you liked this article, you'll probably like: "How do you break into a UI/UX design role even during a layoff period?"