Building a Flexible Figma Design System for Financial Services Clients
By building a flexible, compliance-ready Figma design system, I delivered a solution that served multiple financial services clients with speed, consistency, and operational excellence. The system reduced rework and ensured that every digital experience met accessibility and compliance standards.
Background
The start up company I worked for was a white-labeled, digital messaging solution for collections & recoveries
-
Our clients included banks, fintechs, and collections agencies
-
I was responsible for the creative strategy, development, and in-market iteration
Data Analysis
Messaging Strategy
Creative Development
Execution
In-Market Iteration
Define the Problem
When I was supporting multiple financial services clients, each project came with its own set of branding guidelines and regulatory requirements. Because these clients relied on compliant, accessible digital communications, my work had to be both efficient and precise. However, without a shared design and development system, designers and developers were rebuilding components from scratch, leading to inconsistencies in visual alignment and code implementation. These variations caused rework, slowed delivery, and introduced risk to accessibility and brand compliance.
The stakes were high: every touchpoint needed to meet strict accessibility standards (WCAG, ADA, email readability) and adhere to the clients’ brand guidelines.
Define Objectives
Create a design system that would support multiple clients, reduce design and development inconsistencies, and speed up delivery
Flexibility
Maintain client brand consistency across all UI and messaging components
Built-in Standards
Integrate compliance regulations, email best practices, & development documentation
Scalability
Support more clients and a growing team
Cost-effective
Must be built with limited resources
Design Thinking Approach
Once the problem was clear and goals were set, I began the design system build
Ideate
To solve for inconsistent messaging and code alignment, I led collaborative ideation sessions with design, development, and compliance teams. Using Figma (chosen for its accessibility and no added cost) I audited existing client projects to inventory UI components, identify inconsistencies, and map areas where development documentation was missing. We also reviewed past compliance feedback to ensure accessibility standards were integrated from the start.
Key Decisions
-
Standardize reusable blocks (header, CTA, list)
-
Apply brand and readability standards early to reduce rework
-
Include developers upfront to flag layout and alignment risks
-
Establish universal naming conventions for components, font styles, and data variables
-
Use grayscale for early-stage accessibility and contrast testing
Prototype
I built a shared component library (including headers, footers, buttons, lists, offer tables, and hero sections) designed for flexibility and responsiveness across clients. Each component was variant-driven and accessibility-compliant, allowing brand-specific customization (colors, typography, logos) without disrupting the core structure or code alignment.
Key Decisions
-
Abandoned grayscale and expanded color naming convention
-
Design mobile-first, expanding to desktop layouts as needed
-
Use auto layout at both component and template levels for consistency
-
Document responsive behavior and accessibility specs directly within Figma for seamless developer handoff
Testing & Feedback
I tested prototypes for responsiveness, accessibility, and cross-system flexibility to ensure designs met WCAG standards and integrated smoothly into client environments. Feedback from developers and compliance teams was incorporated into each iteration to refine both structure and documentation.
Key Decisions
-
Follow consistent grid and spacing principles to streamline development
-
Embed in-app documentation within Figma to clarify usage and reduce implementation errors
-
Validate that all variants maintained alignment and accessibility across screen sizes and brands
Outcome: Streamlined Delivery and Consistent Execution
The new component system created a more unified workflow between design, development, and compliance teams. Standardized messaging patterns and clearly documented components reduced rework and improved turnaround time. Teams could now adapt branding confidently, maintaining accessibility, regulatory compliance, and alignment across every channel.