Figma has been a blessing for designers. But, if you are new to Figma. Let start by saying that Figma is a web-based app however there’s are some desktop apps you can also use. But this app is used for graphics editing and User Interface (UI) design.
First of all, it serves us with some amazing Figma plugins to use. And everyone in the community can create a plugin. These Figma plugins are surely here to make your design workflow quicker. While also they are here to help you build designs with outstanding UI and amazing experiences.
Absolutely, Figma is the most popular design app choice for designers. Most significantly, one thing that makes Figma plugins stand out. Is their ease of use. These plugins help you make effective designs, and your productivity is faster than before.
Plus, most of the Figma plugins in this post and the community are available for free. All you’ll have to do is install the plugin. Here, take a look at some of the best Figma plugins you must try in 2022.
1. Batch Styler
Do you want to change the values of multiple styles (text, colour) at the same time, but don’t want to go through the process of changing each text style separately? The
Batch Styler lets you do just that! It’s possible to change from Inter to Roboto regardless of 2 or 30 text styles. But keep all font weights and different styles!
Changing colours based on the same tint value is also easy. The batch styler updates all styles accordingly.
2. Content Reel
Content Reel was created by Microsoft and Eugene Gavriloff and allows you to design layouts more efficiently by pulling text strings, images, and icons from one palette. It makes collaboration easier by letting you create your own text and image content with the option to browse or search content to find published collections of text strings, images, and icons.
3. Figmotion
Figmotion is an animation tool built right in Figma. This makes the entry into animation easier and more convenient as there is no need to switch to a completely separate motion tool such as Principle, Haiku or After Effects. Figmotion makes the animation hand-off to developers more manageable as well as it is built with web technologies in mind.
4. Blush
Blush allows you to create and customise illustrations right in your Figma designs. It’s simple to use. All you have to do is pick a collection, them select the composition and drag it to the canvas.
You can customise it with the variations that come with the illustration to discover what’s perfect for your brand. Or simply use the random button to shuffle various components into a composition. It allows you to access brilliant illustrations created by artists from around the world.
5. Palette
With the Palette plugin it creates the perfect colour palette. The plugin powered by Colormind. It uses AI and machine learning to create your colour palettes based on your design. It automatically detects the shapes you’ve used in your design and uses their fill colour but up to a maximum of five. Or uses an image file to generate a new colour palette.
All palettes are generated automatically. And are very flexible. You can lock specific colour while generating new ones or re-arrange the order of the colour. So, once you’ve find a palette you like, just click the checkmark. Then the plugin will automatically adds shapes filled with the colour to the page.
6. RemoveBG
RemoveBG is one of the best Figma plugins of all time. You as a designer had to remove a background from an image. So, with the RemoveBG Figma plugin, you can automatically remove backgrounds without leaving the Figma workspace.
It’s uses remove.bg API to remove the backgrounds from pictures. To use this plugin you will need to have a remove.bg account.
7. uiGradients
uiGradients helps you add gradients to any frames, text, and groups you have all in a single click. All you’ll have to do is select the element you want to apply a gradient to, then and run the plugin. There are well-over 350 gradients to choose from.
8. Mockuuups Studio
This plugin is a super easy mockup generator that has well over 1300 various scenes. The plugin is packed with everything. You need to create product mockups, outstanding marketing materials, and visual content for social media or blog posts.
As it’s a super easy plugin to use, just select a frame, and Mockuuups Studio takes care of the rest. It automatically inserts & scales the selected frame into hundreds of previews. Once you’ve found your favourite and export the mockup as a file or place it back into the document.
9. CSSGen
Another Figma plugin by Microsoft but with Ori Ziv this time. It’s a plugin where you generate Sass or Less code from your local Figma styles. CSSGen reads all used styles in a Figma document. And lets you export them into Sass or Less.
10. Assistant
A plugin that generate usable and readable code for production instantly. The Assistant plugin gives instant feedback on your design with working code. It shows you an executable and responsive preview. This plugin is an open-source project.
11. Chart
The Chart plugin for Figma uses real or random data to create the charts. It supports copy-paste from editors like Excel, Numbers, Google Sheets. Including live connection with Google Sheets and remote JSON (REST API), local CSV and JSON files
12. Design System Organiser
Bulk swap instances and styles between masters with the same name. Copy styles between files. Manage paths like “toolbar/nav/back” using folder-like interface.
13. Contrast
The Contrast plugin makes it easy to check the contrast ratios of colours as you work. Just select a layer. Then this plugin will immediately look for the colour directly behind your selection and serve up the contrast ratio along with passing and failing levels from the Web Content Accessibility Guidelines (WCAG).
But, if Contrast cannot find the background colour, add another layer to your selection, and Contrast will compare them both.
14. Photos
Photos is a figma plugin that lets you search and insert photos into your Figma files from either Unsplash, Google, Flickr, Pixabay, Pexels, Giphy, and lastly Tenor. The Photos plugin lets you find GIFs for your design project with a simple process.
You can also select multiple photos at once and place them on the page or insert them in layers. It’s supported in both Figma and FigJam.
15. Typescale
A Figma plugin that quickly generate a modular scale for your typography. Within a couple of clicks you can transform a single line of text into a harmonious typographic scale. It’s based on your choice of ratio.
16. Supa – Figma to Video
Figma To Video allows you to turn your Figma designs into animated videos. The plugin is powered by SUPA video editor that helps to fine-tune the animations and the order in which elements appear.
17. ItemFlow
With ItemFlow you can experience improvements with your Wireframing, storyboarding and brainstorming sessions. It helps you connect items on a screen while optimising your workflow speed and performance.
18. Writer for Figma
The Writer for Figma plugin is here to help you create error-free content in your beautiful designs. The plugin uses AI to check for spelling, grammar, readability, and punctuation errors. But, also it has stats like reading time, word count, and sentence length.
With this Figma plugin. You can ensure that your content is clear, consistent, and error-free. However to use this plugin you will need to have a Writer subscription to sign in.
19. UI Faces
UI Faces, aggregates thousands of avatars which you can carefully filter. To create your perfect personas. Or just generate random avatars. The avatars are aggregated from various sources and inside this plugin you can filter by age, gender, emotion, etc.
20. Bootstrap Icons
With Bootstrap Icons. You can add icons from the Bootstrap icon library directly as SVG in your Figma projects. It features a list of over 1400 icons and it’s open-sourced. So you can download, use, and extend it for free.