How we built a UI Kit in Figma from scratch: The Intro

January 3rd, 2023, posted in learning
by Adelina

Back to blog

UI kits are a great way to design apps quickly and efficiently and to make them ready for code. While also, for designers, taking a UI kit apart is a great way to learn and improve their skills.

We’ve used UI kits many times throughout our 10+ years of web development experience. They make app designing like a puzzle where every piece is labeled and ready to go. And since they’re so convenient, we asked ourselves - “what if we made our own?”

So we’re starting out a series of articles about that very journey: how we built our own UI kit in Figma, from scratch. We’ll take it from the very basics, like colors, typography and layout grids - all the way to building complex components to design entire pages in a fraction of the time it normally takes.

Through this series, you’ll find out what really goes into creating an original UI kit, how we started one from scratch and how we plan to put it to great use. If you’re building a complex app that will continue to grow, having your own UI kit will help you save lots of time when adding new pages and new features.

Here is a quick overview of what we’re going to cover in this series:

- How we picked out colors and fonts for our UI kit and what kind of variations we added
- How we set them up in Figma so we can use them as styles
- How we set up components in Figma using auto layout, so that all elements we create are fully customizable and resizable
- How we put these elements together to create dashboards and example pages.

If you’re planning to follow along and build your own UI Kit, you should figure out your visual style and decide what you’d use your original UI kit for - this will make it easier for you to find which colors and fonts will work best for your own UI kit. Since this was more of a learning experience for us, we didn’t base it on our own branding and decided to just be creative.

We’re going to add links to each article from this series right below, as they’re published:

We hope you’re eager to begin this journey with us and we can’t wait to show you everything there is to know about building an original UI kit.

Eager to learn more about UI/UX design? We’ve created our own framework called UFOs that goes in depth about the best UI/UX practices, based on our 10+ years of experience.

If you liked this article subscribe and get an email when we publish new, juicy stuff. We hate spammers, so we don’t spam.

About the author

Adelina

Artsy kid navigating the world of tech for the first time and trying to learn as much as possible about it. My biggest passions are video making, writing, and TV shows I can cry to at 2AM. I also really love IKEA.

See more articles by Adelina