← All case studies Sketch → Figma

Help Scout rebuilt a Sketch design system in Figma in a week

Buzz Usborne rebuilt Help Scout's Sketch libraries in Figma in a week. Nested symbols did not import cleanly, so he traced them. In-flight projects stayed in Sketch.

Help Scout rebuilt its design system in Figma in a week. Buzz Usborne, then principal designer, wrote the account for Smashing Magazine in September 2019.

The system had been Sketch libraries in GitHub, with in-flight projects, process docs, and onboarding that all assumed Sketch. He is explicit that a one-person studio can switch tools on a whim, and a busy team cannot.

The Sketch → Figma playbook is the importer path. Usborne’s week was a rebuild, after the importer kept the Sketch complexity he no longer needed.

Why he almost stayed

He spent two full days in Figma. Videos, other designers, and a lot of clicking. He wanted to know if opening a .sketch file would produce the system. For their components, the file opened and the nested masks came with it.

Figma lets you override color, type, and effects on a component. Sketch, as they used it, only allowed overrides they had designed in advance. Help Scout had faked the freer model inside Sketch, with masks and building-block symbols. A simple card was five nested symbols. That structure imported, and it was still five layers deep. To get Figma’s version of the same card, they had to rebuild.

His first call was to stay on Sketch. He thought Figma was the better tool and the safer long-term company. He also thought the rebuild would cost too much. Someone had to leave normal work to do the research. He compares a tool change to moving offices.

Figma is a Help Scout customer. After that “we are staying” decision, the head of sales set up a call with Figma’s product team. Usborne says the point was to compare notes. Before the call he went back into the tool so he would not be guessing. A couple of extra days changed his mind. The cost was the same. He now thought the team would get the time back in collaboration.

Linda, head of design, put the timing question directly. If they believed they would switch someday, why wait. The call with Figma became a request for advice on how to do the move.

The week

He lists seven moves. The ones that changed the files are these.

He split the system into libraries. Core holds brand, illustration, and icons, the pieces any designer needs. Other files are domain-specific. Core moved first, and the other libraries were built from it.

He put color, type, and effects into Figma styles, and he documented those styles in the library. One shared definition, then the components use it.

Because overrides are freer, one Figma component replaced several Sketch symbols. His example is a button. Sketch had a solid button and an outlined button. Figma has one button. He draws the useful variants on the canvas, so a new designer can see which overrides matter. A chat bubble is the extreme case. One component, six layouts, drawn out so nobody has to discover the overrides alone.

He stopped copying Sketch’s names. Pages are categories, such as Forms. Frames are groups, such as Inputs. Components are the element, such as Error.

Icons and other simple objects imported fine. Complex components did not. His faster path was a screenshot of the Sketch component, then tracing it in Figma. He says that beat importing and deleting the extra masks.

When the system existed, he sent the remote team a 20-minute demo. Basics of the tool, plus what would feel better in the components. He says that landed better than a warning with no file to open.

He also dropped the idea of maintaining both libraries. The team is small, and nobody’s only job is the system. Docs and onboarding were rewritten to point at Figma. That forced the handoff and the engineering links to move too. Sketch files still exist. They are no longer updated, and they are no longer the documented system.

In-flight projects stayed in Sketch. Some designers moved their own active files. New projects started in Figma.

What he does not claim

There is no hour count beyond “a week” for the rebuild, and “two full days” plus a couple more before the decision. There is no license figure. There is no before-and-after on design throughput.

The gain he describes is structural. Fewer components, overrides that match how they had been abusing Sketch, and a clean break so the team was not keeping two sources of truth.

He ends by saying he does not have a universal method, and that you should price the rebuild before you switch. Time, for Help Scout, would show whether the call was right. The article does not come back with that later measurement.

What I would copy

Open one nasty symbol before you commit. If it arrives as five nested masks, you are rebuilding. Budget that, the way Usborne did after the two-day trial.

Split libraries so the first week has a finish line. Core first, then the product files that depend on it.

Trace the complex pieces. He was faster with a screenshot than with an imported mess he had to delete.

Leave in-flight files where they are. New work goes to the new tool. Rewriting onboarding is what stops the old library from staying alive by accident.

The Sketch → Figma playbook is the import and reconnect checklist. Use it for icons and simple files. Use Usborne’s week when the design system was built out of nested overrides that Figma does not need.