Third Wunder's Favourite Figma Plugins

In 2019, Third Wunder took the leap from working with a combination of Sketch and Invision to a new versatile and flexible design program called Figma.

And we haven’t looked back since.

To say Figma has been a game-changer would be an understatement. It’s helped us produce cleaner, more organized designs, make handoffs to developers smoother, and helped our clients navigate design decisions with ease.

While there are many plugins that can help speed up and refine the design process, here are the 11 Figma plugins we at Third Wunder can’t live without.

1. Find & Replace

When you’re cranking out as many design systems as we are, you reuse a lot of the same components, layouts and pages. Find & Replace tools are crucial for speeding up global text updates across an entire brand in seconds (instead of hours).

2. Font Fascia

Nothing makes that scary vein in your head pulse more than messy font stacks. Take stock of ALL the fonts used in a single file and replace them in one fell swoop with Font Fascia! This makes updating our brand styles and keeping designs consistent for our clients a breeze.

3. Unsplash

Unsplash has quickly become one of our favourite plugins. For starters, you can search the Unsplash library without ever leaving your Figma window. Plus, when you’re rapid prototyping and need a variety of stock photos in a particular mood, it’s incredible to be able to simply right-click and let all the images fill themselves in. Best of all, because it’s Unsplash, you’re guaranteed a stylish image.

4. Iconify

Working from a custom designed icon library is ideal, but when you’re prototyping or building out a system from scratch, sometimes you need to find a quick placeholder icon that will tell the user story without getting bogged down in style. Iconify is a simple plugin that will help you find a house, a bell or a gear icon whenever you need it.

5. To Path

We’re always looking for ways to stay in Figma instead of switching modes to Adobe Illustrator or some other vector renderer. For a speedier workflow when playing with typographic treatments, To Path can place type along the edge of a shape much like Adobe Illustrator’s “Type on a path” tool. While the results are less refined, the ability to put objects on a path makes this a stand-out plugin, and it sure beats switching programs mid-flow!

6. Zebra

When checking for colour contrast on the fly, Zebra is a quick and easy way to verify your contrast is compliant. We like the user interface (UI) better on this plugin than other available tools. Plus, look how cute that lil’ Zebra is!

7. SPELLL

All hail the spell checkers! There’s no getting around this one, designers just can’t see typos. While there are a few other spell check plugins out there, we prefer SPELLL because it’s got a clean interface and is easy to use.

8. Export styles to CSS variables

The name says it all: this is a practical plugin for when designs are ready to hand off to your developers. Two clicks and all your colour and text styles are exported in whatever format you need!

9. Breakpoints

Breakpoints is pure magic! This plugin allows you to set up multiple layout styles for different breakpoints on a single component, allowing you to test the flexibility of your designs for mobile, tablet or desktop from within Figma.

10. Paletteer

When building out a brand for web or creating a design system, sometimes the initial brand colours don’t have the variants and options you need for a robust colour system. Plugins like Paletteer offers up a range of colours from a single hex code, and automatically adds them to your Figma file styles. We usually refine and test our colours further, but this plugin makes the process of setting up our full colour variants a breeze.

And there you have it! While these are just some of our go-tos, feel free to peruse the Figma Community to discover their wide range of plugins, as well as templates and experiments.