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

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:

1. 1. How we built a UI Kit in Figma from scratch: the intro
   2. How we built a UI Kit in Figma, Part 1: colors, typography, shadows and layouts
   3. How we built a UI Kit in Figma, Part 2: buttons, alerts, tooltips, forms and more.
   4. How we built a UI Kit in Figma, Part 3: modals, cards, tables, and more complex items.
   5. How we built a UI Kit in Figma, Part 4: accordions, range sliders, and advanced Figma settings
   6. How we built a UI Kit in Figma, Part 5: putting it all together.

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.