We gave up Sketch and rebuilt our design system in Figma
By: Karen Liu
Tags: Figma, Design Systems, Startup, Sketch, UX

Figma has features for design system management at the macro level too; updates to the design system can be rolled out to everyone at once, and admins can ensure design files created in specific teams come automatically with specific sets of shared component libraries. Admins also have the ability to see the level of design system adoption across the board to get insights on how to encourage more adoption.

Collaboration

Figma is like Google Docs, but for design. Expect real time collaboration and sharing where designers can design together in a single screen. Stakeholders can be assured they are always looking at the most recent designs and versioning happens automatically, with the ability to bring past versions back if necessary. Figma is fully functional in a browser, so stakeholders don’t have to install any additional software to collaborate with designers.

Developers have an easier time collaborating with designers too. You can ditch Zeplin or Sketch plugins to redline designs; the developer is empowered to go into each design — without installing extra software — and look at CSS properties, spacing, comments, token names, and more.

User permissions in Figma were made with collaboration in mind. At the enterprise level, admins can approve and install plugins for everyone, ensuring individuals who find useful plugins are also benefitting everyone else on the team. Teams can have projects with specific editing and viewing permissions. External guests can be added to specific files or projects. SSO is supported so that new employees can automatically get appropriate permissions with the rest of their software.

Pricing

If your company isn’t on Figma yet, this is probably the most persuasive case you have when convincing whoever is in charge of your design tooling.

Figma is cheaper than the Sketch+Abstract setup simply because fundamentally necessary design capabilities are built into the product without having to purchase additional software, and disparate roles in the design workflow have been priced appropriately.

While the collection of Sketch plugins varied across design teams, a few were ubiquitously used and billed separately from Sketch given that the developers were not from Sketch. In Figma, plugins we found were necessary while on Sketch+Abstract came with the product natively, and therefore reduced our costs. Collaboration tools such as Invision for commenting, and Zeplin for developer handoff are all handled within Figma. Before, we had to pay for separate Sketch licenses so that developers and collaborators could open design files in Sketch. Now, any collaborator can get viewing and commenting privileges for free. Only designers who need to edit designs need to pay.

The other cost-cutting area is prototyping. Previously we had to pay separate licenses for basic prototyping software. Now, prototyping capabilities are supported natively in Figma, cutting down costs further. GIFs work natively, making pages or sections of pages scroll is easily done, and it has a Smart Animate feature which automatically animates layers between artboards based on matching layer names, just like what Principle for Mac used to do. Although Figma is still not as powerful as Framer (design software made specifically for prototyping), Figma is sufficient for generic and quick prototyping.

Unexpected efficiency gains

Figma also comes with unexpected features to help improve designers’ efficiency. For example, duplicated layers are automatically named in ascending order.

Duplicated layers are automatically named [layer name][n+1]

When editing text, Figma automatically selects the text layer on the next mouse click, even if the text layer is nested several times under other layers. In Sketch, the text object would have to be manually selected each time the designers moved to edit a different text object.

Text objects are automatically focused on next mouse click after editing a text object

Of course, responsive elements and layouts are also supported natively in Figma. Tasks such as specifying automatic padding and positioning relative to a parent when resizing are available right in the tool.

Responsive layouts

The verdict

Despite having to recreate our Sketch symbols in Figma, it seemed worth the effort to rebuild our components library. We decided to move away from a tool that had us bending over backwards to retrofit a design system into our workflow to a tool that supported it by design.

Figma natively supports the sharing and maintenance of the basic building blocks of a company’s brand and design system. Coupled with missing features, other efficiency issues, and the pricing — the only sensible choice was to migrate our entire design tooling over to Figma and get rid of Sketch and Abstract.

That said, Figma still presents challenges for the design team to overcome. While basic logistical issues were solved by the migration, we still have to figure out the best way to organize components, the best way to indicate to others what stage a design is in, the best way to communicate updates to design libraries, and more unknowns. The tool is also still far from perfect — a major trade-off in migrating to a cloud-connected tool like Figma is that it will vie for the same resources as your browser. Furthermore, it still doesn’t solve the pain point of not having all your designs, product specification, decision-making, design approvals, and prototyping in one place.

However, it’s clear that the status quo has been changed by Figma. Huge improvements have been made to the design process and design system support. The previous paradigm of minimal solidarity with other Sketch users has been replaced by a new one: designers on a team can now use Figma and collaborate, together.