An End-to-End Design System
July, 2025
Overview
I created an entirely token-based design system in Figma, starting with basic tokens—color, typography, spacing, and motion—and expanding into core, product-specific components.
Figma variables form the backbone of the system, allowing each token and component to adapt seamlessly across desktop, laptop, tablet, and mobile devices.
Each component is paired with documentation—an anatomy, a usage guide, and accessibility notes—which co-locates with libraries in Figma to serve as a single, trusted resource for designers and engineers.
Problem
Why our product was slowing down and drifting apart.
Slow delivery — each new page required four artboards and endless nudging across breakpoints.
Inconsistent UI — colours, paddings and icon sizes diverged as the product grew.
Manual maintenance — one component tweak meant hunting down 100+ instances.
Knowledge gaps — designers and engineers often asked, “Which blue is the real blue?”
Solution at a glance
The core ingredients that fixed speed, consistency, and maintainability.
Token foundation — primitive ↔ semantic colours, responsive type scale, 8-pt grid.
Variable-driven responsiveness — one mode per breakpoint, zero extra artboards.
Library split for performance — atoms in one file, patterns in focused files.
Governance & docs — weekly triage, status support, five-part mini-docs.
Challenges
A core pain-point emerged around scalability and iteration: designing a new page required multiple back-and-forth cycles with other designers, and any change to a shared component had to be applied manually — sometimes across 100 pages — wasting hours and introducing visual drift. The result was an increasingly inconsistent UI and too much time spent on what should have been single-source updates.
Fragmented Token Usage — Without a centralised token library, colour, spacing, and typography values were recreated ad-hoc, leading to subtle visual discrepancies and a ballooning style inventory in Figma.
Responsive Component Overhead — Every page must be meticulously tailored, from the default desktop layout to breakpoints for laptops, tablets, and mobile devices. Without variables, designers are forced to manually change the size and style of each element. Figma Variables are essential, allowing components to automatically adapt across all viewports and eliminating this repetitive work.
Limited Discoverability & Documentation — Team members often duplicated components simply because they couldn’t locate the “official” one or weren’t sure how it should behave, multiplying variations and eroding consistency.
Foundations
Typography Scale
A responsive type — 24px → 20px → 18px → 16px — auto-adjusts via Figma Variables, keeping hierarchy intact from desktop to mobile.
Color Scale
Two layers: Primitive tokens hold raw, brand-agnostic hues (e.g., gray/700, blue/600), while Semantic tokens map UI meaning to those hues (text/default, state/error) — letting themes or dark mode swap colours simply by remapping primitives.
Spacing & Sizing
An 8-px base with Primitive tokens (space/general/8) and Semantic aliases (space/card/horizontal) that propagate updates everywhere with a single edit.
Border Radius, Shadow, & Opacity
Unified elevation and shape tokens (border-2, rounded-large, elevation/3, opacity-70, ) ensure consistent look and feel across states and surfaces.
Breakpoints
Four tokens — desktop 1920, laptop 1440, tablet 768, mobile 390 — drive variable modes so every component responds automatically.
Components & Patterns
Universal Components
Avatar
Badge
Button
Checkbox
Input fields
Etc
Specific Component Library
Card Library
Carousel Library
Popup Library
Data-Visualization Library
Icon Library
Etc
All of these specific components are comprised of universal layers. Separating them into separate files keeps Figma lightweight, allows designers to focus on the right context, and prevents accidental edits to core assets while exploring product-specific patterns.
Token Naming & Airtable Workflow
Single source of truth: All tokens are defined in an Airtable base that captures category, property, and breakpoint values; a formula column auto-generates each final name, so nothing is named by hand.
Formula-driven consistency: Because names are computed, every new token instantly follows the same pattern — no more guesswork or “one-off” labels.
Responsive-ready naming: Only tokens that actually expose multiple viewport values carry a responsive suffix (e.g., padding-horizontal). Tokens with a single value keep a clean, base name, making it obvious when a variable is meant to adapt across breakpoints.
Easy governance & auditing: Airtable lets the team filter, bulk-edit, and version tokens, so design and engineering can track changes or roll back when needed.
Documentation — How Each Component Is Explained
Overview & Variants
A brief synopsis that lists all available sizes, stylistic variations, and key states (e.g., default, hover, disabled) so teammates can see the full range of options at a glance.
Anatomy
A plain-language breakdown of each functional part — headline, body text, icons, actions — so everyone immediately understands the component’s structure and hierarchy.
Responsive View
Textual guidelines that describe how the component reflows or resizes across desktop, laptop, tablet, and mobile breakpoints, highlighting any alignment changes or spacing adjustments handled by variables.
Do & Don’t
A quick list of best-practice examples (Do) and common pitfalls to avoid (Don’t), helping the team apply the component correctly and maintain consistency across the product.
Impact & Results
Outcome
Component reuse is the norm — designers begin with library parts instead of rebuilding, keeping effort focused on new ideas.
Design turnaround is dramatically shorter — tasks that once took one — two days now wrap up in hours, unlocking extra iteration time.
Development flows smoother — code tokens mirror Figma Variables one-for-one, so visual updates reach production with almost no re-work.
Token naming stays consistent — Airtable formulas plus Figma sync eliminate “mystery tokens,” preserve design-code parity, and simplify audits.
What the developer says
“I would like to congratulate and thank the design team for the beautiful documentation on the components they added to Figma.”
“This really really made my job easier — saved me from reading hundreds of lines of code trying to figure out the different cases.”
What my stakeholders says
"I hired Dhika to help me with creating digital products for my company back in October 2023 — namely, a mobile banking app and an Internet banking platform for small businesses. He joined my team as the lead UI designer, working with my in-house graphic designer and my IT team. He single-handedly built our design system from scratch, taught my team Figma basics, defined our visual / UI identity, and built out a full prototype of our mobile banking and internet banking products to hand over for development in August 2024. Dhika is reliable, detail-oriented, and very easy to work with. Not only he follows instructions and feedback well, but he also adds value by providing critical insights and pointing out design flaws and ideas I have not yet considered. I highly recommend Dhika!”
“Working with Dhika was amazing. He’s extremely fast, responsive, and communicative. There were certain areas in the project where I wasn’t sure what direction to take, and he used his best judgement based on the context to deliver a great final design system my team could use.”
Ultimately, these results demonstrate that a design system not only unifies the look and feel of a product — it also speeds delivery, improves quality, and frees teams to focus on higher-value work.