FINRA - Design System
Enhancing user-friendly designs for cohesive, efficient experiences
Overview
Our design system plays a crucial role in sustaining an extensive suite of enterprise applications, catering to government and brokerage sectors, and serving a user base exceeding 620,000 firms. Guiding the initiative, our team orchestrated the migration of the existing design system from Adobe XD to Figma. This transition transcended a mere software upgrade, focusing on the refinement and evolution of our design practices.
Within Figma, we undertook a comprehensive modernization effort, leveraging the latest technologies to rebuild our infrastructure for enhanced flexibility and scalability. Simultaneously, we prioritized accessibility support, implementing robust theming strategies.
Beyond contributing to the migration initiative, I took charge of designing and building Components, Atoms, and Templates for the design system within Figma, ensuring seamless integration with the updated system
Our Team
Our team of dedicated volunteers played a crucial role in a challenging project to migrate our design system. Despite limited time and no dedicated funding, their passion and teamwork prevailed. We faced unexpected challenges but, as a diverse team, we supported each other and broke through barriers.
Starting from scratch allowed us to establish a community of practice. Together, we defined our own standards for component builds, from naming structures to controls. Since our expertise levels varied, we held collaborative sessions to teach and learn from each other, ensuring everyone could contribute effectively.
We participated in an enjoyable Figma training session facilitated by experts within the team. Their guidance was instrumental in achieving our goals, and personally, I gained a valuable understanding of the Figma process.
Completely Overhauled
The redesign of our design system necessitated a migration to Figma, not only to cut down licensing costs associated with the Adobe Suite, resulting in substantial savings for the business but also to seize the chance for meaningful enhancements.
Our emphasis was on innovating our processes, leading to increased efficiencies and elevated collaboration, ultimately enhancing the creation and delivery of product designs. This wasn't a mere reconstruction or file duplication; instead, we embarked on a journey to reimagine the design system, starting from its atomic elements and creating the project roadmap for our migration.
Best Practices
Acquiring our enterprise license for Figma was a process that required some time, and this delay proved advantageous. During this period, we dedicated significant effort to meticulous planning, extensive research, and the study of industry best practices. We obtained copies of design systems from leading companies, delving into their builds, naming conventions, atomic breakpoints, inter-dependencies, and alignment with code. Leveraging insights from this research, we formulated our own set of best practices to guide our forward progress with the help of team leaders and other volunteers.
Atomic Structure
Initially, we compiled a comprehensive list of all components slated for migration from Adobe XD to Figma. This list underwent a meticulous breakdown, aligning with Brad Frost's atomic structure, to assess inter-dependencies among elements. Subsequently, we prioritized the builds, arranging them from the simplest to the more complex. Our phased approach commenced with the foundational atoms. To streamline our workflow, we utilized a Kanban board, facilitating sign-ups for both builders and reviewers, enabling efficient tracking of our progress throughout the process.
Addressing challenges & Enhancing productivity
The transition from Adobe XD to Figma was imperative as managing an enterprise-level design system on a single publisher system became impractical. Urgency stemmed from the pain points experienced by designers, product managers, and engineers when utilizing Adobe XD for shipping enterprise-level software. Broken links, disruptions in icon libraries, and inconsistencies in the component library necessitated a swift transition. Figma offered transformative functionalities, enabling real-time collaboration, and prompting us to leverage its modern technologies.
Utilizing Figma, we re-engineered our design components for enhanced manageability, customization, and theming capabilities, incorporating the latest features. The transition also improved our developer handoff process, moving from manual red-lining in XD to streamlined inspection tools in dev mode. Native functionality significantly reduced documentation and re-work, and involving engineers early in the process ensured alignment with their requirements.
Executing the Figma migration demanded considerable time and effort, all within limited resources. To ensure efficiency, we adopted a phased approach outlined in our roadmap, executing both the build and curriculum tracks concurrently with the same group of volunteers. Regular check-ins and milestone tracking maintained accountability, establishing a process for quality evaluation and maintenance. Despite adjustments to timelines due to prioritization of funded projects, we remained committed to our MVP launch and subsequent milestones
Implementing Oversight
A distinctive feature of our design system is the open contribution model, allowing any team member to suggest updates or improvements by branching out the file and sharing their explorations. To ensure organized decision-making, we formed a governance team named the Design System Core. This team convenes bi-weekly as a community of practice to assess proposals, make decisions through voting, suggest improvements, and conduct reviews. The Design System Core collaborates with developers for smooth hand-offs, generating tickets for design system enhancements or bug fixes.