A recap of my first month building a Design System in public

It's been a month since I started building a design system from scratch in public, and I wanted to share with you a quick recap of my journey so far.

If you want to follow my journey, follow @mauro_codes on Twitter. I'm sharing daily updates about what I learn and asking for feedback to build the best possible product.

May 26:

It was really tough to start with a white canvas. A few @figmadesign
courses and @mizko videos helped me a lot to bootstrap this huge project, so thanks a lot to them!

May 31:

Buttons usually are easy, but the hard part was learning how to properly use the concept of master components to apply style inheritance on all my Figma variations.

I learned a lot of new Figma tricks by working on these buttons.

Jun 3:

I struggled a lot to choose a naming structure for these variations. Once I got the technique, it was super easy to replicate.

Just keep in mind that is totally normal to waste time at the beginning, and you'll eventually get better

Jun 7:

Finishing these buttons was a huge motivation boost!

At that time, I didn't know that I was making a few auto-layout mistakes that eventually :sweat_smile:

June 8:

My first comparison between the first days and the current status. That week was super productive.

I also started working on my Text Inputs. I also had the opportunity to reuse my buttons to produce a wider range of variations

Here's another gif. This time about the text input variations

June 14:

That week was tough, but I managed to build a few variations for my switches.

Decisions about sizing and shape served as inspiration for the next components: Radio buttons and checkboxes.

June 16:

I uploaded my first video showing more about my process using Figma.

In this case, I was working on my date pickers variations.

June 17:

I was working on the first version of my radio buttons.

I had a few contrast issues that I ended up fixing. Sometimes you need to go to sleep, and eventually, you'll figure out the best solution.

June 19:

Switches, radio buttons, and checkboxes ready 🥳

I also decided to build a few examples to use all my components and see how it felt.

I can't stress enough how important this exercise was. I applied a few changes and detected a few inconsistencies that were impossible to see in isolation.

June 22:

Time for search boxes.

This one was relatively easy to build, and I could reuse many design decisions from date pickers and text inputs.

June 23:

I was lying the whole time. 🐶 Acho is actually building the design system.

The same day, I started with the modals and list items.

June 24:

Hours and hours trying to figure out the different states for a modal that shows dropdown items. Pretty happy with the result so far.

I ended up building a few variations for the modal to support dropdowns with multiple selections.

June 25:

Finishing my modal variations

It's been a productive month, and I have big plans for July. Some things I already have in mind for the next weeks:

• Cards
• Horizontal Carousels
• Bottom sheets
• Action sheets
• Chips
• Lists

I also have to start working on a minimal landing page for the product!

If you want to follow my journey, follow @mauro_codes on Twitter. I'm sharing daily updates about what I learn and asking for feedback to build the best possible product.

Have a nice and productive month 💪