ArticlesContactCareers
#tips
#design
#figma

Our favorite Figma Plugins: Part 1


3 min read   /   
32d ago

We cover a lot of design ground here at Superformula. We design web experiences, native apps, admin dashboards, kiosks, and well, you get it. Because of this, we make our way to the deepest corners of design and collabration tools.

This series is all about the Figma plugins we love and use in our day-to-day work. Some of these will be known to you, but hopefully you'll find a hidden gem in this list. Hit us up on Twitter if you find something you love.

Annotate It!

What the docs say: Annotate it! is a plugin to help you automate the process of annotating your designs for a smooth and effective developer handoff.

Why we find it so useful: Spending time leaving contextual breadcrumbs for viewers of our Figma files is always valuable. This plugin has been huge for cutting down our documentation time and building clarity around our dev handoff.

Autoflow

What the docs say Autoflow makes it easy to draw flows. Simply select 2 objects and a line will be magically drawn between them.

Why we love it Keeping an entire digital product team (product managers, engineers, QA, analytics and your fellow designers) aware of all the possible user flows for an upcoming feature release requires diagrams. We've found this to be less painful with Autoflow. Someday I hope it has a labeling feature.

Content Reel

What the docs say: Design layouts more efficiently by pulling text strings, images and icons from one palette. Content Reel lets you create custom content and share it with other Figma users. Collaboration has never been easier!

Why we love it: At Superformula we put a major emphasis on designing our products with real world content or data at all times. Its important for us to see how various types of content will work within the constraints of a design. Content Reel allows us to quickly auto fill unique content throughout our designs for images, names, locations, icons, etc.

Learn More

Downsize

What the docs say: Compress images right on the canvas! Reduce file size & loading time. Increase performance.

Why we love it: Figma files can quickly absorb all of the RAM on your computer and its usually associated with large image files. As a designer you want the highest res photos possible to show off your work at all resolutions. Downsize allows you to quickly compress some or all of your images in your file to improve performance of your file and still hold the fidelity of your designs.

Learn More

Font Preview

What the docs say: This plugin generates live previews for anything you type, right in the plugin window.

Why we find it so useful: For some reason, Figma has yet to add the ability to preview your fonts inside the font panel. This means you can't actually see your type rendered until you select a font. This is incredibly annoying if you're trying to quickly see how all your fonts will render a specific word. Font preview takes this concept a step further and allows you to search, favorite and preview fonts and easily apply the styles to text fields.

Learn More

Master

What the docs say: Create, attach, clone and move components in a couple of clicks without losing overrides! 🔥

Why we find it so useful: This plugin makes it super easy to build out and maintain our component libraries. We can use it to quickly convert a bunch of frames into a single component, convert an existing set of components from one breakpoint to another, and help to re-attach instances that may have been detached at some point - like when we move components up to our library.

Learn More

Pixel Perfect

What the docs say Select any layers you want to snap back to the pixel grid, and presto, their position and size are rounded back to nice round numbers.

Why we love it Pixel perfect is the fastest way to get any elements in your designs that may have decimal position or size back into perfect numbers. This is especially useful if you or your team are moving quickly in a project and need to clean up any UI or illustrations.

Learn More

Split Shape

What the docs say: Split your shapes, text layers, groups and frames into multiple instances. It's useful for when you need to generate columns and/or rows in a specific container without having to calculate the size manually.

Why we find it so useful: Being the lazy designers we are, tools like split shape make quick work of grids and layouts. Pro users can use it to quickly split areas of layouts into shapes that can act as guides for playing more robust components in. In many ways, I use it like a robust autogenerated set of rulers and guides.

Learn More

Stark

Stark

What the docs say Design products that are accessible, ethical, and inclusive with a contrast checker, colorblind simulator, education and more. All based on WCAG guidelines.

Why we love it Ensuring that everyone has access to what we create regardless of ability or context is our responsibility as a design team. Stark makes that a breeze by quickly checking our work and offering suggestions.

Learn More

Well, we hope you found something new in this list. Reach out to us on Twitter and let us know if you found anything useful! We're always looking for new plugins to explore.

More Articles

Article Cover
#interview
#design
#press

Superformula's Iesha Smith Talks Product Design and Working Remotely

 
Article Cover
#interview
#figma
#zeplin

Figma and Zeplin: Superformula’s winning design-to-development process

 
Connect
Whether it’s our services that speak to you or joining our team seems like a dream come true, get in touch, or follow along on all our digital adventures.

©2021 Superformula. All rights reserved.
We use cookies to improve the user-experience of this website.
OK