Become an affiliate and earn up to 35%
You can participate in Setproduct partnership program and earn up to 35% from every sale you made. We provide promo materials and detailed instructions how to boost the conversion
We used to reply ASAP
iOS & Android custom development
We'll take our iOS & Android Figma libraries, adjust with custom styles, create custom templates and turn the system into production-ready Flutter application
How to reach you out?
Preferred mobile platforms
Your budget
URL (optional)
We used to reply ASAP
Material Design custom development
We'll take our Material & Dashboard Figma libraries, adjust with your brand guidelines, create all the additional necessary layouts, and turn the system into responsive web application based on React, Angular, Vue or etc.
How to reach you out?
Type of job
Your development budget
URL (optional)
We used to reply ASAP
Hire Setproduct professionals for your project
We'll take any of our Figma design systems, adjust with your brand guidelines, create all the additional custom templates, and code a web application based on React, Angular, Vue or etc.
How to reach you out?
Type of job
Select design system
Whats your approximate budget?
URL (optional)
We used to reply ASAP
Custom design job based on our Figma systems
We'll take any of our templates to adjust with your guidelines, create all the additional necessary layouts based on your wireframes, existing UI kit or live application
How to reach you out?
Choose pricing plan
Pick a design system
URL (optional)
We used to reply ASAP
New product⚡ Ocean Enterprise design system for Figma
Close

Top 16 underrated Figma plugins to boost ⏱ design systems development

Carefully handpicked plugins to accelerate managing, ordering and labeling design system components

February 2020 · 9 mins to read

by Jamshed Kasimov

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.
Plugins provide simple and intuitive ways to increase your capabilities in Figma. They help optimize 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!

Pros

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.

Cons

LET'S GET STARTED
Top 16 Figma plugins appreciated by Setproduct team
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 ☕
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.

16 / 16

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

It is especially useful in cases where you need to organize 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.

15 / 16

This plugin will be very useful for those who need to transfer data from Excel spreadsheets to stylized 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 stylized in Figma.

14 / 16

Most iOS 13 design system for Figma

iOS native components and app templates organized into a Most comprehensive design system fully compatible with Human Interface guidelines. It's named, constrained and based on native iOS apps experience.

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

This plugin helps to organize 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.

13 / 16

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.

12 / 16

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.

11 / 16

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.

10 / 16

Dashboard UI kit Material Desktop

Figma dashboard UI kit which based on reusable dashboard patterns carefully handpicked from the most successful apps. It contains scalable and constrained components, dark and light templates and properly organized.

Presentation · Templates · Pricing · Preview
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.

9 / 16

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.

8 / 16

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.

7 / 16

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.

6 / 16

Figma Material Design system

Material design library for Figma is based on 100% guidelines compliance and contains an impressive amount of scalable and constrained components to accelerate the application development in both of light & dark UI.

Presentation · Templates · Pricing · Preview
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.

5 / 16

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.

4 / 16

Want to have our next post delivered to you?
Setproduct newsletter with updates, ideas, inspiration and special offers — once per month
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'.

Third place

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 optimization 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.

Second!

Figma & React Design system

Figma + React components library served as all-in-one design system for design & development teams. Contains styled React components which named and designed the same way as in Figma.
Based on modified Material-UI sources.

Presentation · Docs · Pricing · Preview
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.

And the winner is...

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!

Conclusion

Related posts