Day 53 — Building a Design System in Figma (and saying goodbye to Sketch)
Today I switched from Sketch to Figma.
Since starting Invincible, I’ve used Sketch for all of our design work — from social media posts to app design to web design. It’s a really amazing tool — and especially compared to Adobe Illustrator, it gave me the opportunity as a wannabe-designer to become a designer without getting bogged down in the tool.
But more and more, I started hearing amazing things about Figma. So when my teammate switched to Windows and needed an alternative to Sketch, it was time to check it out.
1 — If it ain’t broke…
Setting aside the benefits to having a shared team tool, I’ve held onto Sketch because it wasn’t really broken — it worked perfectly well for my needs and plus I didn’t want to take the time to learn a new tool.
But increasingly, a list of reasons to switch started building up:
- I started to see performance issues in Sketch files. The file sizes are massive, and I started re-booting my machine a couple times a day to fix file freezes and crashes.
- Sketch is simply not built for collaboration. When I was doing everything solo, this wasn’t a big deal, but once you’re working in files as a team, this becomes a must-have feature.
- Plain old curiosity. I love trying out new tools and building better workflows, and Sketch has become a bit stale.
3 — Setting up Figma
Figma is free to start but to really have access to the collaboration features you’ll need, it’s $144/year/user.
Here were my goals for setting up Figma today:
- Eliminate the need to open old Sketch files.
- Create shared assets for our team.
- Speed up our design process.
3 — Building our Design System
I did this by building out our design system in Figma. Basically: the common things that we use over and over when we design.
Invincible Brand Guidelines
The source of truth for our design work are our brand guidelines, which include our values, fonts, colors, and logos.
P.S. If you don’t have a set of brand guidelines, I highly recommend spending the time and money on doing this early. The brand identity is about so much more than a logo, and everything downstream will benefit from it.
Translating the Brand in Figma
Essentially I needed to make our brand guidelines available in Figma. In Sketch, it’s fairly easy to setup the colors, but everything else is a bit more cumbersome.
With Figma, the design system becomes the central source of truth. This means creating common styles and components (more info here) for each of the items in our brand guidelines, including:
- Colors: Brand colors that we use over and over.
- Fonts: Key fonts we use across the app and social media posts.
- Logos: Brand assets across our marketing and collateral.
And after realizing how powerful and easy this was to setup, I also created components for some other shared design assets that we use over and over, like:
- Characters: A ton of design assets I’ve licensed or built over the past 2 years that get used and customized over and over.
- Backgrounds: Miscellaneous cool stuff that comes in handy for social media posts.
The End Result
Within Figma, I ended up creating shared components for each of these assets within our Design System. Now, assets are shared across all of our projects and there’s no need to go searching — we have a single source of truth that can grow with our creativity (plus a few extra iOS and Android design tools).
The Design System in Action
Now, wherever I am in a file, I can easily drop in a character, access logos, and modify colors according to our brand.
I was blown away by how much quicker this enabled me to work. It’s only been a day, but I’m totally loving Figma. Coming from Sketch, the general design is fairly similar, but the collaboration features plus the organizational tools are total game changers.
What’s Next?
Tomorrow I plan to really put Figma to the test by creating a landing page to test our hypothesis for this week’s experiment.
