Case study Design System · Figma Mobile 2-week project

Customizing white-label prototypes with Figma variables

Preparing a prototype for each new client took 1–2 days of manual changes across dozens of screens. I set up Figma variables and modes so the team could switch client branding in minutes.

My role: Design systems · Client customization workflows

days → mincustomization time per client (from 1–2 days)

0 designersneeded for sales & PMs to build client-ready prototypes

Project summary

The challenge

Designers spent 1–2 days changing colors, text and components across prototypes for each client. Sales and product teams had to wait for those updates before presenting a demo.

What I did

I connected the components and prototypes to color tokens, text variables and client modes in Figma.

The impact

Switching clients now takes a few clicks, with the entire interface updating automatically. Sales and PMs create client-ready prototypes without design support.

01 — The problem

Each client demo needed 1–2 days of design work.

Sales and product teams needed prototypes with each client’s branding. Updating dozens of screens and incorporating feedback took 1–2 days per client.

Issue 1Slow turnaround for client presentations.

Issue 2High dependency on designers for simple changes.

Issue 3Limited ability for sales teams to experiment and iterate quickly.

02 — The solution

One set of variables for each client.

Tokenized color system

I linked component colors to primary, secondary and complementary color tokens.

Dynamic text variables

Company names, labels and other client-specific copy switch through variables instead of manual edits.

Multi-mode structure

Each client has a mode with its own variable values. Switching modes updates the connected components and prototype screens.

03 — Key insights

Designing for non-designersSales and product teams could switch client branding without asking a designer to update the screens.

Variables over static stylesVariables let me manage client-specific text and color values together through modes.

Centralized customizationThe client values are stored together, so updates carry through to the connected prototypes.

04 — Results & learnings

minutescustomization time, down from 1–2 days

self-servesales & PMs create client-ready prototypes independently

fasterclient presentations, iterations and branding experiments

Sales and PMs could prepare branded demos themselves. Designers no longer needed to spend 1–2 days repeating the same color and text changes for every client.

For this project, the useful part of the system was how it fit the team’s routine: choose a client, update the prototype and prepare the presentation.

← Previous caseMaking payment selection clearer at checkout Next case →Exploring interface color with AI