Creating a Design System from scratch

I immersed myself in design systems—not just to understand them at a surface level but to break them down to their core. Simply reading documentation or looking at UI kits wasn’t enough. I wanted to go deeper.

Goal

My goal was to take my UI design skills to the next level by deeply understanding design systems, mastering advanced Figma features, and building one from scratch. I wanted to develop a structured, scalable approach and think like the designers at Google, Apple, Uber, and Airbnb—who create seamless, adaptable, and well-documented systems that power world-class products.

Challenges I Faced

Observing existing design systems wasn’t enough—I knew there was more beneath the surface. Every decision in systems built by Google, Airbnb, Apple, and Uber was driven by a deeper structure, logic, and thought process. I wanted to develop that same mindset—to understand how top designers think, make decisions, and create refined UI systems.

This curiosity led me to extensive research. I didn’t just skim through design systems—I dissected them. I studied how leading companies define tokens, establish foundational elements, and handle various use cases. I wasn’t just reading; I was analyzing, comparing, and uncovering the logic behind every decision.

Beyond UI Kits

I quickly realized that a design system is much more than a collection of UI components—it’s an entire ecosystem.

To truly understand how they are built, I explored the design systems of Google, Apple, Uber, and Airbnb—studying their documentation, structure, and principles. But research alone wasn’t enough. I had to go beyond theory by identifying patterns, breaking down foundations, and most importantly, applying my learnings by building a design system from scratch.

Mastering Figma’s Technical Side

To strengthen my UI skills and bring structure to my learnings, I focused on the technical aspects of Figma that power design systems:

• Auto-Layout & Component Properties

• Design Tokens

• Variables & Components

• Prototyping Complex Interactions
  

Building the Design System

After deep research and technical practice, I realized that true understanding comes from building. So, I started developing my own design system, laying the groundwork with:

• Color, Typography & Spacing

• Component Libraries

• Token-based Design

With the first version taking shape, I’ve completed key foundational aspects and am now moving forward—expanding components, refining documentation, and improving scalability.

The Struggle with Design Tokens

Among all these, design tokens were the most challenging concept to grasp. I had read about them, but truly understanding their purpose, structure, and application took multiple attempts. I kept questioning:

• What exactly are design tokens?

• Why are they created?

• Where are they used in real-world design systems?

• How are they practically implemented in Figma?

It wasn’t until I started creating tokens—experimenting with different levels like global, alias, and component-specific tokens—that everything started to make sense. Applying them across foundational elements made the UI more modular, scalable, and adaptable.

Version 1

Here’s the Figma file for the first version of my minimal design system. It serves as the foundation and is fully accessible for use across web and mobile. Version 2 is in progress with further refinements and improvements.

What’s Included:

Typography – The typography system establishes a clear and consistent text hierarchy, ensuring readability and visual balance. It defines structured styles for Display, Headings, Labels, and Paragraphs with optimized sizes, weights, and line heights to enhance clarity and usability across the design.

Color System – The primitive color system provides a foundational palette for maintaining visual consistency and accessibility. It defines structured categories for Black & White, Neutral, Core, Semantic, Surface, Content, and Border colors, ensuring clarity and coherence across the design. Each category is optimized for contrast, hierarchy, and usability, creating a scalable and adaptable color framework.

Dividers – Standardized dividers for separating content sections, improving readability and organization.

Spacing – A well-defined spacing system to create a clear visual hierarchy and ensure consistency.

Buttons – The button system ensures clarity and consistency across interactions. It standardizes States, Size, Hierarchy, and Behavior to create a predictable and scalable experience. States define interactive appearances, Size adapts for different use cases, Hierarchy establishes visual order, and Behavior ensures intuitive user interactions.