The challenge
Migrate the team to a single design tool and unify our foundations and client templates under a single source of truth.
Scoping the challenge
Scoping out the challenge required identifying key hurdles and creating a plan to address them effectively while ensuring team alignment and maintaining ongoing design work as needed. Transitioning the entire team to Figma was no small feat, as familiarity with other tools didn’t translate to immediate proficiency. Team members also faced time constraints, making training difficult. Beyond software adoption, the file migration process revealed a chaotic mix of file types and inconsistent design practices, which led to design changes in some assets. Simultaneously, we had to align the team on design standards, finalize critical components, and prepare stakeholders for the cultural shift brought by the new design system, which introduced stricter guidelines.
Assessing team needs: Evaluating skill levels and time availability for training on Figma, as well as identifying gaps in design knowledge.
File migration strategy: Reviewing existing files to determine what could be reused, updated, or needed complete redesigns, and setting priorities for rebuilding assets.
Visual alignment: Collaborating with the team to establish a cohesive visual direction for components, agreeing on a typography ramp, and ensuring consistency across the system.
Stakeholder preparation: Communicating the upcoming changes, highlighting the benefits of the design system, and addressing potential concerns about new restrictions.
Finding opportunities
Identifying opportunities within the challenges presented a chance to not only address immediate issues, but also lay the groundwork for a more efficient, scalable, and collaborative design process. By focusing on unifying our components, streamlining workflows, and improving file management, we aimed to create a system that would benefit not just designers, but everyone involved in the product development lifecycle. These opportunities became the cornerstone of our approach, each addressing critical pain points while driving the team toward greater alignment and productivity.
Unifying our components
The first step was consolidating our scattered design components into a cohesive design language. This involved auditing the existing assets, identifying redundancies, and reimagining key elements to reflect a unified visual identity. By introducing this consistency, we were able to ensure our product flows felt more connected and professional, improving the user experience and reducing design churn.
Structuring our files with sources of truth
Gone are the days of various files being edited, exported, and shared, with virtually no way of reliably identifying the latest version. Migrating to Figma allowed us to have a single file as a source of truth, reducing overhead for file management. These updates not only streamlined collaboration but also improved version control, reducing time wasted on locating or recreating files, or handing off the wrong files for development.
Onboarding stakeholders
To ease the transition for non-design stakeholders, we built a custom onboarding website that housed essential information about the new design system. The site included documentation on design principles, links to vetted Figma tutorials, and FAQs for common questions, and downloads for key assets. This centralized resource enabled faster adoption and minimized disruptions as stakeholders adapted to the changes.
Providing engineers a single source of truth
To bridge the gap between design and development, we began moving our components and foundations into a single source of truth. This centralized library helped reduced back-and-forth communication, especially around trying to identify which components were the latest and comparing between multiple files.
Planning and executing
The transition to Figma was a critical first step, beginning with a pitch to our CTO and the rest of our stakeholders and design partners. Once approved, I began auditing our files and components and interviewing those involved in the design process to assess their comfort level with our existing design tools.
Prior to executing, I mapped out the best path forward to begin migrating files and training everyone on Figma. It was crucial to provide a tailored approach to reduce the risk of ‘tech regret’ and backtrack into our previous process. To avoid this, the execution began with a custom microsite for onboarding and training employees. This site would be a central location for all things Figma and design systems, from tutorials to core guidelines and assets. I even built in custom animations to showcase our dynamic typography and colors.
1 custom training site
A custom site was built for training and onboarding employees. During this process, I was constantly getting feedback and questions from stakeholders, which helped inform what type of info to include on the website. However, it was imperative that I avoid ‘information overload’. When onboarding to a new tool and process, it can be easy to become overwhelmed and dismiss the changes as unnecessary or too complex. To avoid this, I interviewed and reviewed stakeholder involvement to help determine which parts of the system and training would be most beneficial to them.
16 colors standardized
Throughout my audit of our designs, I found a varying mix of components and colors. This occurred due to a variety of reasons, from client pushback to stakeholder overrides. Working together with everyone to determine client customizability and establish standardized colors allowed me to create a set of foundations for our colors and create specific use cases so we can increase our consistency and provide a unified design language to our clients.
2 client templates
To assist with our file migration, I worked with stakeholders to create a standardized client template that would act as a foundational baseline for client work. Once we landed on a finalized design, I was able to leverage components for key design aspects of our template, which made our file migration far easier and quicker.
Internal feedback
This initial system was just the start. While design systems are virtually never finished, this initial round was a starting point for what could be in the coming future. I’d built out plans to further integrate the content guidelines I created into the components themselves, and start introducing design tokens for core foundational pieces, like spacing, radii, and eventually typography. Because the company was relatively small and the core design team was just two of us, it wasn’t prudent that we build out a comprehensive token list. Instead, we wanted to focus on what had immediate benefit and impacts on our visual alignment and consistency across our products.
Long-term vision
This initial system was just the start. While design systems are virtually never finished, this initial round was a starting point for what could be in the coming future. I’d built out plans to further integrate the content guidelines I created into the components themselves, and start introducing design tokens for core foundational pieces, like spacing, radii, and eventually typography. Because the company was relatively small and the core design team was just two of us, it wasn’t prudent that we build out a comprehensive token list. Instead, we wanted to focus on what had immediate benefit and impacts on our visual alignment and consistency across our products.
