Moving Bonfire to Figma
By: Dan Strogiy
Tags: Design, Product Design, Sketch, User Experience Design, Figma

Moving Bonfire to Figma

A thrilling story on how a medium-sized startup moved all of their design files from one software to another Dan Strogiy Follow Dec 16, 2019 · 6 min read

It all started with a master Sketch file. A single file with 5 projects inside (one for each area of the Bonfire website). Things were perfect, until… they weren’t.

How it felt to wait for a Sketch file to load

It was taking longer and longer to open up the file. As features grew, the loading time became unbearably slow.

No problem, we said — let’s make a file for each component of the Bonfire platform. The account dashboard, internal tools, t-shirt design tool, and all the other areas of the app each got their own home.

This worked well for another year, until I started to get lost inside my own Sketch files. Each file had tens of pages with hundreds of artboards inside (well over a thousand artboards altogether). After realizing that sometimes it takes longer to find the right file than do actually complete a task, it was obvious that something had to change.

The Bonfire product design system (circa early 2019)

The idea of Figma has been floating around the Bonfire product team for years. Back in 2016, when it was first released, the prospect of collaborating on memes seemed really exciting. However, we didn’t seriously consider it for the product design process, mostly because it was so new, and the existing process worked just fine.

The primary Figma use case that we discovered in 2016

Three years later, we finally decided to give it a try. After a transitional period of about a month, it turned out to be quite successful. ✨

A new start

Even though Figma has a neat auto-import feature for Sketch files, this seemed like a great opportunity to redraw all of the UI from scratch (based mostly on the screenshots from the live website). It may sound tedious, but it actually didn’t take long at all. One of the benefits of this was to get all of the components up to date with how they actually looked & worked in our Angular app.

My goal was to spend as little time on managing & organizing the design system as possible, thus freeing up more time for experimenting. As Florent Crivello writes in The Efficiency-Destroying Magic of Tidying Up, efficiency tends to look messy, and good looks tend to be inefficient. It’s important not to be caught up in spending hours or days on polishing the internal design system (that practically no one is going to see). This allows to allocate more free time to tinkering with new ideas & refining the actual product that needs to be shipped.

A simpler software stack

We previously used InVision and Google Gallery for mockup sharing, Principle for animation and Google Drive for asset storage. Using Figma for handoff allowed us to eliminate (almost) all of these services. Getting rid of the need to export static screenshots just for internal feedback processes really sped up the process of design iteration as well.

A simple micro-interaction that would’ve required 3 separate tools to create

Built-in prototyping (with GIFs)

My favorite thing about Figma is the native prototyping functionality. Being able to use GIFs for loaders is an extra bonus that really makes the prototypes feel like the real deal. Smart Animate is a relatively new Figma feature that is also a game changer when it comes to prototyping micro-interactions, since it allows to create seamless transitions that can be easily replicated in code.

Even a simple loader icon can make a prototype feel real

The cloud ☁️

It’s liberating to not have to think about file structure, or sharing files between multiple computers. The only downside of using more cloud-based services like Figma is that I actually keep forgetting to save work in other, non-cloud apps since I’m so used to auto-save.

Organization system

Since every team is different, there’s no right or wrong way to organize design files. By analyzing other teams’ design organization, I noticed a few common patterns and tried to implement them in the Bonfire system where appropriate.