Afif Ubay
Afif Ubay

Elsewhere

Download CVLet’s talk
Open to workhelloafifubay@gmail.com ↗

Andromeda — one Figma standard for every designer.

How I turned four squads' scattered UI into a shared token, component and documentation system — and cut design-to-dev handoff time by 40%.

Role
Lead product designer, design-system ownerLead product designer
Timeline
8 months · Feb — Sep 2025Feb — Sep 2025
Team
2 designers, 3 engineers, 1 PM2 design, 3 eng, 1 PM
Tools
Figma, Tokens Studio, Storybook, ReactFigma, React
Andromeda documentation: button variants and colour token cards in a dark UI.

Fig. 01/ Andromeda documentation siteAndromeda docs

[1/4]

Context & problem

Six products, four squads and no shared language. Every team rebuilt the same button, colour lived in 212 hex values, and handoff meant screenshots in Slack. Shipping a simple UI change took a week of back-and-forth.

Unique colour valuesColours
212
Button variantsButtons
37
Avg. handoff loopHandoff
5d
“The problem wasn't missing components. It was that nobody trusted the ones that existed.”
— From 14 stakeholder interviews

Process

I ran a full UI audit, rebuilt the foundations as tokens, then shipped components in priority order — the 20% of patterns that covered 80% of screens first.

  1. Step 01 · Audit1,400 screens inventoried and clustered.1,400 screens clustered.
  2. Step 02 · Tokens3-tier tokens: core → semantic → component.Core → semantic → component.
  3. Step 03 · Components48 components, built in Figma + React.48 in Figma + React.
  4. Step 04 · DocsLive docs with usage, do/don't and code.Usage, do/don't, code.
Diagram mapping core colour tokens to semantic and component tokens.

Fig. 02/ Token architecture

[2/4]
Figma board of audited components with sticky-note annotations.

Fig. 03/ Component audit boardComponent audit

[3/4]

Solution

Andromeda ships as a Figma library, a React package and a docs site that share one token source. Changing a colour in the token file now updates every product in a single release.

Laptop, desktop and phone screens showing dashboards built with Andromeda components.

Fig. 04/ Components in production across 6 productsIn production

[4/4]

Outcome

Adoption came faster than planned because teams could see their own product in the system on day one.

Design-to-dev handoff timeHandoff
−40%
Products on AndromedaProducts
6/6
Component adoptionAdoption
98%

Reflection

I'd bring engineering into the token naming earlier — we renamed 60 tokens in month four. And a design system is a product: it needs a roadmap, a changelog and someone who says no.