Built 50+ components for OptionsPlay first design system cutting feature rollout time by 44%
B2C
Fintech
Shipped
Role
Product Designer, Contract
Solo designer owning the full project: audit → figma component library → variables → AI-assisted developer handoff
Duration
2 week sprint (Feb 2026)
Stack
Figma, Claude, Vercel
Team
2 Product Designers
8 Developers
1 PM, CTO
Here’s a 1 min TL;DR version
THE PROBLEM
12 years of product. Zero shared library.
The Options Trading Platform has been in market for 12 years but design decisions are living entirely in people's heads. No tokens, no documentation, no source of truth. The same component looked different on three screens.
Three core problems:
Inconsistent UI
Scalability Risks
Increased time for feature roll-out
SOLUTION OVERVIEW
Design system with 50+ components and more!
IMPACT
With the new design system, designers can shorten deliver time by
5 times
Let’s start from the beginning
GOALS OF THE SPRINT
Build a system that scales for both teams.
Business Goals
Cut feature roll-out time across engineering
Reduce design-to-dev friction and handoff
Support team scaling without quality loss
Design Goals
Build a token-based Figma variable foundation
Document every component with usage guidelines
Establish organism patterns for dashboards & widgets
Generate AI-assisted developer handoff with Claude
DESIGN SYSTEM BASICS
Building out of Tokens
The token is the smallest pieces in the design system. They represents a design property or characteristic, such as color, typography, spacing, or shadow.
Tokens are used to maintain consistency and streamline the design and development process within a design system. Every component in the design system is built out of various tokens. In our design system, we call tokens Foundation.
SPACING SYSTEM
Using 8 Grid System
Every major screen size like, 1280, 1440, 1920px is divisible by 8. Using 8-based spacing means components scale cleanly across breakpoints without half-pixel rendering artifacts.
For tight component internals where 8px is too large, multiples of 4 act as a sub-grid, keeping the system intact without sacrificing density in data-heavy fintech UIs.
MY APPROACH
Five phases, one system
01 Audit
02 Foundation
03 Components
04 Structure
05 Handoff
Phase 1 - Audit
Before designing anything new, I went through every existing screen to extract what was actually there. The goal wasn't to judge- it was to find the real patterns underneath years of additions.
Catalogued all unique button styles, input types, and card variants
Reduce design-to-dev friction and handoff
Support team scaling without quality loss
SCALABILITY
Making sure the Design System is scalable
Every decision was weighted against one question: what happens when OptionsPlay doubles its team in a year?
01- TOKEN FIRST
Every component references tokens. A theme change propagates everywhere in minutes.
02- USAGE DOCS
Every component ships with its own guidelines. A new designer joining the team gets up to speed without a walkthrough.
04- VARIANT MODEL
Adding a variant is additive, it doesn't break anything that already exists. The system grows by expansion, not replacement.
05- ORGANISMS
New features inherit the same spatial logic as existing ones without anyone manually enforcing it.
06- JSON EXPORT
Design and code share the same token source. When design updates a value, developers adopt it automatically.
Accessibility Assessment
Following the WCAG Guideline 3.0, I thoroughly reviewed all screens to ensure they align with industry standards. Additionally, I employed the Contrast Checker plugin consistently to guarantee that all design elements are easily visible to the end user.