Top 14 Figma latest plugins for a productivity boost while you staying at home

Manage grid, spacings, create annotations, organise color styles, draw math shapes, spellcheck in Figma and more.

Resources

Published on

April 1, 2020

|

2 mins read

Blog

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

Navigation

Subscribe to newsletter

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

By subscribing you agree to with our Privacy Policy.

Share this post

Jamshed Kasimov

Hey everyone!

We hope you're staying well during this time of crisis. The spread of COVID-19 has hit the world, and many of us are now working entirely remotely. Working at home and staying productive is may be difficult for someone, but we must all remain professionals and support a community.

In general, it's nice to see people getting together, collaborating and helping each other at these unprecedented times. We do not stand aside, because the main idea of Figma is collaboration.

Taking into account the fact that the first publication «Best 16 underrated plugins for Figma» was met very positively by the community, we are pleased to continue the useful research, save you time to explore new plugins and give you handpicked gems for Figma, which will help you in your work, preserve your productivity and ability to create.

{{spacer-64}}

Today is on our radar

· AutoGrid - grid manage for AutoLayout
· Batch Styler – edit multiple text styles at once
· Filter – retouch your images in Figma
· Find and Replace Colors – organising color styles
· Flipbook – animating Figma designs
· Focus CSS - better use of CSS in Figma
· Geometric – creating math shapes and curves
· Halftones – dotted or halftone effect
· Spacing Manager – consistent spacings in components
· Spell Inspector - finding spelling errors
· Sitemap – create maps of your website
· Style Organizer - display and organise color styles
· SwiftUI Inspector – enhance the devs workflow for iOS apps
· Tracking – create tracking annotations

{{spacer-64}}

{{setproduct-gpt}}

{{spacer-64}}

Before we start

The most essential thing for us right now is to stay positive, because there is no doubt that soon the pandemic will end 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 environment, we do not give up hope that the design sector will be affected by the crisis to the least extent, although many designers are now experiencing a decline in business activity. However, many companies are now leaving to work on a remote basis, and we believe that this is a good time for Figma and other productivity tools, to increase their importance for projects and market demand.

Now let's dive into the plugins!

As always, we are starting from the last place, so all the fun is down below

{{spacer-64}}

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

Sitemap

https://www.figma.com/community/plugin/818613147082270958/Sitemap

If you need to make a map of your website – this plugin will help you with this task.

The functionality of the Sitemap plugin is pretty simple: type or paste your website URL, click on "Create Map". The plugin will display all the links that it will find from the HTML source.

{{spacer-64}}

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

Halftones

https://www.figma.com/community/plugin/818097713452519609/Halftones

With Halftones you can apply cool dotted and halftone effect filters to your images.

Just simply select 1 or several images, choose what type of filter you want to apply (dots or halftone effect). Then using the sliders define the angle and pattern size, click on "Apply" and voila – your image looks more trendy now.

{{spacer-64}}

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

Flipbook

https://www.figma.com/community/plugin/823077195186711433/Flipbook

Let's add some fun to our rating! Here comes the Flipbook. A plugin to animate your Figma designs. It has lots of features, including live preview, speed changing, adjusting the animation speed with a slider, as well as reversed animation and exporting to GIF.

There is also a Pro version of this plugin. It has such features as: the absence of watermark and onion skin (which is basically the function of displaying the frame skin to inspect your animation).

{{spacer-64}}

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

Spell Inspector

Ever needed a tool that could help you to find spelling errors without going out of Figma? Well, Spell Inspector is here to check for grammar mistakes.

Spell Inspector uses a special SpellCheck API. For now, the dictionary consists of 40,000 words. Spell Inspector checks the page where you want to find the spelling errors and gives you the list of appropriate suggestions. We hope that in the future the creators of this plugin will add more languages and extend the dictionary.

{{spacer-64}}

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

Focus CSS

https://www.figma.com/community/plugin/811977401825396882/Focus-CSS

This plugin will make your CSS experience while working in Figma better and will detect inconsistent styles.

The features include:

  1. CSS generation for all elements in the entire Figma file;
  2. The possibility to hide those CSS properties that you don't want to copy into the code.
  3. Also there is the filtering feature, which will help you to display only those types of CSS layers that you need.

{{spacer-64}}

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

Tracking

https://www.figma.com/community/plugin/815605811994993448/Tracking

Thanks to this plugin, you have a possibility to create, update or attach tracking annotations straight from Figma file.

It allows telling the developers what exactly you'd like to track, as well as making sure you track the right things from the bird's eye view. Also, the plugin has a "status" feature, so you'll know if tracking has been implemented.

To see how to use the plugin, you can watch the tutorial here: http://bit.ly/TrackingTutorial

{{spacer-64}}

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

Filter

https://www.figma.com/community/plugin/792025380269016893/Filter

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

With Filter you will boost your creativity and speed up your workflow. Having this plugin in your Figma arsenal, you might want to stay in Figma and not go out to use Photoshop, because Filter gives you great control of adjusting the images or nodes.

Right now there are more than 30 filters at your disposal, that include: Bulge Pinch, Color Halftone, Cartoon, Triangle Blur, Denoise, Lens Blur, Night Vision, Crosshatch and lots more.

{{spacer-64}}

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

SwiftUI Inspector

https://www.figma.com/community/plugin/784879032180068427/SwiftUI-Inspector

If you are working with Swift and looking for the tool that would help you transfer element styles from Figma to Xcode, then stop searching, because SwiftUI inspector will solve your problem. Thanks to this awesome plugin you can export your designs into SwiftUI code.

Supported features include colors, text labels, basic shapes. The author of the plugin promised to add components, vectors and drop shadows in the future.

{{spacer-64}}

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

Geometric

Add some math greatness to your designs with this wonderful plugin. Thanks to the power of Geometric, creating complex shapes is now easy. At your disposal such shapes as Polar Rose, Polygons, Spirals of different types, Super Ellipse, Astroid, Trigonometric functions. You can modify them with different parameters. And as the creator of the plugin claims: there will be more interesting math shapes in the near future

{{spacer-64}}

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

Spacing Manager

https://www.figma.com/community/plugin/809099681305129697/Spacing-Manager

A lot of designers made different spacings between the elements while designing something. Some elements had 10px spacing, others – 14px, etc. Later on, they had to change every element manually. With the help of AutoLayout, this problem was solved. However, with this plugin you can enhance the spacing experience even more. You can use ready-made spacers from the public library and place them between the elements. Having done that, the spacings between your components will be consistent.

How to use the plugin: Add the library to Figma. Or you can have your own elements that have the word "$spacing" in the naming. In case you want to hide the spacings, select a parent frame and run the Spacing Manager. Plugin will find the spacers that were used on the element and will set the opacity value to be 0%.

{{spacer-64}}

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

Find & Replace colors

https://www.figma.com/community/plugin/806266638862897503/Find-and-Replace-Colors

Ever experienced the situations when you need to import an unorganized design from the Sketch application? Or your colleague sends you the template that doesn't have Figma color styles? Yes, these types of things happen from time to time. Well, with this plugin you can easily find all colors and replace them on whatever colors you need.

The plugin is available for working on any type of file, be it a component, instance, rectangle, frame, vector object or text.

The plugin is easy to use: just install it, run it. Next, click on the input field next to the corresponding color and enter the new color value.

After that, you can begin the process of replacing all matches by clicking the "Replace Colors" button.

{{spacer-64}}

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

Batch Styler

https://www.figma.com/community/plugin/818203235789864127/Batch-Styler

Batch Styler is a great solution for the situations when there are lots of text styles and you need to change the font of those text styles with ease.

It doesn't matter how many text styles or fonts you need to change, Batch Styler will take care of things and will keep all font weights and other styles.

{{spacer-64}}

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

Style Organizer

https://www.figma.com/community/plugin/816627069580757929/Style-Organizer

This plugin helps to display and organise the color styles on the page. Also, having styles organised, this tool will automatically generate a color palette.

Features that are ignored in this plugin: Fill/stroke images, invisible padding layers / invisible nodes.

Also, be informed that Style Organizer doesn't support the auto-update function when you make changes in your designs. You need to click the "Update" button manually after you've done changes.

{{spacer-64}}

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

AutoGrid

https://www.figma.com/community/plugin/817474150404549708/AutoGrid

You probably faced a situation where you have to create multiple AutoLayout layers just to ensure that the cards in your layout are in a neat state?

This plugin is a wonderful 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 deal with everything else.

Using the plugin is pretty simple:

  1. Select the root element for your grid (for example, one card)
  2. Define the grid structure: how many rows, columns and padding.
  3. Click "Create a new grid".

The AutoGrid clones your root element so that it fills the newly created grid.

Also the plugin has an Auto-Update function. With this feature you won't have to manually update your grid any time your structure changes.

{{spacer-64}}

{{stars-conclusion}}

{{spacer-64}}

Conclusion

We chose AutoGrid, Style Organizer & Batch Styler as the leaders in today's rating, because they are very useful and they boost design processes, especially when it comes to creating the design systems.

We hope that this set of plugins has been helpful for you. As always, make sure to go to our store for awesome Figma design systems and templates. We'll keep you updated. Stay tuned and #stayhome!

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

Share this post

Subscribe to Setproduct

Once per week we send a newsletter with new releases, freebies and blog publications
Oops! Something went wrong while submitting the form.

By clicking Sign Up you're confirming that you agree with our Terms and Conditions.

Congratulations!

You're in! Expect awesome updates in your inbox

FAQs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
No items found.

Our Dashboard Templates Will Make It A Treat To View Data

Experience the magic of data visualization with our user-friendly dashboard templates. Try out our dashboards now and enjoy efficient reporting processes, greater transparency in, among others monitoring and making educated decisions easily.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Panda Design System

Figma library with dashboard, calendar, kanban, profile, table, ecommerce and 80+ templates in total. Components with variants, dark theme included.

Eclipse UI kit

Figma library with 1100+ components & 74 templates for data-driven web applications. Powered by auto-layout. Supercharged by Figma's variants.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Neolex Dashboard UI kit

Customizable & adjustable dashboard design system with 50+ ready-to-use app layouts, 1900+ variants for 30 components with auto-layout.

Material Desktop Dashboard UI kit

Figma library with 48+ dashboard templates based on reusable desktop app patterns carefully handpicked from the most popular web apps.

Xela UI kit for Figma

Figma library with 1900+ variants of 30 components categories to craft perfectly shaped desktop & mobile apps. Customizable & Adjustable dashboard design system with 50+ web app templates.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

OE Figma Design System

Customizable and well-organized Figma library. This design system aimed to build highly loaded interfaces, boost the speed and save more costs.

Related posts

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Resources

8 min read

Types of Dashboards. Main Categories

Unlock the power of data-driven decision-making with our comprehensive guide to different types of dashboards. Learn about operational, analytical, and strategic dashboards, and discover how they can drive business success.

Resources

2 mins read

Black Friday 2023: Unbeatable Deals on Figma Templates for Designers!

Maximize your Black Friday savings with exclusive deals on Figma assets for a more streamlined design workflow. Give your designs the competitive edge they deserve.

Resources

3 mins read

Best 20 design resources for startups, developers and designers

Explore a diverse collection of cool icons, powerful UI kits, and tools, along with a fascinating history of user interfaces on today's list.

Figma Templates & UI kits

Save time and human resources by reusing hundreds of pre-made templates crafted by us. Based on top notch UX taken from the World's best apps.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Panda Design System

Figma library with dashboard, calendar, kanban, profile, table, ecommerce and 80+ templates in total. Components with variants, dark theme included.

Eclipse UI kit

Figma library with 1100+ components & 74 templates for data-driven web applications. Powered by auto-layout. Supercharged by Figma's variants.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Neolex Dashboard UI kit

Customizable & adjustable dashboard design system with 50+ ready-to-use app layouts, 1900+ variants for 30 components with auto-layout.

Material Desktop Dashboard UI kit

Figma library with 48+ dashboard templates based on reusable desktop app patterns carefully handpicked from the most popular web apps.

Xela UI kit for Figma

Figma library with 1900+ variants of 30 components categories to craft perfectly shaped desktop & mobile apps. Customizable & Adjustable dashboard design system with 50+ web app templates.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

OE Figma Design System

Customizable and well-organized Figma library. This design system aimed to build highly loaded interfaces, boost the speed and save more costs.

Figma iOS kit

Figma library of iOS patterns served as ready-made templates. This UI kit inspired by World's best apps. Based on Human Interface guidelines.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

Most iOS UI kit for Figma

iOS native components and app templates organized into a «Most Design System» fully compatible with Apple's Human Interface guidelines.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Nucleus UI

Nucleus UI contains 1000 components and variants with 500+ mobile screens designed for Figma (including 9 themes from Event, E-commerce, Finance, NFT, etc.).

Figma Android UI kit

Components-driven Android mobile UI library for Figma. Consists of 140 high quality application templates made of total 250+ UI components.

Mobile X UI kit

Customizable & adjustable iOS / Android design system loaded with ready-made 157 app templates based on 860+ variants for 20 components.

Appka iOS UI kit

Customizable & adjustable iOS design system with 4100+ variants for 28 components and 280+ ready-to-use app layouts crafted for Figma.

Full iOS UI kit

Customizable iOS design system with 320 ready-to-use app layouts. You can modify them or use as it is to save time and never design from scratch again.

Xela for Flutter

XelaUI for Flutter is a simple, modular and accessible component library that gives you the building Flutter apps for mobile and desktop.

Xela for Android

Ready-made collection of fully customizable widgets, UI screens and reusable components for Android coded with Jetpack Compose.

Xela for Swift

Designed for iOS Developers. We provide fully coded customizable components, widgets and well-organized iOS screens for Figma & SwiftUI.

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma Charts UI kit

Components-driven graphs design kit for dashboards, presentations, infographics & data visualisation. Includes 25+ charts types for all the viewports.

Hyper Charts

Create impressive visuals with Figma's graphs templates – dozens of scalable and customizable data visualization blocks for dark and light modes.

Orion UI kit

Figma library with 40+ full-width charts templates served in light & dark themes. Contains 200+ of dataviz widgets that look perfect on desktop & mobile screens.

Xela for React

React based components library for beautiful user interface in React apps. Lightweight library for your projects. Contains pre-made web app templates.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Xela for Flutter

XelaUI for Flutter is a simple, modular and accessible component library that gives you the building Flutter apps for mobile and desktop.

Xela for Android

Ready-made collection of fully customizable widgets, UI screens and reusable components for Android coded with Jetpack Compose.

Xela for Swift

Designed for iOS Developers. We provide fully coded customizable components, widgets and well-organized iOS screens for Figma & SwiftUI.

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Xela for React

React based components library for beautiful user interface in React apps. Lightweight library for your projects. Contains pre-made web app templates.

Levitate 3D kit for Figma

Components-driven 3D kit to design eye-catching Figma presentations. Helps to enhance your landing page, product or app, brand ident, etc.

Website templates UI kit

Landing pages reusable templates kit based on most effective web design patterns. 140+ dark & light constrained design blocks.

Figma Landing Pages UI kit

Landing pages templates library based on constrained & organized components aimed to speed-up the production of effective websites.

Zeus UI kit

Create hassle-free landing pages in Figma. This kit is based on 10 landing page templates, powered by 1600+ variants for 630+ web blocks.

Research, copy and ideate with SetGPT!

We've launched the alternative ChatGPT clone dedicated to UI designers, UX researchers, writers and indiehackers.

Powered by the latest OpenAI gtp-3.5-turbo model, this free chatbot is the perfect tool for those in need of intelligent and innovative insights, wrapped with a slick UI and sophisticated user experience.

Start now

SetGPT is a free service; however, authentication is required

This is some text inside of a div block.
This is some text inside of a div block.