Design System Optimization for Figma
OVERVIEW
When our design team became 100% remote, we realized the limitations of Sketch and started exploring other tools that offered the collaboration and organization we needed. Figma was clearly the winner in our eyes. Rather than import our Design System as a Sketch file we opted to rebuild it from scratch, giving us the opportunity to optimize our components for Figma’s variants and properties.
MY ROLE
Collaborated on the migration of Parent Design Library and lead the migration of 2 sub-libraries
THE TEAM
Myself and our Design Systems Lead Designer
DURATION
Q2 2022
PROBLEM STATEMENT
With our now 100% remote UX team, the need for a collaborative design tool was high. Thus the UX team made the decision to move from Sketch to Figma. But before we could start creating any new designs in Figma, the first step was to bring over our Design Library.
PROCESS
We knew the best way to get the most out of Figma’s auto layout and variants was to rebuild components from scratch versus importing our Sketch files into Figma.
Within Sketch, any possible variation of a symbol, whether that be the placement of icons, color changes, etc. had to be individual symbols.
Because of this we were trying to manage close to a thousand components.
It was also very cumbersome for designers to find the correct symbol they were looking for, partly because of the sheer number of symbols and also because the naming structure was not intuitive. We took this opportunity to evaluate the naming and organization structure of our design library.
We started rebuilding the most used components first beginning with the buttons, form input fields, and dropdowns. We also analyzed which components were the same but with slight variations; think an input field with help text visible or not visible, or a button with an icon or no icon. This is where we really saw the power of Figma come to life.
RESULTS
Switching to Figma allowed us to take advantage of component variants and properties and allowed us to significantly reduce the number of components to manage. We saw a combined 77% decrease across our 3 key components.
Buttons:
146 in Sketch → 54 in Figma
Form Fields:
109 in Sketch → 10 in Figma
Dropdown components:
92 in Sketch → 14 in Figma