Building a Scalable Design System in Figma:
A self-initiated design system exploring scalable tokens, reusable components, and RTL-first design.
Building a Scalable Design System in Figma:
A self-initiated design system exploring scalable tokens, reusable components, and RTL-first design.
Project Overview
Type: Self-initiated / Practice Project
Role: Product Designer
Tool: Figma
Focus: Design Systems, UI Foundations, Tokens, Components, RTL
Language: Persian (RTL)
Duration: 4 weeks
Type: Self-initiated / Practice Project
Role: Product Designer
Tool: Figma
Focus: Design Systems, UI Foundations, Tokens, Components, RTL
Language: Persian (RTL)
Duration: 4 weeks
Introduction & Purpose
This is a self-initiated design system project created as part of my design system learning journey and portfolio.
Rather than creating a collection of visually consistent UI components, my goal was to explore how a design system can be structured from the foundations up — from design tokens and semantic rules to reusable components, variants, states, and documentation.
The system was designed entirely in Figma, using Variables, Components, Variants, Auto Layout, and Figma's design system capabilities.
The project was not created for a specific product or company. Instead, I used it as an opportunity to simulate a real-world design system workflow and practice thinking about consistency, scalability, reusability, and maintainability.
This is a self-initiated design system project created as part of my design system learning journey and portfolio.
Rather than creating a collection of visually consistent UI components, my goal was to explore how a design system can be structured from the foundations up — from design tokens and semantic rules to reusable components, variants, states, and documentation.
The system was designed entirely in Figma, using Variables, Components, Variants, Auto Layout, and Figma's design system capabilities.
The project was not created for a specific product or company. Instead, I used it as an opportunity to simulate a real-world design system workflow and practice thinking about consistency, scalability, reusability, and maintainability.
What I focused on:
Design token architecture
Color, typography, and spacing foundations
Semantic design tokens
Reusable components
Component variants and states
RTL UI
Component documentation
Scalable naming conventions
Consistency and reusability
What I focused on:
Design token architecture
Color, typography, and spacing foundations
Semantic design tokens
Reusable components
Component variants and states
RTL UI
Component documentation
Scalable naming conventions
Consistency and reusability
Why I Created It?
In many UI projects, components are created independently as individual screens or features are designed.
A button might use one shade of blue in one screen and a slightly different shade somewhere else. Spacing values can become inconsistent, typography can vary, and similar components may behave differently across a product.
These problems become increasingly difficult to manage as a product grows.
As a practice project, I wanted to simulate this challenge and explore how a structured design system could address it.
My goal wasn't simply to create polished components. I wanted to understand the system behind the components:
- How should values be defined?
- How should components consume those values?
- How should states and variants be structured?
- How can the system remain understandable as it grows?
In many UI projects, components are created independently as individual screens or features are designed.
A button might use one shade of blue in one screen and a slightly different shade somewhere else. Spacing values can become inconsistent, typography can vary, and similar components may behave differently across a product.
These problems become increasingly difficult to manage as a product grows.
As a practice project, I wanted to simulate this challenge and explore how a structured design system could address it.
My goal wasn't simply to create polished components. I wanted to understand the system behind the components:
- How should values be defined?
- How should components consume those values?
- How should states and variants be structured?
- How can the system remain understandable as it grows?
Goals
The main goal was to create a consistent and scalable design foundation that could improve the design workflow and reduce inconsistency.
I focused on four main areas:
01 — Consistency: Define clear rules for color, typography, spacing, sizing, and component behavior.
02 — Reusability: Create components that could be reused across different interfaces instead of recreating UI elements from scratch.
03 — Scalability: Build a foundation that could support additional components and patterns without requiring the entire system to be redesigned.
04 — Maintainability: Use structured tokens, naming conventions, variants, and documentation so the system could remain understandable as it grows.
The main goal was to create a consistent and scalable design foundation that could improve the design workflow and reduce inconsistency.
I focused on four main areas:
01 — Consistency: Define clear rules for color, typography, spacing, sizing, and component behavior.
02 — Reusability: Create components that could be reused across different interfaces instead of recreating UI elements from scratch.
03 — Scalability: Build a foundation that could support additional components and patterns without requiring the entire system to be redesigned.
04 — Maintainability: Use structured tokens, naming conventions, variants, and documentation so the system could remain understandable as it grows.
Why I Chose a 4pt Spacing System?
Although the 8pt spacing system generally provides better consistency, scalability, and simplifies design decisions — and is widely adopted by major design systems such as Google, IBM, and Atlassian — based on my UI design experience, I believe that limited use of a 4pt scale in certain dense or compact components can help create a more flexible and visually refined interface.
Although the 8pt spacing system generally provides better consistency, scalability, and simplifies design decisions — and is widely adopted by major design systems such as Google, IBM, and Atlassian — based on my UI design experience, I believe that limited use of a 4pt scale in certain dense or compact components can help create a more flexible and visually refined interface.
Design System Architecture
Before designing individual components, I established a three-layer structure:
Primitives → Semantic Tokens → Components
Before designing individual components, I established a three-layer structure:
Primitives → Semantic Tokens → Components
Primitive Tokens
Primitive Tokens
The primitive layer contains the raw values used throughout the system:
The primitive layer contains the raw values used throughout the system:
Semantic Tokens
Semantic Tokens
Describe the purpose of a value rather than its visual value.
Describe the purpose of a value rather than its visual value.
Component Tokens
Component Tokens
I defined tokens specifically for the Button component.
I defined tokens specifically for the Button component.
Component Architecture
Component Architecture
Once the foundations were established, I moved on to the component layer. Rather than creating separate components for every possible state, I used variants and component properties to keep related states within the same component structure.
The system includes components such as:
Once the foundations were established, I moved on to the component layer. Rather than creating separate components for every possible state, I used variants and component properties to keep related states within the same component structure.
The system includes components such as:
What I Learned
This project changed the way I think about design systems. Before working on it, I mostly thought about a design system as a collection of reusable UI components.
Through this project, I began to see it more as infrastructure for design. The component itself is only the visible part.
I also learned that the earlier these decisions are made, the easier it becomes to maintain consistency at the component level.
This project is intentionally a learning project, so there are several areas I would improve in a future iteration like: Token aliasing, Naming consistency, Developer handoff
This project changed the way I think about design systems. Before working on it, I mostly thought about a design system as a collection of reusable UI components.
Through this project, I began to see it more as infrastructure for design. The component itself is only the visible part.
I also learned that the earlier these decisions are made, the easier it becomes to maintain consistency at the component level.
This project is intentionally a learning project, so there are several areas I would improve in a future iteration like: Token aliasing, Naming consistency, Developer handoff
You can view the full Figma file for this practice Design System project below. I created this project as the final assignment for the Design System course at "Amanj Academy".