📍 🚡 🤾🏾 Review of 14 fresh plugins for Figma that will help increase productivity while we all 👨🏿‍🤝‍👨🏻 🚆 ❕

Today we will talk about the following new Figma plugins:

AutoGrid - Grid support for AutoLayout.
Tracking - Plugin for creating tracking annotations.
Find and Replace Colors - Organize color styles in your designs
Spacing Manager - Plugin for consistent indentation in components
Geometric –
Halftones – ,
Batch Styler –
Spell Inspector —
Sitemap –
Style Organizer —
Focus CSS — CSS Figma
Flipbook – Figma
SwiftUI Inspector – Apple
Filter –

Hello everyone! We hope that during this crisis time you are all well.

The proliferation of COVID-19 has had an impact on the whole world, and many of us have now completely switched to remote work. It was difficult for many to be at home with children and stay productive, but we all must remain professionals and support our community.

It's nice to see how people get together, collaborate and help each other in these unprecedented times. We also do not stand aside, because the main idea of Figma is cooperation. Whereas the first issuewas welcomed by the Figma community very positively, we are happy to continue the useful work, save your time on learning new plugins and provide you with selected plugins for Figma that will help you in your work and preserve your productivity and creativity.

Friends, before we start talking about plugins, we would like to say that the most important thing for us now is to remain positive, because there is no doubt that the pandemic will end soon and everything will return to normal. For all the people of the world this is a new experience, as for us - designers, and this is reflected in our work.

Despite the difficult economic situation, we do not give up hope that the design sector will be affected least by the crisis, although some designers are already complaining about a decrease in business activity. Nevertheless, many companies today go to remote work, and we believe that this is a good time for Figma and other tools to increase productivity, increase their importance for projects and market demand.

Well, now let's dive into the analysis of plugins! We start from the last place - all the most interesting is waiting for you below.

14. Sitemap

If you need to make a map of your site - this plugin will help you with this task.
The functionality of the Sitemap plugin is quite simple: enter or paste the URL of your site, click "Create Map". The plugin will display all the links that it finds from the HTML source.

13. Halftones

With the help of Halftones, you can apply cool dot and halftone filters to your images.

Just select 1 or more images, select the type of filter you want to apply (dots or halftone effect). Then, using the sliders, determine the angle and size of the picture, click "Apply" and voila - your image has become more trendy.

12. Flipbook

Dilute our rating with a small portion of fun through the Flipbook plugin! This is a plugin for animating your design in Figma. It has many features, including real-time preview, speed change, animation speed adjustment using the slider, as well as reverse animation and export to GIF.

There is also a Pro version of this plugin. It does not have a watermark, and also has an onion skin function (onion peel, i.e. the function of displaying the frame cover to check your animation).

11. Spell Inspector

Have you ever needed a tool that would find spelling errors for you inside the Figure? Well, the Spell Inspector plugin will help you with this.

Spell Inspector uses the special SpellCheck API. At the moment, the dictionary consists of 40,000 words. Spell Inspector checks the page on which you want to find spelling errors, and gives a list of relevant sentences. We hope that in the future the creators of this plugin will add more languages and expand the dictionary.

Subscribe to my Telegram channel "Useful for the designer", there will be announcements of the following parts and many other useful design resources. I constantly keep abreast and follow the release of new useful resources, tools and applications that help designers, developers and team managers accelerate.

10. Focus CSS

This plugin will improve the process of working with CSS in Figma and detect inconsistent styles.

Plugin Features:

CSS generation for all elements throughout the Figma document;
The ability to hide those CSS properties that you do not want to copy to the code.
There is also a filtering function that helps you display only the types of CSS layers you need.

9. Tracking

With this plugin, you have the ability to create, update, or attach tracking annotations directly from the Figma file.

Through Tracking, you can explain to developers what exactly you want to track, and also make sure that you track the items you need from a bird's eye view. In addition, the plugin has a “status” function, so you will know whether tracking has been carried out or not.

To better understand how to use the plugin, you can see the manual here .

8. Filter

Despite the fact that this plugin was released last month, it is constantly updated, and the author adds more and more interesting filters there. That's why we decided to add this wonderful plugin to our list.

With Filter, you can increase your creativity and speed up your workflow. Having this plugin in your Figma arsenal, you no longer need to exit Figma in order to use Photoshop, because Filter gives you excellent control over the settings of images or nodes.

At the moment, you have more than 30 filters at your disposal, including: Bulge Pinch, Color Halftone, Cartoon, Triangle Blur, Denoise, Lens Blur, Night Vision, Crosshatch and many other filters.

7. SwiftUI Inspector

Working with Swift and looking for a tool to help you transfer element styles from Figma to Xcode? You can stop your search, because SwiftUI Inspector will solve this problem. With this cool plugin, you can export the styles of your design elements to SwiftUI code.

Supported features include: colors, text labels, basic shapes. The author of the plugin promises to add support for elements such as components, vectors and shadows in the near future.

6. Geometric

Add some mathematical beauty to your projects with this great plugin. Thanks to Geometric, creating complex shapes is now easier than ever. At your disposal are such figures as Rose, Polygons, Spirals of various types, Superellips, Astroid, Trigonometric functions. You can change them using various parameters. And according to the creator of the plugin, in the near future there will be even more interesting mathematical figures.

5. Spacing Manager

Many designers have come across the practice of applying different indents between elements. Some elements were indented 10px, others - 14px, etc. Later, if you needed to make indentation changes, they had to change each element manually. AutoLayout resolved this issue. However, with the Spacing Manager plugin, you can further improve your indentation process.

4. Find and Replace Colors

Have you ever had situations when you import an unorganized design from Sketch? Or does your colleague send you a Figma template without color styles? With this plugin, you can easily find all the colors in the file and replace them with the ones you need.

The plugin is available for working with any type of file, be it components, instances, rectangles, frames, vector objects or texts.

The plugin is easy to use: install it and run it. Then click on the input field next to the corresponding color and enter a new color value. After that, you can start the process of replacing all matches by clicking on the “Replace colors” button.

3. Batch Styler

Batch Styler is a great solution for situations where there are many text styles, and you need to change the fonts of these text styles quickly and without unnecessary actions.

No matter how many text styles or fonts you need to change, Batch Styler will take care of everything and save all types of font thickness and other styles.

2. Style Organizer

This plugin helps to display and organize color styles on the page. Also, having organized styles, this tool will automatically generate a color palette.
What is ignored in this plugin: fill / stroke of images, invisible indentation of layers / invisible nodes.

Also keep in mind that Style Organizer does not support the automatic update feature when making design changes. You will need to click the Refresh button after making the changes.

1. AutoGrid

Perhaps you are faced with a situation where you need to create several AutoLayout layers to make sure that the cards in your layout are in a neat condition?

This plugin is a great solution. AutoGrid takes care of everything related to the grid. All you have to do is define the columns, rows and indents, and AutoGrid will do the rest.

The plugin is pretty easy to use:

Select the root element for your grid (for example, one card)
Define the grid structure: how many rows, columns, and indents.
Click Create New Grid.

AutoGrid will create a clone of your root element so that it fills the newly created grid.
The plugin also has an auto-update function. With this feature, you will not need to manually update your grid every time your structure changes.

We choose AutoGrid , Style Organizer and Batch Styler as leaders in today's rating, because these plugins are very useful and speed up design processes, especially when it comes to creating design systems.

We hope this set of plugins has been useful to you. If you need professional Figma design systems and templates, check out Setproduct.com. Well, for our part, we will keep you updated on everything new. Stay with us and # stay home!