Selected work on Zoho SalesIQ
<DesignSystem />Case study 02 / 08

Design system

I run the design system: 48+ components on one set of tokens, mapped to real code and generated with AI, so the same component ships on web, mobile SDK and WhatsApp.

Role
Design system owner
Platform
Web · Mobile SDK · WhatsApp
Period
2024 – now · Senior Visual Designer
Built with
Figma variables, Code Connect, Claude + Figma MCP
Token pipeline · illustrative Sample data
How a value travels from token to shipped component
01 Primitives
blue/500
grey/900
grey/100
space/16
02 Semantic
color/action/primary
color/text/default
color/surface/muted
space/inset/md
03 Component
Button / bg
Button / label
Card / bg
Card / padding
Figma libraryVariables bound to every component and variant
Code ConnectEach Figma component mapped to its production counterpart
Production componentsThe same tokens consumed in code

Recreated for this case study with illustrative token names. Not the production library.

Note

This work was done under a non-disclosure agreement with Zoho. Screens are recreated with sample data, and internal metrics, customer details and unreleased work are left out. Happy to go deeper in a conversation.

01

One button, every surface

Every product module ships from the same components. Change one, and it updates everywhere.

Web · Chat widget
Northwind Support
Hi! How can we help?Start chat
Mobile SDK
Need help?
Chat with our team
Start chat
WhatsApp
Sample content · One button component, three surfaces
02

Tokens first

Colour, type, space and radius live as Figma variables, with light and dark modes.

ColourFive colour swatches
TypeAg
Space
Radius
Light mode
surface/default
surface/muted
text/default
action/primary
border/subtle
Same component, both modesStart chat
Dark mode
surface/default
surface/muted
text/default
action/primary
border/subtle
Same component, both modesStart chat
Illustrative token names
03

48+ components on top

Built on the tokens, documented and governed, so a new screen starts from parts that already work.

PrimarySecondary
Button
priya@example.com
Input
Toggle onToggle off
Toggle
SalesSupport
Chip
PSAKML
Avatar
OnlineBusy
Badge
ChatsVisitorsBots
Tabs
Sharing the link now
Message
A sample of the library, redrawn
04

Figma to code without the gap

Five steps, one source of truth.

01

Tokens

Variables with light and dark modes.

→
02

Components

48+ built on the tokens.

→
03

Code Connect

Each component mapped to its real code.

→
04

Figma MCP

Agents generate production components with Claude.

→
05

Ship

Same component on web, mobile SDK and WhatsApp.

05

Designed once, generated twice

With Claude and Figma MCP, one definition becomes both a Figma library and production components.

Output 1 · Figma library
Start chatCancel
Button / Primary / Default
Button / Secondary / Default
Claude+ Figma MCP
Output 2 · Production component 
<Button
  variant="primary"
  size="md">
  Start chat
</Button>
Illustrative code

One source of truth. Zero drift.

The system is only as good as the gap between Figma and code. My job is to keep that gap at zero.

Want to see the full system?

The Figma file is shared on request with a password, or walked through live on a call.

Request access