Muhammad Usman AdeebDesign system setup
Figma design systems, built from the tokens up.
I set up design systems that designers and engineers can both work from: tokens on Variables and Modes, components with clear properties, documentation, and the rules that keep it all consistent as the team grows.
Who this is for
- Product teams whose Figma files have drifted, with the same button built five different ways.
- Startups moving from a first version to a product that several designers and engineers work on.
- Teams planning a rebrand, dark mode or a new platform, who want to change values once instead of on every screen.
What you get
- Token architecture. Primitive and semantic tokens on Figma Variables, with modes for themes such as light and dark.
- Component library. Atomic components with properties, variants and every interaction state.
- Documentation. Usage rules, a naming taxonomy, and standards for responsive layouts and accessibility.
- Governance. Branching and merging, versioning and deprecation, so the system stays clean after handoff.
- Engineering handoff. A handoff process and design review gate your engineers can work from.
How the project runs
Discovery call
We talk through the product, the team and what is slowing you down.
Audit
I review the current files and agree the scope in writing.
Foundations
Colour, type, spacing and radius tokens, set up as variables with modes.
Components
Components rebuilt or migrated onto the tokens, with all states.
Documentation and handoff
Rules, handbook and a walkthrough with designers and engineers.
Proof: a system in a live product
At a luxury travel company in Dubai, I built the company’s first design system in Figma from scratch. It runs on primitive and semantic tokens in Variables and Modes, with atomic components built on properties and variants. I wrote the rules around it: a naming taxonomy, branching and merging with versioning and deprecation, and standards for interaction states, responsive layouts and accessibility, collected in a Design System Handbook.
When the company rebranded halfway through the build, I ran the rebrand as a token migration on a Figma branch. I staged old against new with variable modes, remapped 4 token groups and fixed the components that broke on hard-coded values. No screen was rebuilt by hand.
Questions
Do you build design systems with Figma Variables and Modes?
Yes. I build tokens as primitive and semantic layers on Variables and Modes, which is also how light and dark themes and rebrands are handled without redrawing screens.
Can you work with our existing Figma library?
Yes. Most teams already have components. I usually start with an audit of what exists, then rebuild the foundations and migrate components in place, so the team can keep shipping.
Do you write the code for components?
No. I design and document the system, and I work with your engineers on naming and handoff so tokens and components map cleanly to code.
How do we start?
Send a short note through the project form. I reply by email to set up a call, then send a written scope.
Start a project
Tell me about your project and I will reply by email.