Five essential Figma plugins
There are already too many Figma plugins available to easily find the hidden gems. Below are five I’ve found useful in my work at Onfido.
There are already too many Figma plugins available to easily find the hidden gems. Below are five I’ve found increasingly essential in my work at Onfido.
Redlines
The Redlines plugin allows you to easily add dimensions and spacing to your mockups in a visible way. The usefulness of this really depends on the relationship your engineers have with Figma. If you’re working with people who need more explicit UI specifications or you’re exporting images for handoff in a tool that doesn’t integrate with Figma directly, this can help. The redlines layers are all added to a separate frame that can be hidden or shown to make things easier to manage.
HTML To Figma
If you’re working on a website or browser-based product, the HTML to Figma plugin can save you a lot of time. It converts live web pages to editable Figma layers.
With this plugin you can get a pretty good approximation of a page’s layout with text layers, images, vectors in a way that’s easy to swap out elements for any design system components you have, and build something pretty close to the live version. It works with public URLs, but also has a browser extension that will dump secured or local UIs to a JSON file that can then be imported using the plugin.
Clean Document
The Clean Document plugin combines a few different functions to help automatically organize & name your layers, snap elements to whole pixels, and ungrouping groups with single elements inside. Inspired by Monzo’s article on how they organize their sketch files, we’ve tried to implement a bit more rigor in our file layout conventions as we scale, and have found the layer sorting especially useful.
Design Lint
Linting is a process originating in software engineering where the design/code you produced is automatically analyzed for small errors that can easily be made by a human. Design Lint, will give you warnings for things like an inconsistent border-radius, and text/fill/effects styles that aren’t part of your design system. If you’re having to maintain a design system and try to keep it clean, this plugin will help immensely.
A11y — Color Contrast Checker
A11y — Color Contrast Checker is our first choice for contrast-checking at scale, for its ability to run on a frame and report multiple contrast issues within that frame. Able and the ever-popular Stark are also used here and have different strengths and weaknesses.
On each element report, there’s a slider that you can use to change the foreground and background brightness to quickly check how much you need to tweak colors to reach AA or AAA levels.
Some other plugins require you to select foreground and background elements one at a time which can be fiddly and a bit tedious if you have a lot of elements to check.
I used this recently to audit our own design system’s color palette foreground/background recommendations.
That’s it for now. There are dozens of plugins being released each month, so expect more lists in the future.
Thanks to Charlotte for helping me make this post better.