Tools grow and change over time. Teams and their needs evolve. As the industry finds new and better ways to create products customers love to use, it’s important to keep up with the changes.
Aspiration’s design team had been experimenting with Figma off and on for a year or so. A change in design leadership amidst a full-scale company rebrand and a major new product initiative led to a need to quickly transition from Sketch to Figma and get the team up and running.
Figma offers Sketch file imports which can greatly speed up the move from Sketch to Figma, but anyone who has used this feature knows the output is mediocre at best. All positioning and sizing of elements becomes static. Slice layers and hidden background colors become visible. Auto-layout is non-existent.
Color and Typography Styles
Figma handles global color and typography styles in a way that’s very different from Sketch. I was able to quickly build out our core set of colors as Figma color styles, and then use Figma’s awesome “Selection Colors” tool to quickly attach all of the component layer styles back to those core colors.
Typography was a little bit trickier and required some manual work, but it was a one-time churn through all of the components to get it all updated.
Components and Sub-Components
In Sketch, we’d made heavy use of inserting symbols into other symbols to create more complex and useful components. Many of those became disconnected during the import process, so I started with some of those base core “atom”-level components in my cleanup process, and then was able to rely on those as I moved up into the larger, more complex components.
This all happened right around the time Figma launched support for component variants, so I was able to combine some of our common component sets into a single component in order to drastically reduce the number of components someone would need to sift through to find what they needed. Unfortunately, this meant also doing some heavy refactoring to ensure overrides would remain in place when switching between variants.
Luckily, we weren’t using the library in any Figma files yet, so it didn’t require that extra level of surgery to avoid breaking existing instances of the component in use in the wild.
The most fun part of the process was going through all of the components and setting up auto-layout, a feature Sketch had recently added but in a very clunky way. Figma’s auto-layout works a lot like flexbox in CSS, so it was great being able to finally enable our design components to behave more closely to the live codebases.
Icons and illustration assets
In Sketch, we had to work with a symbol menu with sub-menus inside of sub-menus, being very careful to name symbols properly so they’d show up in the right sub-menu. This also required a designer to know how to dig for the exact icon they needed, which could cause problems at times.
During this Figma cleanup work, I was able to combine a lot of icons into component variant sets. This created a much better experience for designers using the library. As an example, they could just insert a “transaction icon” component and then switch through variants as needed, instead of having to know the exact transaction icon they might need ahead of time.
Outcomes
The design team was able to get up and running in Figma quickly using the cleaned up component library. Thanks to Figma’s easy library sharing, controlled update publishing, and overall quick and lightweight performance, setting up and shipping the library to the team was a breeze.
Once the library was up and running, it was simple for a few of us to begin making updates to support the in-progress rebrand efforts, and the ability to collaborate on the same file saved our team a ton of time!