How To Build Your Design Systems

In partnership with

Novaxidil Triple Action Hair Regrowth Treatment

Novaxidil is a Premium OTC Triple Action hair loss treatment that stimulates hair regrowth, prevents further loss, AND nourishes your scalp with a combination of clinically proven ingredients: 5% Minoxidil, 2% K-Conazole, 1% Nicotinamide, Vitamin K, Biotin, and Collagen Peptides.

Our team of MD/PhD's formulated Novaxidil to maximize results while minimizing side effects.

MINOXIDIL 5%: Minoxidil is the Gold Standard for hair regrowth. It achieves this by shortening the telogen phase, extending the anagen phase, increasing blood flow to the scalp, and increasing dermal papilla cell activity.

K-CONAZOLE™ 2%: Studies have shown that K-Conazole™, a proprietary version of the popular compound, blocks the production of dihydrotestosterone (DHT), a hormone linked to male pattern baldness, as effectively as prescription alternatives like FINA without the side effects. It works by inhibiting the 5-alpha reductase (5AR) enzyme, which converts testosterone into DHT.

NICOTINAMIDE 1%: Nicotinamide, also known as niacinamide, has potent effects on hair regrowth. In studies, it has been shown to increase blood flow, and reduce inflammation to the scalp, as well as prevent premature catagen entry, and increase hair thickness. Nicotinamide works in synergy with Minoxidil, and K-Conazole™ to maximize hair regrowth, and minimize loss like no other product on the market!

Before you give up, and start rocking the "bald look," give Novaxidil a try. We're confident you won't regret it.

Learn More

Hey fam, it’s Kushagra from AtlasMoth. I had a chat with a founder-turned-VC last night—super chill. We talked ‘bout my product around employability solutions, and they hit me with some dope Qs. One was, ‘What’s your UI tech stack?’

That made me think: if you’re a builder, you gotta know your UI game. Like, how do you craft vibes that feel made for your users?

So, in this drop, we’re diving deep into how to build fire design systems and UIs that slap.

“All you need” guide to building your design systems & UI kit.

I been in the game for five years, tried all kinds of design systems—free, paid, and ones I built myself. Each had its ups and downs.

So, I made a cheat sheet to help you build your own.

1. Intro & Motivation

Starters to help you get started:

• Are you the main one using this, or is it for your team?

• Is it for one app or for the whole squad long-term?

• What vibe do you want it to give?

• What UI stuff does it need to have?

Actions at this point:

🗂️ Make a new Figma file.

💡 Name it. Pick a name that vibes with the style of your parts.

📄 Set up your page structure. This part’s key—it shapes how you and your team see and use it.

For this setup, I made two main groups: Foundation and Parts.

Foundation is where all the basics go—like colors, fonts, and spacing rules. Parts is for UI stuff like buttons, cards, and nav bars.

Each style or part gets its own page. This keeps things clean and easy to find, which is a lifesaver when your design system gets big—like 70+ parts.

If you’re working with a smaller setup (under 20-30 parts), you can put everything on one page. But once it grows, having separate pages makes it way easier to manage!

2. Build the foundations

I call it foundation ‘cause they set the rules for how the UI should be built. Think of it as the guidebook for best vibes and practices.

🎨 Colors
🌘 Shadows, lifts, and focus looks
🔢 Numbers (gaps, pads, rounds, sizes)
✍️ Fonts and text styles
👤 Avatar looks
📐 Grids

Color palette

To make your colors look 🔥, use the Local Vars section in Figma. This is where you can set up a collection and add modes like light and dark. Boom—your design system is ready for both vibes.

Here’s what to do:

🎨 Pick your colors (HEX, RGB, or whatever).
📂 Make a collection in Local Vars.
🔑 Add vars for each color style.

Must-have color styles:

• 🌈 Brand’s main color (also the accent).

• 🎨 Any brand side colors (secondary/tertiary).

• ⚪ Neutral tones (white, black, grey).

• 🛠️ UI states (success, danger, warning, info).

• 🌅 Grads or backgrounds.

Shadows, Elevations, Focus Styles

Make local styles for your shadows in Figma. You can use these when you turn the file into a library (I’ll show you how later).

Here’s what to do:

🖤 Set how your shadows, lifts, and focus styles should look, then make them in the Local Styles section.

There’s no right way to make these styles, just like there’s no perfect way to set up a page. But I’d say keep shadow styles separate from lifts and focus styles.

Number variables (spacings, paddings, roundings)

Just like with colors, use Local Vars to make a collection for number vars.

Here’s what to do:

📂 Create a collection in Local Vars.
🔑 Add vars for each style.

Typography

Colors and fonts are key in any design system. Setting up font styles early saves mad time when building interfaces.

Group them by:

• 📑 Titles/headers

• 📝 Body/paragraphs

• 🏷️ Label text

• 🔘 Button text

• 🔗 Link text

Here’s what to do:

• 🎨 Pick the fonts or font fams you want.

• ✨ Make text styles in Figma for each one.

Grids

Use grids to set up layout options in your design system.

At first, grids were tricky for me, and even now, I think they could be better.

But trust me, having clean layouts saves time and keeps things consistent across your app or site.

Define your layouts and set their styles in Local Styles.

3. Build Your Parts

This is the fun part—where your design system finally comes to life.

A few tips from me:

• Before building, make a list of all the parts you want. Like I said, make each part on its own page before you start.

• Start with the small ones, the basics. If you’ve got a toast component with a close button, build the button first. Then you can build the rest.

• Keep naming your parts and variants clear so everything stays consistent.

• Decide how you’ll document your parts, variants, and properties.

What to do here:

• If you haven’t, create pages for all your parts.

• Define the properties and variants each part will have.

• Build each part! I’d love to make guides for each part, but that’s up to you—let me know if you want 'em.

4. Test Your Parts

Once you’ve built everything (or after each part), take some time to test:

• Bugs or errors in variants.

• Spelling, grammar, and punctuation in text or properties.

• Contrast checks.

• If your part has light and dark modes, test if the colors switch right.

• Accessibility tests. There are tons of Figma plugins for this!

5. Publish Your Design System

You’ve got a few ways to share your new system in Figma:

• Share the .fig file by downloading and adding it to other Figma teams or projects.

• Publish your system as a library so you can use all styles and parts in different files. (This is for paid plans only.)

• Drop your design system in the Figma community.

What I found amazing this week

Is your logo really standing out, or is it blending in?👀

This track gave me a serious boost—check out ‘Inside My Mind’ by Groove Armada🎵

Could iOS 18.2's AI feature change the way we write emails and essays forever?✨