Top 16 underrated Figma plugins to boost ⏱ design systems development

Figma plugins step in

It's no secret that Figma is now one of the flagships among the tools for creating designs and prototyping. Its advantage over Adobe XD or Sketch is that Figma is an online tool that gives the user the opportunity to work and collaborate with other people in real time. Thanks to this, and also thanks to its wonderful functionality and nice interface, many Adobe XD, Sketch and InVision users started to use Figma.

However, Figma had one big disadvantage, which made users who "migrated" from other platforms miss the previous tools a bit - the lack of plugins. This feature was something that a lot of Figma users asked for, because sometimes they had to use third party applications, which was obviously not very convenient. And, of course, we, as designers, strive to make our lives and lives of other people easier, and we are looking for various ways and tools that will help us become more efficient, improve and accelerate our workflow.

And in August 2019, everything has changed - after several weeks of closed beta testing, Figma finally announced the launch of plugins in their system. Figma's employees say that they had the idea about having plugins 2 years ago, and that all this time they were busy polishing the API for the smooth operation of plugins inside the system.

{{spacer-64}}

Pros of using plugins

Plugins provide simple and intuitive ways to increase your capabilities in Figma. They help optimise and automate routine and repetitive tasks - with the name of the layers, with search, with grouping, adding special functions, such as adding useful content to mockups. They are like butler Alfred for Batman. Always help at the right time.

At the moment, there are almost 420 plugins in Figma. Yes, they are being added almost on an everyday basis. The wonderful part of releasing the Figma plugins is that they are developed not by company employees, but by ordinary people, like you and me. That's right, if you know popular programming languages and can create an interesting plugin - both the company and the entire Figma community would be happy to see your product!

{{spacer-64}}

{{setproduct-gpt}}

{{spacer-64}}

Cons

Although Figma in our opinion outruns Sketch in many aspects, Sketch still wins in the area of plugins. The main reason is that the plugins of Figma in the current state do not allow sending back the changed data to the system in real-time mode. This limitation is significant right now and makes Figma plugins weaker than Sketch plugins.

{{spacer-64}}

<span class="blog_subtitle-caps">LET'S GET STARTED</span>

‍Top 16 Figma plugins appreciated by Setproduct team

We've collected the tools that help us improve our workflow, boost a productivity and just add some joy to the design process. We'll start from the last place, so make sure you don't miss all the fun ☕

{{spacer-64}}

<span class="blog_subtitle-caps">16 / 16</span>

Coda for Figma

‍Coda for Figma is a plugin that works with a document generation tool called Coda. Thanks to this plugin, you can fill your layouts with data from services such as Spotify, Wikipedia, Dropbox, Gmail, Google Calendar, Jira, Shopify, Github, etc.

This plugin is relatively new, but is gaining widespread popularity in the community.

{{spacer-64}}

<span class="blog_subtitle-caps">15 / 16</span>

LilGrid

‍LilGrid is a plugin that will clean up your interface. It takes all the disordered elements in the system and organises them in the form of a grid that you define yourself.

It is especially useful in cases where you need to organise a large number of buttons or icons in your design system.

LilGrid does not change the elements of your design, but only arranges their location on the canvas.

{{spacer-64}}

<span class="blog_subtitle-caps">14 / 16</span>

Table Paste

This plugin will be very useful for those who need to transfer data from Excel spreadsheets to stylised tables created in Figma.

You create a table row in Figma with a text field for each cell, and then make a component out of it. Next, you create a table from these rows, and select the table rows to which you want to apply data.

After that, in Excel you need to select the data and copy it to the Figma table. Voila, your Excel table is now stylised in Figma.

{{spacer-64}}

<span class="blog_subtitle-caps">13 / 16</span>

Design System Organizer

If you are working on a design system, you probably have components and styles which names are organised something like this: "Buttons / Small / States / Default".‍

This plugin helps to organise such elements in a convenient user-friendly interface. It allows you to group components, ungroup them, move, rename grouped components.

When you rename a group, the name will be changed for all components or styles in this group. And you don't even need to use search and replace tools for this.

{{spacer-64}}

<span class="blog_subtitle-caps">12 / 16</span>

Movie Posters

‍A great plugin from the creators of Must App. Super useful for those who want to create an application or website dedicated to movies and TV shows.

The main function of the plugin is that it randomly fills any vector object you created with an image or a poster from a movie or TV show.

{{spacer-64}}

<span class="blog_subtitle-caps">11 / 16</span>

Dot Grid

‍This plugin is for those who like to work with grids. Add some attraction to your grids in Figma with Dot Grid.

It is pretty configurable - you can play around with such parameters as width, height, size, gap and color.

{{spacer-64}}

<span class="blog_subtitle-caps">10 / 16</span>

GiffyCanvas

It's simple - you can create GIF images without leaving Figma. Install the plugin, select the images that you want to create a GIF with, set the file parameters (interval, width, height) and after previewing, you can download the file.

{{spacer-64}}

<span class="blog_subtitle-caps">9 / 16</span>

BeatFlyer Lite

Wonderful tool! Originally developed as a third-party application, it now has its own analog in Figma. This cool plugin allows you to animate and add impressive effects to your designs with just a few clicks.

Thanks to BeatFlyer Lite, your designs will always stand out among the others.

{{spacer-64}}

<span class="blog_subtitle-caps">8 / 16</span>

Color Kit

‍This plugin will help you generate light and dark shades of the color that you need. It is useful when you need to create color gradations.

And if you are familiar with Eva Design System – a third-party app that generates colors, you will be pleased to have Color Kit in Figma, since it does a similar operation, but you don't need to leave Figma.

{{spacer-64}}

<span class="blog_subtitle-caps">7 / 16</span>

Material Palette

‍This plugin was created for Material Design fans, who like making Material palettes. Now saving your time, you can create palettes in the user interface according to the material approach.

There are 3 types of palettes available for you: Material, Monochrome and True monochrome. We hope in the very next update Google will refresh this palette, because some colors contain huge gaps and require balancing.

{{spacer-64}}

<span class="blog_subtitle-caps">6 / 16</span>

Wire Box

‍Pretty interesting plugin. If you have ready-made hi-fi solutions, you can quickly create UI mockups. But this plugin helps to convert high fidelity mockup to low fidelity wireframes, in case you want to concentrate on the UX part of the project.

{{spacer-64}}

<span class="blog_subtitle-caps">5 / 16</span>

Vector Maps

‍The Vector Maps plugin allows you to download vector maps of countries, regions, and cities into your Figma mockups.

Finding the country or region is pretty simple - you can search it by name or selecting it on a map.

Vector map will be imported into Figma as a separate frame.

{{spacer-64}}

<span class="blog_subtitle-caps">4 / 16</span>

Webgradients

‍This powerful plugin generates beautiful gradients that will help your designs look amazing.

With Webgradients, you can use the color filter to find the variations that you need (180 colors) and add gradients to your favorites. A very handy tool that will significantly save you time by giving you the right color schemes to suit your project.

{{spacer-64}}

<span class="blog_subtitle-caps">3 / 16</span>

LottieFiles

At the time of writing this article, this plugin was added to Figma's system only 5 days ago, but it immediately burst into the Top-3 of our rating, because more than 1000 users have already installed it. If this is not the indicator of the quality of plugin, what then?

With LottieFiles, your designs will come to life, adding wonderful animations that will please user's eye. Insert thousands of free Lottie animations to your mockups as GIF files or animation frames as SVG files. To see your animations in action, make sure you use 'Prototype'.

{{spacer-64}}

<span class="blog_subtitle-caps">2 / 16</span>

TinyImage Compressor

When exporting images, you can use this plugin that will compress the size of your files up to 90% better than the default export from Figma. This plugin has tons of interesting features: it supports not only compression and export of files of different sizes and formats, but also optimisation of transparent PNGs and progressive JPEGs. TinyImage Compressor remembers settings during export. When exporting multiple images, the plugin automatically exports them as a .zip folder.

It has a license - after 15 file compressions through TinyImage, you will be asked to purchase a license.

{{spacer-64}}

<span class="blog_subtitle-caps">BEST RESOURCE</span>

Design Lint

Before you hand-off your work to developers, make sure that your design files are consistent. This awesome free and open source plugin for Figma checks for discrepancies within your mockups (i.e. finds the missing styles in your projects in all layers - checking colors, fonts, effects, fills, strokes, border radius) and corrects inconsistencies. One of the cool features of the plugin is that it works dynamically, meaning that when you make corrections while working, Design Lint will automatically update according to the corrections you've made.

Great tool that helps you to be more focused on your design process, rather than on fixing errors.

{{spacer-64}}

{{stars-conclusion}}

{{spacer-64}}

Conclusion

So, as we can see, Figma becomes more and more convenient, more user-friendly and plugins are a clear evidence of it. Plugins segment is developing by leaps and bounds and we can be sure that in 2020 Figma's user experience will continue to improve.

Setproduct chose LottieFiles, TinyImage Compressor and Design Lint as the leaders in Plugins segment for January – February, because these tools are super popular within the Figma community from the beginning of 2020, people use them a lot and they will definitely continue to gain the quantity of installs.

That's it for now. Make sure to go to Setproduct.com for great Figma designs systems and other templates. More awesome content to come. So stay tuned!

Recommended Figma posts

Figma plugins review — Best 16 underrated plugins to speed up design workflow at the beginning of 2020

We’ve collected the tools that help us improve our workflow, boost our productivity and just add some joy to the design process. We’ll start from the last place, so make sure you don’t miss all the fun

Free Figma resources — Best 15 templates of design systems, applications, icons and more

Templates from the Figma community to save your time, boost a productivity and cut costs for a product design

Top 14 Figma plugins for fixing styles, manage grid, auto-layout, run tracking and more

Plugins reviewed: AutoGrid - grid support for auto-layout. Tracking – plugin for creating tracking annotations. Find and Replace Colors – organizing color styles in design. Spacing Manager – plugin for consistent spacings in components. Geometric – creating math shapes and curves and more

Best 20 free Figma templates for your Design system, Dashboard or Application

Figma freebies reviewed: Ant UX Wireframes, Avatar Illustration System. Brainstorming Design System & Brainstorming Table System. Bright Kit - a kit to rapidly design the landing pages. Browk UI Kit - a design system that keeps updating every week

Top 15 Figma resources: UI kit, design system, components, illustrations

Handpicked collection of the newest templates for Figma: UI kits, UX tools, design systems, icons, illustrations and more