Linear Black Gradient Transparent

FINRA

Design System

UX case study

Migrating the existing design system from Adobe XD to Figma.

In a nutshell...

Product: A FINRA design system for uniformity and efficiency in applications.


Problem: Outdated system unable to meet expanding needs, necessitating a more dynamic platform.


Solution: Overhauled to Figma, segmenting into "atomic" components with a governance model for maintenance.


Outcome: Enhanced teamwork, expanded application capacity, and boosted efficiency (58 components, 8 live sessions, 105 styles).

CLIENT

FINRA Internal designers, Product managers, and engineers.

SERVICE

Web Application,

Design System

TEAM

Multiple Product Designers (Including me), Product Manager, Design Lead, Engineers, UX Researchers

TOOL

Adobe XD, Figma,

Miro, Workshops on Zoom

YEAR

2023

What is it?

Central hub of reusable UI components and design guidelines. Ensuring consistency & efficiency across their suite of applications used by over 620K firms in the financial services industry.

Who is it for?

Designed for our entire ecosystem of designers, product managers, and engineers.

Why did we build it?

The old design system wasn't keeping up with our growing needs. We built a new one to make teamwork easier, handle more apps, and work faster.

2. Challenge

1

Collaboration bottlenecks

  • Broken links
  • Outdated libraries
  • Inefficient handoffs
  • Undocumented accessibility standards (WCAG 2.1)

2

Diverse Expertise Levels

Our team had varying degrees of familiarity with Figma, requiring a collaborative learning approach.


3

Resource Limitations

Being a non-funded initiative, we had to optimize our limited resources.

HMW move our design system to Figma smoothly, keeping designers and engineers working together effectively?

3. SOLUTION

We didn't just move things over; we built a brand new design system in Figma! We broke down everything into smaller, reusable pieces (atomic design), cleaned up and rebuilt all the design elements, and even created a website with a guidebook for everything (colours, fonts, spacing, icons, and more).

Design System Website

4. APPROACH

1

Sorting it Out


We first made a list of all the design pieces (components) to move from Adobe XD to Figma.

2

Breaking it Down


Next, we organized these pieces into simple building blocks (like Legos!), following a method called "atomic design." We also checked how the pieces worked together.

3

Building in Stages


We prioritized the move, starting with the most basic pieces (atoms) and gradually working our way up to more complex ones. We broke the move into phases for smoother progress.

4

Keeping Track


We used Miro boards (like a Kanban board) to track our progress, showing who was building what and who would review it.

5. RESEARCH

We wanted to adapt Brad Frost’s atomic structure to build our design system in smaller, reusable pieces, like Legos! We did a comparative analysis of how companies like Google, Apple, Atlassian etc. organize their design systems. This helped us create a system in Figma that's easy to use and understand.

Getting Figma took longer than expected, but it turned out to be a good thing!


We used the extra time to plan carefully, do our research, and learn the best ways to use Figma. This helped us create a clear plan for building our new design system.

Project Roadmap from June through May

Making Changes Easy (Open Contribution Model)

1

This means anyone on the team can propose an update to the design system by creating a "branch" to test their ideas.

2

We established a governance team called the “Design System Core” that would meet bi-weekly as a community of practice to review proposals, vote on decisions, propose enhancements, and offer reviews.

3

The Design System Core would meet with the developers for hand-off and create associated tickets for design system enhancements or bug fixes.

6. Test & Iterate

We didn't just move things over; we made sure it worked!


We tested the new system with the product & engineering team and made changes based on their feedback. This included building dark and high-contrast modes for easier viewing.

7. OUTCOMES & LEARNINGS

1

The Secret Weapon: Volunteers!


  • A dedicated group of volunteers carved time out of their schedules to tackle this project.


  • Their passion and drive kept the project moving despite not being funded.


  • This diverse team supported each other through many challenges.

2

Building a Better System Together:


  • We started fresh, defining our own standards for building components.


  • Co-working sessions helped everyone learn Figma and solve problems together.


  • This resulted in a strong bond within the team.

FIGMA Migration Team

The volunteer team didn't just learn Figma themselves; they trained others too! This training helped our entire team of 20+ designers feel comfortable using Figma effectively.

1

Custom Curriculum


We created a training plan specifically for our team's needs.

2

Live & Interactive


Our team held live sessions to answer questions.

3

Step-by-Step Learning


Lessons built on each other, ensuring everyone mastered Figma at their own pace.

4

Office Hours


Office hours provided extra help and one-on-one support.

Overall, the migration to Figma delivered significant improvements in efficiency, collaboration, and the potential for future growth.

1

Benefits for Everyone


  • Improved collaboration between design, product, and engineering teams.


  • Saved everyone's time and frustration.


  • Opened up brand expression possibilities.

2

Scalability & New Opportunities


  • The rebuilt design system can now be applied to a different company entirely.


  • The code and designs can be used in new business ventures.


  • This scalability wouldn't have been possible without rebuilding from scratch.

Team Accomplishments