Figma Plugins to boost productivity

Figma Plugins are an incredible way to save time in some otherwise quite repetitive or arduous processes. Here’s my own list, gathered from what I’ve come across online and been recommended by colleagues. Here are some plugins I use on use daily to enhance my productivity.

1. HTML to Design (html.to.design)

Created by divRIOTS, I’ve listed this one first as it really is one of the very few that genuinely blew my mind a bit when it was introduced to me while on a team meeting with some colleagues. As the name states, this plugin allows you to turn any webpage into a dynamic, editable Figma frame with ready-to-use layers and components.

Sounds a bit too good doesn’t it? Have a look below:

The opportunities are endless. For example, some of work may require you to work on a pre-existing product with very little, or no design system at all. Rather than rely on screenshots or recreate the system from scratch with every new project, this get’s rid of a lot of that time spent. That way, you can be the one to start to create and implement a design system and the more work you do on the product, the more time saved and consistency maintained.

You could also use this for some self-assigned design challenges that you choose to take on. Say you challenge self to redesign the LinkedIn feed, or any other site of choosing, this cuts down the time it will take to gather valuable components and give you a flexible starting point.

The plugin is free to use (win), but it does also come with a PRO license that offers unlimited conversions among other benefits should you be so inclined.

2. Table Creator

My next time-saving Figma plugin of choice was one created by freelance designer Gavin McFarland, this plugin allows you to create tables within a matter of seconds! As part of my job I often work on designs that either need or contain some type of table/grid and I can’t tell you the cumulative hours I must have wasted creating each grid from scratch. From one input field, to the divider, to the text input field, to the next…riveting, as I’m sure you can imagine.

I then figured someone out there must have had to do this too, as such there should surely be a quicker way to get this done, cue Table Creator.

As shown in the GIF above, you’re able to set parameters, choose rows, columns and layout of table in a very intuitive dialog. Table Creator then also leaves users with master components in addition to their table, this then allows you to edit the appearance of main table directly from the master component. Admittedly, this isn’t the sexiest plugin out there, grids are monotonous on the best days but the timesaving this plugin offers is unparalleled, definitely a key feature in my arsenal.

3. Unsplash

I’d be remiss not mention Unsplash, a plugin I’m sure we’ve either all used or come across at one point or another (even right here in Medium). Unsplash is probably the most popular Figma plugin and it’s no surprise why. It’s a massive hub of free stock images that has helped designers and developers the world over, from developing concepts, persona’s, gallery grids and all sorts — they’re a game changer. In their own words they provide:

“Beautiful, free images gifted by the world’s most generous community of photographers. Better than any royalty free or stock photos.”

Access to millions of beautiful images aside, what I especially like about Unsplash is that it provides a wider range of images of diverse people than I’ve seen on any other site. Most stock images are limited when free, and even the paid options don’t often provide the best options or bang for buck. Some even carry a stereotypical undertone which doesn’t reflect the true nature of the group in question. But on Unsplash, I’ve been able to use images of people across several demographics, something I wish we could see more of in concepts and design work.

The world is a vast and diverse place, it’s about time our prototypes and persona’s stop reflecting just one race, gender or naming convention.

4. Iconify

Icon design and management can be quite time consuming, especially if you set self the brave task of designing own from scratch. While you have options such as The Noun Project online, their options aren’t royalty free and if you plan on putting together a set of icons it’s quite challenging to find a matching style. The other go-to is using the Google Material Design system, which is great — but still needs a few extra clicks finding the page, searching for icon, selecting it, downloading it, importing it…you get the picture. Iconify is a collection of all open source icon libraries, conveniently located in one place within Figma. This saves you the hassle of hunting down royalty-free options, or filling PC download folder with various icon files (often repeating downloads).

5. Colour Blind

Not only a time saver, but also great for Accessibility, the Colour Blind Figma plugin allows you to “view designs in the 8 different types of colour vision deficiencies” — Sam Maison de Caires (Creator).

Colour blindness affects 1 in 12 men and 1 in 200 women in the world, meaning any product you design will almost definitely cross the path of someone that is colourblind. This plugin allows you to take colour palette into consideration, particularly in cases where an aspect of design is heavily reliant on colour (which it probably shouldn’t be, this is one of the reasons why).

While the example used above is quite basic and for illustration purposes only, this can be used to review colour palette choices, particularly concerning shading or error/success states. design should never solely rely on colour, not only due to vision impairments but also, colours mean different thing’s in different cultures around the world. Design for all, not just some.

6. A11y — Colour Contrast Checker

In keeping with the theme of Accessibility, the A11y plugin created by Kelly Gorr checks the colour contrast of all visible text within a frame. This is especially helpful when creating button’s or search bars which traditionally have been designed with quite low contrast. I’d typically manually check contrast by using the Accessible Colours website, which is great, but again requires you to copy/remember the two colour code and paste them into their accessibility checker. A11y lets you run this check directly within Figma, ensuring designs are WCAG compliant and visible for all users.

The process is quick and simple and once you’re set on an accessible contrast ratio, you can save this as a colour style for future iterations.

7. Content Reel

Last and certainly not least, we have Content Reel, another largely popular plugin that allows users to generate custom content en masse. There are a few plugins that offer similar functionality( most notably Faker), but what I enjoy about using Content Reel is that I am able to search for various text strings and save my own list of favourites. I am not confined to a predetermined list of content. It’s especially useful when generating diverse content as there are several varying demographics to choose from, whether based on the language of names, location specific telephone numbers or personal identification.

In the example shown above, I only showed how Content Reel can be used to generate text, but it also allows you to generate images and icons. It is a community-fed plugin giving expansive options, it’s a great option to speed up wireframing process. I actually used the Table Creator plugin I mentioned above as well, see how it all ties in together?