Day 53 — Building a Design System in Figma (and saying goodbye to Sketch)

1 — If it ain’t broke…

  1. 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.
  2. 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.
  3. Plain old curiosity. I love trying out new tools and building better workflows, and Sketch has become a bit stale.

3 — Setting up Figma

  1. Eliminate the need to open old Sketch files.
  2. Create shared assets for our team.
  3. Speed up our design process.

3 — Building our Design System

Invincible Brand Guidelines

Invincible Brand Guidelines

Translating the Brand in Figma

  • 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.
  • 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

Files I created for our design system

The Design System in Action

The Design System In Action

What’s Next?

--

--

--

Startup founder surviving in his parent’s basement.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What is Information Architecture, Briefly?

Netvrk Presents: Angry Ape Army

Gimme just a little more love

Launching Mega Mentor

Illustrations showing the 3 steps to become a mentor; set up your Calendly account, fill out your details on the mentors form

Getting around to having fun, collaborative meetings, and connecting with our team ❤️

Everything is Bigger at SXSW

"Wallpaper patterns might be divided into two principal classes, the ""one-top"" or straight…

WooCommerce Product Variations Plugins

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bob Weishar

Bob Weishar

Startup founder surviving in his parent’s basement.

More from Medium

My eight months journey of reinventing the consumer healthcare experience @mpoweredhealth

How to get into Design Systems

In-Flexibility mantra for UI designers in Corporate ecosystems

What’s UX audit and how it benefits your business