About The Writer

Buzz is Principal Designer at Assist Scout and previously Design Lead at Atlassian. He’s headed design groups at Marketing campaign Monitor, Skype and a handful of …
Extra about
Buzz
Usborne

Switching instruments isn’t a call to be taken frivolously. Right here’s a nuts-and-bolts and behind-the-scenes take a look at how Assist Scout migrated design methods from Sketch to Figma — why we made the swap, a step-by-step walkthrough of what it entailed, and what we obtained out of it — a narrative that applies to any staff contemplating a large-scale instrument migration.

For the previous 12 months, each time I obtained annoyed with Sketch, a colleague of mine instructed I attempt Figma. Then, after I wrote an article about constructing our design system in Sketch, I obtained a bunch of suggestions from individuals telling me to attempt Figma. And just lately, Linda, our Head of Design at Assist Scout, requested me, “Hey Buzz, shouldn’t we be utilizing Figma?”

I couldn’t combat it anymore… I simply needed to attempt Figma!

This isn’t a love letter to Figma or a harsh overview of Sketch. As an alternative, it’s a cautionary story for anybody who’s pondering of transferring instruments. That is the story of how all the pieces panned out, and the specifics of migrating a design system from one platform to a different.

Understanding The Price

The very first thing to think about is that there’s a value concerned in switching instruments — a consideration not often factored into the dialog every time there’s a #designtwitter pile-on. Just one-person groups can afford to alter design instruments at will; for busy groups, it’s not really easy.

The issue for us at Assist Scout was the truth that our design system is constructed as a number of, interdependent Sketch Libraries managed with GitHub. We even have a number of in-flight tasks, processes and huge documentation that each one rely on Sketch information. And don’t overlook the monumental effort concerned in coaching and transferring a whole staff onto a brand new instrument while concurrently doing precise work!

Contributing to Assist Scout’s design system occurred by GitHub. (Massive preview)

There’s additionally a monetary price concerned in somebody (on this case, that’d be me) taking the time away from business-as-usual work to analysis and doc all this good things. Level is, should you work in a longtime design staff, you’ll know that altering instruments is about as straightforward as transferring places of work.

However that’s how this works. Instruments are “sticky” simply by advantage of being laborious to depart. Suffice to say, this wasn’t going to be a call we made frivolously.

Kicking The Tires

With the understanding that my determination would have an effect on the entire staff and group, I began by spending two full days exploring Figma. I watched movies, I spoke to different designers who use it typically and I performed with the instrument… rather a lot! Primarily, I explored how straightforward it could be to maneuver our Sketch elements over. A query that got here to thoughts was whether or not it could be as straightforward as opening a .sketch file in Figma?

Unsurprisingly, no.

It seems that Figma and Sketch — whereas related in format and performance — have some key variations in how they permit elements to be overridden. This was the kicker. Figma permits for shade, kind and results (shadows, and many others.) to be personalized by the person, whereas Sketch will solely permit pre-determined overrides. Due to the restrictions Sketch imposes on overriding elements, we’d constructed our unique design system round that — permitting full shade, border and magnificence management utilizing a posh system of masks and building-block elements.

Over-complicated? Sure. But it surely labored nice for us.

Right here’s a easy card image in Sketch which was created from 5 nested symbols that had been obligatory to ensure that us to realize the extent of flexibility we required. That is the precise type of factor that doesn’t import properly into Figma.

A preview of how we introduced Figma-level overrides to Sketch (Massive preview)

Whereas this complexity in Sketch allowed us the extent of flexibility Figma affords out-the-box, it meant that just about any element imported from Sketch introduced an pointless stage of complexity together with it. To ensure that us to make use of Figma, we’d have to rebuild all the pieces from scratch to strip every element all the way down to the necessities.

Determination Time!

Given the above, my preliminary determination was that though I assumed Figma was the higher instrument, the stronger firm, and the safer long-term wager, it was going to be too troublesome and dear to change. Re-building total libraries is an enormous job! It was like breaking apart earlier than we’d even given it an opportunity.

“It’s not you, it’s us.”

However because it occurs, Figma are Assist Scout’s clients. On listening to our determination to stay with Sketch, our Head of Gross sales arrange a name with the Figma product staff — not essentially to alter anybody’s minds, however to share our experiences, extra like as mates do. They had been understandably cool about the entire thing, however requested whether or not they may speak to me about my selections. And that was a possibility to not be missed!

Within the days main as much as my dialog with the Figma staff, I made a decision to leap again into the instrument — on the very least to offer myself sufficient understanding to have the ability to speak with confidence and never appear to be a complete newbie in entrance of people that knew much more on this space than me. By the point I spoke with the staff, I used to be a convert — in simply these couple of additional days, I spotted how rather more productive and collaborative we’d be as a staff with these sorts of options at our disposal. The price of switching hadn’t modified, however my opinion of whether or not the associated fee was value it had. Assist Scout’s Head of Design made a compelling level to that impact too: If we really feel like we’ll make the swap sometime, then why not immediately?

So my dialog with Figma ended up being extra alongside the strains of, “Give me some recommendation on the best way to make this work,” which they graciously did.

How To Change

So it’s attainable that you just may be in the identical spot I used to be; you wish to transfer instruments however are confronted with the monumental job of rebuilding tons of of elements, types, and a load of documentation. Nicely, good friend, you’re going to want to take a deliberate and systematic strategy to this. Your mileage could differ, however that is how I moved Assist Scout’s total design system to Figma in only a week.

  1. Break up Your Libraries
  2. Lean Closely On Kinds (+ Documentation)
  3. Present How Parts Prolong
  4. Set up Correctly
  5. Importing vs. Re-Constructing
  6. Get Your Group On Board
  7. Go All In

1. Break up Your Libraries

This is applicable to creating Sketch libraries too, however I strongly counsel splitting design methods into separate sub-libraries that cowl totally different components of your ecosystem. In our case, now we have Core which incorporates elements relevant to any designer (model property, illustrations, icons, and many others.), then domain-specific paperwork. This strategy makes migration a bit simpler to deal with whenever you’re transferring issues over in organized chunks.

Our design libraries, separated by staff. (Massive preview)

In our case, migrating to Figma concerned starting with the Core parts — which had been then used to construct out subsequent libraries.

2. Lean Closely On Kinds (+ Documentation)

Figma has “Kinds” that work in the identical means you’re used to seeing Sort Kinds working in Sketch, however with the additional advantage that these additionally apply to paint and results. With this in thoughts, it’s actually helpful to outline all of your colours and shared parts in a single single library, then doc them.

An instance of how types are documented inside every library (Massive preview)

three. Present How Parts Prolong

Since Figma permits a lot higher management over how elements will be prolonged, you’ll most likely find yourself with fewer elements than you had in Sketch — as a substitute of “button stable shade” and “button outlined,” in Figma you’ll simply want “button”. Due to this, I discovered that it was necessary to doc the other ways a element will be prolonged straight inside the library itself.

For instance, just one element is required to re-create a whole two-sided chat dialog in Figma. However a brand new designer would by no means know what overrides to use, so it’s necessary to visually reveal every time it’s attainable. Right here’s the identical element being utilized in six other ways:

An instance of how a single Figma element can assemble a whole dialog (Massive preview)

four. Set up Correctly

I rapidly deserted attempting to duplicate the naming construction I had within the unique Sketch information due to delicate variations in how Figma’s file system works. Finally, the purpose is to ensure elements are in a logical place and straightforward to seek out, and the easiest way I discovered to realize that was to fastidiously arrange my Pages by class (e.g., Types), Frames by group classification (e.g., Inputs) and Parts by particular person component (e.g., Error). Being particular about naming makes elements tremendous straightforward to seek out — particularly by individuals who didn’t initially create them.

Naming is necessary! (Massive preview)

5. Importing vs. Re-Constructing

Phew, I want I had excellent news right here in regards to the bodily act of importing Sketch elements (for lots of issues, specifically particular person parts like icons which you’ll import from Sketch and it’ll all work out nice). Nonetheless, for extra complicated elements (particularly ones that contain masks and nested symbols), you’re higher off re-creating the elements from scratch. Sure, it’s extraordinarily painful, however on the upside, you’ll get actually good at utilizing Figma in a really brief time!

My workflow in Figma for re-creating the extra complicated Sketch elements was actually to screenshot then “hint” them in Figma. As ridiculous as this sounds, it turned out to be a lot sooner than importing from Sketch and eradicating the pointless parts. And I’m somewhat bit ashamed to say that I really like this type of work, but in addition, seems that this workflow was more practical.

(However in fact, should you’re migrating easier elements like icons, then Figma’s importing capabilities will serve you simply fantastic.)

An perception into my day (Massive preview)

6. Get Your Group On Board

As a 100% distant staff, most issues we do at Assist Scout are properly communicated — this was no totally different. So whereas the staff was conscious of the upcoming instrument swap, it wasn’t till I had completed the design system that they obtained the nudge.

At this level, I gave a 20-minute demo video explaining Figma, some fundamentals on the best way to use it, and a number of the cool enhancements they’ll discover to their workflow when utilizing elements. This turned out to be a success and undoubtedly softened the blow for individuals who had been maybe somewhat hesitant in regards to the transfer at first.

The unique video that I shared with my staff

7. Go All In

A part of my preliminary analysis concerned seeing whether or not we may preserve our design system in Sketch and Figma concurrently. I’m sure it may be finished, however it’s a little bit of a stretch for us given our pretty small staff measurement and the very fact now we have no single particular person or staff devoted to the maintenance of our libraries. However as a substitute of conserving what we had in place, I made a decision to go all-in on Figma.

This meant creating and updating all documentation and worker onboarding to reference the brand new stuff which pressured me to handle the migration of something that referenced the previous stuff — together with current improvement processes and designer hand-off. Finally, drawing a line within the sand meant that we had been all dedicated to creating this a hit.

After all, the Sketch libraries nonetheless exist; they’re simply not documented nor up to date. And when it comes to migration, in-flight tasks proceed to make use of Sketch information (though some designers have chosen emigrate their work to Figma), whereas new tasks use Figma. It’s a clear break.

Conclusion: Make A Plan!

It’s laborious to conclude an article like this with out sounding like I’ve all of the solutions — which I most actually don’t. However my recommendation to anybody switching instruments is to take it sluggish. Put within the analysis, make a plan of assault, determine the associated fee then weigh up whether or not you’re ready to pay it — this is applicable whether or not you’re transferring to Figma, Sketch, InVision Studio, Adobe XD, Framer X or another fashionable new instrument I haven’t heard of but.

For us, time will inform, however I’m nonetheless fairly assured we made the fitting name!

Additional Studying

(mb, yk, il)