How I Implemented a Figma-Based Design System at Packback
When I joined Packback in September 2019, the design team consisted of one person, Packback co-founder and CPO, Jessica Tenuta. My addition to the team signaled team growth and expansion. As we discussed my role in the growth of the team, it was decided that I would lay the foundation for a larger design team. This meant I would be scaling existing and founding new design processes for the team. The first of these was to create and implement a design system in Figma.
Why Figma?
I could’ve chosen to build a design system in any design software. I know some designers have very strong opinions about which software is best. It is my opinion that different software meets the needs of different teams. I’ve worked on teams where Adobe XD was the best choice, and I’ve worked on teams where Sketch was the best solution. For Packback, Figma was the best fit.
The design system capabilities in Figma allowed me to create a library of Packback’s design styles and assets that could easily be shared across team members and projects. And as the library was updated, I was able to publish and update any files using the library immediately.
Figma’s prototyping capabilities had also advanced enough to eliminate the team’s need for other prototyping software. This allowed the team to operate in one tool, which helped ensure files always reflected the most recent design changes, and reduced cost by eliminating a paid subscription.
Figma’s collaboration abilities were also the best fit for the team. With Figma, Jessica and I could work on designs together, and provide feedback immediately. I was also able to share all files with the engineering team, as “viewers”, so they could inspect designs, ask questions directly on a design mock, and interact with prototypes to better understand the intended user experience.
Learning Figma
Once I decided Figma was the best fit for the team, I had to teach myself how to use it. By now I’ve learned that the fundamentals of all design software are essentially the same. I taught myself how to use Adobe XD six months prior to this, so I was confident in my ability to learn the new software quickly.
I started teaching myself using Figma’s tutorials. These are available when you sign up for an account, on their YouTube channel, and in a series of emails Figma sends to new users. As soon as I had the basics down, I focused on learning how to build a shared library. I again turned to video tutorials, as well as a number of articles written by designers that had already built design systems in Figma. Some of the most helpful were:
- Mini tutorials: working with Figma button components by Micah Bowers
- Design System Basics in Figma by Liron Cohen
Inventory Current Assets
Before I could actually build a design system, I needed to inventory all the assets currently in use. I audited Packback’s products and broke each page down into its basic elements. I organized these elements by atomic level (atom, molecule, and organism), based on Brad Frost’s Atomic Design. This not only gave me a first iteration of how the design system would be organized, it also provided me with a “checklist” of sorts that I could use to make sure my library was complete.
This was a good exercise to get me more familiar with the product as I was still very new to Packback at the time.
Build a Library
The first elements I added to the library were the text and color styles. I used this opportunity to verify our colors met contrast requirements to comply with WCAG guidelines. This led me to create three new darker hues of existing colors to make our notifications and links contrast compliant on all our current backgrounds. I also eliminated duplicate text styles and simplified naming conventions.
Next, I added other atoms to the library, such as buttons, labels, and icons. I checked color contrast on the buttons like I had earlier and eliminated yellow buttons from the product as these were not contrast compliant with white text and visually unpleasant with dark text.
I combed through the design files given to me by Jessica to import icons and labels into the library. Unfortunately, many elements listed in my asset inventory were not in the files and could not be found. I made a list of everything that was missing and rebuilt these elements in Figma.
Once all the atoms were in place, I moved onto building molecules and organisms.
Now the design system was complete and ready to be published as a shared Figma library.
Implement Across the Team
The last step was to implement the new design system across the team. Jessica and I met to review Figma, train her on everything I learned throughout this process, and set her up on the team within Figma. I also created a new file structure in Figma to organize our files. I launched this as part of the Figma implementation.
I met with the engineer responsible for front-end work to discuss the changes made to the design system and align the developer documentation. As new designs were rolled out, I met one on one with other developers to discuss Figma and the best ways for them to use it to inspect designs, ask questions, and review user interactions.
Final Thoughts
I learned a lot from implementing a design system, here are my key takeaways:
- The process can be time consuming and feel mundane. Having an organized and complete library to design with saves more time down the road than it does to build the design system. It’s worth it.
- There may be some trial and error in getting assets to behave as expected. I ran into this with buttons and had to change constraints after building the library. Before sharing a library, test that components have been built correctly.
- Meeting with team members one on one was the best way for me to get buy-in with the new software. These meetings took about five minutes with each developer and were very informal. I recommend talking to people individually whenever you can.
