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.
Yorumlar