Our favorite Figma Plugins: Part 1
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.