5 Indispensable Figma Plugins
Figma is a very powerful tool, and sure, works just fine on its own. But one of its superpowers is how easy it is to use plugins to make your work easier and better. Community-driven and easy to install, plugins find you resources, check your work, fill in the blanks, and can enhance your process.
We use Figma throughout our project lifecycle: from wrangling user research in FigJam to creating high-fidelity mockups in Figma. And there are a few plugins I can’t live without. They make my job easier and our products look better for client review, prototyping, and developer handoff.
Check out these 5 Figma plugins I use in every project:
Unsplash has become a creative commons powerhouse and changed how we all get free stock photos online. This plugin brings that extensive catalog right to your frame. You can search for photos and place them right into your shapes and frames as a background image, with the same adjustments and options as any other image.
2. Component Page
After designing for nearly 15 years, I can’t seem to separate iteration from chaos. Is that what makes it so good and innovative? And a lot of the time, that chaos comes in the form of me making components all over the place in my files and then spending 45 minutes moving them to their own page. If you’re like me, the Component Page plugin is a game changer. This plugin searches your entire file, finds any components, and then moves them to their own page called Components. Already have a page created? No problem. As long as that page is called “components,” this plugin will move them right over. Need to collect your components again? You got it. You can run this plugin multiple times throughout your project to always have your pieces in the right place.
I work a lot with public agencies who often need static or interactive maps in their UI. I used to make screenshots in Google Maps to then awkwardly crop and paste into my files. Then I found Mapsicle. This plugin is like Unsplash, but for maps and so much more. You can not only place a great looking Google Maps / Open Streets-style map (Mapsicle offers several pre-designed map styles), but also specify its size, zoom level, and geolocation.
4. Content Reel
When I wireframe or comp UIs, I like to strike a balance between things looking real enough to test, but not so polished clients feel bad for giving me feedback. An often time-intensive part of that process is integrating text: sample titles, names, phone numbers, email addresses, cities, etc., especially if your client is still working out all the kinks with their final content. You don’t want to "Ipsum Lorem" your whole layout, but thinking of all the characters from Lord of The Rings for a comp can be a brain buster.
Content Reel solves that problem by creating little libraries of dummy content that feels real. Just select your text box, search for your content, and this plugin pops the placeholder text right in. You can search community-created content or add your own lists. The plugin makes it easy to add real or nearly-real content to your comps quickly and easily. While real, client-approved content is typically best, especially in client presentation scenarios, using nearly-real content can help you make progress on wireframes.
Creating an Internet for all is a key value of our design practice here at Kalamuna and helps us develop inclusive spaces for everyone on the web. While accessibility goes far beyond making space for many types of visual users, one plugin I use in every project is Contrast. This plugin allows you to test any color in your layout to make sure it conforms to WCAG 2.0 AA and AA contrast ratios directly in the plugin. Contrast will analyze your frame or a selection and inspect the colors based on their layers, making it easy to test color contrast for text over shapes, borders on background colors, etc. It also gives guidance on contrast based on usage, like graphics vs. body text and helps you keep track of which parts of your design need refinement. This plugin is great for creating style tiles or guides, testing client branding guidelines, and ensuring your work is available to as many people as possible.
With a huge community offering such a broad array of plugins, there’s no limit to customizing Figma for your project and making your process more efficient and effective.
I’ve shared some of my go-to Figma plugins here, but I’m always up for learning about what other designers use. Hit me up at @JessSchillinger if you’ve got a must-have plugin I haven’t mentioned here. What plugins do you use?