Building the infrastructure that made great design possible at scale — custom Figma plugins, shared design intelligence, and no-code tooling that accelerated delivery and eliminated duplicated effort across every Line of Business.
Figma Plugins
Salt Design System
Design Ops
Shared Libraries
No-Code Tooling
LLM Integration
OKR / KPI
$8.1M
Documented ROI per year
Global
Design teams across all LOBs
VP
Digital UX Designer
01Problem Statement
Design at enterprise scale breaks without the right tools
JPMorgan's design organisation operated across hundreds of designers, multiple Lines of Business, and dozens of concurrent product workstreams — each with their own workflows, component standards, and Figma practices. Without shared tooling, the same work was being done over and over. Components were being designed from scratch that already existed in Salt. Research was being buried in individual team drives. Designers were spending hours on tasks that should take minutes.
The opportunity was to build infrastructure for the design function itself — tooling that promoted system adoption, surfaced shared work, reduced duplication, and gave design leadership the measurement layer to demonstrate business value.
Core Problem
How do you scale design quality and consistency across a global organisation of hundreds of designers — without mandating top-down compliance — by making the right way the easy way?
Pain Point 01
Salt DS invisible to designers
Designers working in Figma had no way to explore and validate Salt Design System token variables — theme, density, typography, elevation — without manually reading documentation. Exploration was slow. Errors reached development.
Slow iterationToken errorsDev handoff friction
Pain Point 02
Design work siloed across LOBs
No central repository for design and UX artefacts. Teams in CIB were solving problems already solved in Markets. Patterns being designed in AWM existed in CCB. Duplication was costing the firm time and money.
Duplicated effortInvisible workInconsistent UX
Pain Point 03
No-code gap
Non-designer stakeholders needed design previews and rapid exploration. Without no-code tooling, every exploration required designer involvement — a bottleneck on both sides.
Pain Point 04
Unmeasured impact
Design operations had no tracking layer. Time saved, components reused, handoff errors avoided — none of it was captured. Building measurement into tooling was essential to demonstrating the $8.1M ROI case.
Pain Point 05
Salt adoption ceiling
Salt had reached 86% adoption — but the remaining 14% and the depth of adoption in existing users was constrained by discoverability and ease-of-use friction within Figma itself.
02Tooling Ecosystem
A suite of tools built for designers, by design
The tooling programme comprised three interconnected streams: Figma plugins extending the Figma environment with Salt-aware capabilities; the DXD Gallery, a firmwide searchable repository of design work accessible from both browser and Figma; and an LLM-powered prototyping assistant enabling rapid exploration of interaction patterns using natural language.
Tool 01
🎨
Salt Theme Tester
Figma plugin to explore and validate Salt DS token variables — theme, density, typography, elevation — directly on design mockups via a guided wizard.
Tool 02
🗂
DXD Gallery
Firmwide design repository accessible from Figma and browser. Designers submit, browse, and filter work by Salt components and Line of Business.
Tool 03
⚡
Rapid Prototyping
No-code prototyping services and Figma workflow training enabling faster stakeholder reviews and reducing engineering involvement in exploration.
Tool 04
🤖
LLM Tooling
Internal AI-assisted tools for pattern generation, documentation drafting, and design system Q&A — reducing ramp-up time for new designers joining the firm.
Strategy
Every tool was designed around a single principle: make the right way the easy way. Salt adoption shouldn't require discipline — it should happen naturally because the tooling makes it faster. Shared work shouldn't require a search — it should surface where designers already are.
03Artefact · Figma Plugin
Salt Theme Tester Variable Explorer
A Figma plugin that allowed designers to select any of their design mockups and interactively toggle Salt Design System variables — switching between JPM Brand and Legacy themes, density systems, typography stacks, colour modes, elevation levels, and corner radius tokens — all in a guided, wizard-like experience directly inside Figma.
The preview updated live, removing the need to manually apply token sets. Designers could validate component behaviour across all variable states before handoff, dramatically reducing the error rate at the design-to-development boundary.
Salt Theme Tester · v2.4.1
Figma Plugin▶ Run
✦
Salt Theme Tester
v2.4.1 · JPMC Internal
Test your designs across Salt DS variables — theme, density, typography and more.
✓
Template
2
Variables
3
Review
Select a design mockup
✓
Data Blotter
✓
Form / Input
✓
Dashboard
✓
Nav Shell
🎨 Theme
▾
Brand
Mode
⊞ Density
▾
Row height
Aa Typography
▾
Font stack
◻ Elevation
▾
Shadow
◎ Corner Radius
▾
Radius
● Accent Colour
▾
Token
Current configuration
Tokens will be applied to selected frame on canvas
Figma Plugin · Salt Theme Tester · Interactive variable explorer — wizard UI (left panel) with live preview canvas (right)
Design Impact
From docs to discovery
Before this plugin, exploring Salt token combinations required reading documentation, manually adjusting Figma variables, and checking each variant separately. The wizard collapsed a multi-hour workflow into minutes — with every state immediately validated against all Salt DS constraints.
Faster explorationFewer dev errorsDS adoption ↑
Salt DS Alignment
Tokens match code exactly
Every variable exposed in the plugin mapped 1:1 to Salt's token structure in code — the same variable names a developer would reference. This made the Figma-to-dev handoff a token comparison, not a translation exercise. Contributed back to the Salt DS team as an extension model.
Token parityDev mode readySalt DS native
04Artefact · DXD Gallery
Firmwide design intelligence, searchable and shared
The DXD Gallery was a web application — also accessible directly from within Figma via a companion plugin — that allowed designers across all Lines of Business to contribute their design work to a shared, searchable repository. The goal was straightforward: surface work that already existed before someone spent time recreating it.
Designers could filter by Salt Design System components, Line of Business, design type, and recency. The gallery drove reuse, reduced duplication, and gave design leadership visibility into what was being built across the firm. Submissions were made directly from Figma — select a frame, add metadata, publish to the gallery in under a minute.
DXD Gallery · design.jpmorgan.internal/gallery↻ RefreshSubmit from Figma ↗
DXD
GalleryJ.P. Morgan Internal
🔍
EA
All work 247
Patterns
Components
Templates
Full screens
My submissions
Line of Business
CIB
64
Markets
58
AWM
41
CCB
52
Operations
19
Tech / CTO
13
Salt Component
Data GridButtonFormNavigationBlotterDialogBadgeToolbar
Type
Pattern
89
Component
63
Template
47
Full Screen
48
Recency
This week
12
This month
38
This quarter
94
Showing 163 results
Sort by
⊞
☰
🔌Access DXD Gallery from Figma via the DXD Plugins panel — search, filter and import directly to your canvas
← BackSubmit to DXD Gallery
DXD
DXD Gallery Plugin
Selected: Dashboard — Markets Risk View
Title
Description
Line of Business
Type
PatternFull ScreenComponentTemplate
Salt DS Components Used
Data GridBlotterBadgeToolbarButtonNavigationDialogForm
Preview Frame
Auto-captured from selected Figma frame ✓
Visibility
All firm (recommended)My LOB onlyDraft
DXD Gallery · Firmwide design repository — web app + Figma plugin submission flow · filterable by Salt DS components and Line of Business
Problem Solved
Making invisible work visible
Before DXD Gallery, a designer in CIB would spend two days designing a complex blotter pattern that a Markets team had solved the previous quarter. No system existed for finding what already existed. The gallery made the entire firm's design output searchable — with zero friction for submission.
Reduced duplicationCost savingsCross-LOB reuse
Measurement
Reuse tracked, value proven
Every pattern adoption from the gallery was tracked. Reuse events triggered automated tracking against design team OKRs. This data formed part of the $8.1M/year ROI case — demonstrating that tooling was not a nice-to-have, but a strategic business function with measurable financial return.
OKR tracking$8.1M ROIAdoption metrics
Impact & Outcomes
Infrastructure that compounds over time
$8.1M
Documented annual ROI from tooling programme across global design teams
86%+
Salt Design System adoption — tooling removed friction that had constrained growth
Global
All Lines of Business using shared tooling — from Markets to Operations to CIB
Broader Legacy
The tooling programme established design operations as a measurable, strategic function within JPMorgan — not overhead. OKRs, KPIs, and tracked ROI gave design leadership a language executives understood. The Salt Theme Tester and DXD Gallery continued to run after my departure, with teams across the firm submitting patterns and exploring tokens daily.