Top 8 Figma plugins for UX/UI designers
Figma Plugins supercharge the design workflow
One reason Figma is so useful is that it has thousands of Figma plugins created by the design community. Figma introduced plugins in 2019, and now they are must-haves for UX/UI designers to speed up the design workflow. Here are the Top 8 Figma plugins recommended by our design team.
Top 8 Figma plugins for UX/UI designers
Similayer is a Figma plugin that allows you to select all the other layers that share the same parameters from a selected layer. Choose parameters such as layer name, fill color, text style, and many more — and quickly and precisely select just the layers you want to modify. Check out the example below to see how I am able to recolor only the second tooth of each of my robots:
In our projects, we usually rely on Zeplin for handoff. It is the definitive source of truth our developers use. We have created an optimal design workflow with Figma and Zeplin. It’s useful to have a static, non-changing version of a prototype, compared to the always-changing Figma file that created it. And with the Zeplin plugin, it’s easy to upload a screen from Figma: Just select the screens you want and hit a button. If a screen has been uploaded before, Zeplin uses the frame name to simply update the screen, so you don’t need to worry about duplicates:
3. Content Reel
A secret to making a great prototype is having realistic content. Adding realistic content to a prototype not only makes it look like a real product but also helps you address content constraints you might not have thought of. Content Reel includes a library of various content types such as first names, addresses, numbers, dates, and even images. For example, suppose I now want my robots to have names:
4. Paste to Fill
This is just one of those plugins that will help you with quick and dirty exploration. Paste to Fill will get whatever image is copied on your clipboard and add it as a fill to a frame or shape. It’s simple and quick — and eliminates the need to download the image and add it to the file.
5. A11y — Focus Orderer
Building accessible apps is a huge priority for ArcTouch, and it starts with design. One of the things we pay attention to is the expected behavior for both keyboard navigation and screen reader software. We use the Focus Orderer Figma plugin to highlight the order and how each element of the screen should be read:
6. Axe for Designers
Unlike most accessibility plugins that will only point out contrast issues, Axe for Designers goes beyond the obvious to make sure our designs comply with all accessibility guidelines. Not only will Axe detect contrast color issues, it will also point out if your screen has a “heading” (it checks for text styles called “heading”), and detects if a button’s touch area is compliant with minimum accessibility requirements.
7. Figma Tokens
Design tokens are probably one of the most important tools to enable true a design system when development and design are taking place concurrently. While Figma doesn’t support this natively, Figma Tokens is a great plugin to manage your design tokens:
8. Find and Replace
This is another simple but essential Figma plugin. In a big Figma file, you can get lost with copies sometimes. Use the Find and Replace plugin to look for a specific term and update it if needed. I often use it to bulk-fix typos, such as “Framebott” with double “t”s:
Figma plugins for work AND play
Need a break? Figma plugins are not just all work and no play. Add the Dice or Game Table plugins for some dice games, or play Figma Catan with your friends and coworkers (our ArcTouch design team had a lot of fun with this one!). Get a widget called Photo Booth to add some selfies quickly to a Figjam board. This is great for design workshops with clients.
The Figma community is continuously innovating with new plugins for designers. I hope some of these 8 plugins that our team uses are helpful for you. And if you need any additional help with your UX or UI design work, please contact us.