Overview
I led a team of 4 designers and one engineer to migrate and rebuild SoFi's design system, Artemis, from Sketch + Abstract to Figma.
The process lasted 4 months.
Proof of Concept
In order to get buy-in from stakeholders as well as other designers, I first sent out a survey to our design team to figure out how our current system using Sketch + Abstract was performing.
Library Architecture
Once we had buy-in to begin, I needed to figure out our library architecture and what problems we were trying to solve for our design team. 
The main problem we were seeing was designers using the wrong components between mobile and web designs. To solve this I went with a platform specific library approach.
Solving for Now
Our VP of Design liked this approach but wanted to drive more consistency across our native experiences.
This meant two things:
1. We would consolidate our “iOS” and “Android” libraries into one “Mobile Kit” since there was no desire to have unique visual experiences there.
2. Similarly, fundamental elements like buttons, forms, etc. would be consistent throughout all platforms, calling for us to add a "shared" library for components that were not global tokens, but that did stretch across our two platform libraries.
Dark Mode Color System
Midway through this migration process, there came about a need for supporting a “dark mode” theme.
First I wanted to figure out if we would need to optically tweak our UI colors on a dark background for accessability. I found that using colors within our 100-300 range worked best as they were less saturated.
I also needed to find dark values that our UI greys and text colors would map to.
Dark Mode Surface Mapping
Once the color system was figured out, it was time to apply the mapping to some screens to make sure it would work across our elements, components, and backgrounds.
Dark Mode Library Structure
I looked at different ways we could structure our library to support light and dark themed libraries.
I even explored theme specific layers/components nested within a single master component where a user could show/hide their theme-specific layers.
I felt this approach would end up making our components too complex to manage over time, especially if we decided to add another theme. Luckily, this was right when Figma released their variants feature, which made theming very easy from a system perspective.
Here's an example of how our system is now set up so designers and engineers can use a single button component and alter its properties endlessly to suit their theme/width/height/style/icon/state.

Crypto theme variant for buttons

Type Performance Update
Historically, our type library was not the most consistent. While some text styles sat on a 4 px grid, others did not.
In order to achieve a more predictable, vertical rhythm in our product, we wanted to make sure all of our text styles adhered to a 4 px grid.
With our architecture set, theming decided, and our text styles updated, we could finally start rebuilding our elements and components.
Back to Top