Figma is an amazing design tool that helps you create the user interfaces of your dreams. Figma plugins are an essential tool in the design process, helping you create more sophisticated layouts and designs. In this article we’ll explore some of my personal favorite go-to Figma add-ons.
When using Figma to design, templates, icons, and plugins make your job easier and maximize your energy while leaving more room for creativity.
There are numerous Figma plugins available, with more being developed every day. As a designer & developer who’s familiar with the interface, finding your way around them doesn’t require expertise, as they’re typically intuitive and well-documented.
How to Install a Figma Plugin
Finding Figma plugins simply involves searching by keyword and exploring the wide range of resources on the Community page in-app, and clicking Install to add the plugin to your account.
You’ll have to refresh your design tab for newly installed plugins to appear.
Responsive Design Plugins
First off, we’ll explore some of the better Figma plugins for responsive design.
1. Anima
Anima can convert your high-fidelity Figma prototypes to developer-friendly HTML, CSS, React, and Vue. You can create a single prototype for all screen sizes using breakpoints and pins. This plugin was created by Anima and also gives you access to live, interactive prototypes, and lets you embed videos, animations, real input fields, hover effects, and custom code while working directly from Figma to save time. Access to certain features might require an Anima membership.
2. CSSGen
CSSGen, created by Microsoft and Ori Ziv, lets you generate Sass or Less code from your local Figma styles. This plugin reads all used styles in a Figma document and lets you export them into Sass or Less.
3. Responsify
With Responsify, you can quickly test your designs across multiple device sizes. You have to select any frame, component, or instance and run the Responsify plugin to see what your design looks like across several screens.
4. Makers
“From Figma to site”: Makers‘ ability to automatically publish Figma designs into a custom domain is something that would benefit the community, especially for simple projects. With this plugin, you can build landing pages, portfolios, and personal sites. In order to use this Figma plugin successfully, you have to design using their built-in components or duplicate your work if you already have a design.
5. Assistant
Assistant will generate usable and readable code for production instantly. It gives instant feedback on your design with working code, along with an executable and responsive preview. Assistant is an open-source project.
6. Breakpoints
Breakpoints lets you preview a responsive layout inside a Figma frame. It works even without the opened plugin window, and anyone in your team can resize the frame without the installed plugin. This helps you make design decisions faster and better and you can also share animated prototypes.
7. UIcode
UIcode lets you get clean code for your mobile design right inside Figma instantly. It can generate and export code for all screens at once or for each screen individually. It reduces your workload as the code requires minimal finishing touches from developers.
Plugins for Color Management
These Figma plugins improve your work’s visual appeal by making several color-related decisions on your behalf. You can create different color palettes, gradients, and a more intuitive layout, all with less time and effort than usual.
8. Color Kit
Creating analogous palettes just got easier. With Color Kit, all you have to do is input a color code, along with other values like the number of shades, and you’ll have a color palette that will comprise various shades of the color. You can generate lighter or darker shades of any color.
9. Spectrum
Spectrum, lets you build color systems, design complex vector art, and apply them to illustrations, images, and interfaces instantly. This process happens without delay — which is great news for your workflow. You can say goodbye to trial and error when it comes to colors.
10. CoShuffler
CoShuffler lets you apply an assortment of colors to a large selection of objects. So if you’re making iterations for assets (like buttons) for a project, CoShuffler does a great deal of the work for you by applying the colors to the objects using a pre-selected palette.
11. Pikaso
Sometimes the hardest part of a project is deciding which colors to begin with. We’ve all been there. Pikaso helps you decide faster and more efficiently by providing you with choices based on a single asset provided by the client. This could be a logo or a picture.
12. Dopely Colors
Dopely Colors has a wide variety of palettes, so it can be very helpful when you’re experiencing a creative block or something similar. It’s created by Dopely to help you color better and faster.
13. Chromatic Figma
With Chromatic Figma, you can use color spaces other than RGB to create good-looking and perceptually uniform gradients and color scales. The results are usually more natural-looking and aesthetically pleasing than those from the traditional RGB space.
14. Accidentally Great Gradients
“If you are feeling blue, use the blue hues”. With Accidentally Great Gradients, you can generate batches of gradients and choose from the best. Tweak the lightness and saturation, or just go all random and let the plugin choose an accidentally great gradient for your project. This plugin makes use of the HSL scale to create tons of gradients.
15. Coco
Looking for inspiration right in the middle of work? How about a plugin that lets you explore a collection of official brand color palettes, popular color selections, and the latest palette trends? Coco, by UXPlugins, lets you do all that. You can also check contrast and make sure you selected the right colors for your design with a simple workflow.
Image Asset Plugins
Next, we’ll explore some standout Figma plugins for managing image assets.
16. Photos
Photos was created to let you search and insert photos into your Figma files from Unsplash, Google, Flickr, Pixabay, Pexels, Giphy, and Tenor. The Photos plugin also 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.
17. Remove BG
You can remove picture backgrounds using the Remove BG. It uses an API that lets it recognize the main subject in a photo and erase the environment around it — like an object selection tool.
18. Image tracer
Image tracer takes whatever layers you’ve selected and combines them together into one image (regardless of whether or not they’re already a vector). Then it converts the new image to black and white and attempts to trace it into a new vector layer. It saves time by providing an alternative to manually drawing and editing vectors.
19. Palette From Image
Palette From Image lets you select an image from your computer and generate a color palette. This means that the image doesn’t have to be in your Figma file and the colors are all generated inside your application. It gives you access to the color code of each block of color in the palette (by simply tapping on it) and you don’t need to be online to generate color palettes.
Font Plugins
Let’s look at Figma plugins that make it easier to work with fonts.
20. Font Viewer
If you’re trying to choose fonts for a project, Font Viewer can speed your process up and shows the local font and web font in different tabs.
21. FontScanner
Have you ever looked at a design and wondered what fonts those are? FontScanner can find out all font families, weights, and sizes from the current page. It also shows their quantities and allows you to select based on type or font size. Apart from satisfying your curiosity, it can also serve as an analysis tool for developers.
22. Typescale
Typescale is helpful for type analysis. It generates a modular scale for your typography based on your choice of ratio. In a couple of clicks, you can transform a single line of text into a harmonious typographic scale on your artboard.
23. Change Font
Change Font lets you change the font in FigJam and Figma files using the quick actions search bar.
You can select text Layers, Connectors, Shapes with Text, Sticky Notes or Code Blocks, or select a specific piece of text, Launch Quick Actions (press command + / on macOS or Ctrl + / on Windows), write “Change Font” and press Tab, filter the list by typing the name of the font, and select the desired font by pressing enter/return
Illustration Plugins
Let’s next look at some useful Figma plugins to help you create illustrations.
24. Illustrations
This Figma plugin gives you access to free popular illustration libraries for your project. Illustrations allows you to insert high-quality illustrations into Figma by dragging and dropping.
25. HANDZ 3D Illustration
The HANDZ plugin provides a 3D illustrations library to Figma. You can use it to search for hand gesture illustrations and choose various colors and types of hand.
26. Humaaans
Humaaans illustrations library helps you create colorful, illustrated projects in Figma. You can either use the provided illustrations or mix and match illustrations to create your own unique work.
27. Artify Illustrations
With this plugin, you’ll spend less time searching and sorting and more time designing. Artify offers over 5000 illustrations in SVG and PNG formats that you can access from Figma. There are several illustration styles to choose from.
Animation Plugins
The following Figma plugins provide ways to add animation to your Figma project.
28. Figmotion
Figmotion is an animation tool built right in Figma. This means that there’s no need to switch to a completely separate motion tool such as After Effects during your process. Figmotion makes the developer’s job more manageable, and as a bonus, it’s built with web technologies in mind.
29. Figma to Video
With SUPA’s Figma to Video, you can turn your Figma designs into animated videos. The plugin is created by the SUPA Team and is powered by the SUPA video editor that helps to fine-tune the animations and the order in which elements appear.
Wireframing Plugins
Next, we’ll review some Figma plugins that allow you to rapidly create wireframes in Figma.
30. ItemFlow
Wireframing, storyboarding and brainstorming sessions can experience improvements with ItemFlow. It helps you connect items on a screen while optimizing your workflow speed and performance. This plugin is helpful for designing complex systems and their architecture.
31. ProToFlow
ProToFlow generates flow arrows for your project based on prototype interactions. You can also use custom connectors from FigJam by copying a connector from FigJam to your file and the plugin will do the heavy lifting.
32. Wire Box
Converting back to Lo-fi if something needs adjustment doesn’t have to be tedious with the Wire Box plugin. You can focus on getting the UX right instead of the UI.
Plugins for Productivity
The next Figma plugins provide options to boost your productivity.
33. Writer for Figma
Writer for Figma plugin helps you create error-free content in your designs. It uses AI to check for spelling, grammar, readability, and punctuation errors, as well as 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. Do note that you need to have a Writer subscription to sign in to the plugin.
34. CopyDoc Text Kit
The CopyDoc Text Kit plugin lets you manage all the text on your Figma design in one place. These groups of text can be easily exported, imported, localized, spell-checked, and updated.
35. Design System Organizer
The Design System Organizer plugin keeps your work organized by managing names with /s like folders. Copy styles between files. Bulk relink instances and styles to new masters with the same names. You can also organize styles and components between files and manage paths such as “components/input/outlined” through a folder-like interface with bulk renaming.
36. Rename It
The Rename It plugin helps in keeping your work organized by letting you batch rename layers and frames. You can also rename multiple layers at once, rename layer(s) with the width %W and height %H of a layer, and replace any words or characters from selected layers.
Plugins to Aid Layout Design
The following Figma plugins support layout design in your projects.
37. Grids Generator
Finding the right grid size for your artboard is easier with the Grids Generator plugin. It can help save grid templates, apply auto grids to frames, show and hide all grids in selected frames with one click, and delete and update templates.
38. Layout Handoff
With the help of this plugin, the designer and developer can see the layout of each frame and the variants of components that were used to build it. Layout Handoff is helpful for working with variants.
Accessibility Plugins
Don’t forget accessibility! These Figma plugins help ensure that your designs are accessible to all users.
39. Able
Able plugin makes your design accessible while maintaining a pleasant look and feel. With minimal effort, you can add color contrast to your designs and cater for things like color blindness. Able also compares the contrast between the two layers you select. This way, you can keep Able open, and casually select layers to compare without re-running or updating the plugin.
40. autosizetext
The autosizetext plugin will auto-size text to fit within its text box. If text is too small, it will grow to fit the bounds, or if the text is too big, it will shrink to fit the bounds. This helps automatically scale your text for legibility.
41. Stark
Stark is a suite of integrated accessibility tools for your product design. The suite includes vision simulation, contrast checker, and focus order.
42. Advanced Contrast
This plugin uses the Advanced Perceptual Contrast Algorithm (APCA) to create accessible color combinations that look good. Advanced Contrast compares colors on your design to check how contrast is really seen by humans.
43. HCL Color
The HCL color space equalizes the apparent lightness of hues and allows for more precise control over contrast.
HCL Color is helpful for projects that convey meaning with color, where using regular HSV/L may lead to seeing false patterns because hues have a different lightness and our brains find lightness more important than hue.
Email Template Plugins
Creating email templates with Figma? These Figma plugins will help with that tricky task.
44. Ampier
The Ampier plugin creates AMP and HTML email designs for your campaigns within your design environment. The code can be exported as an archive or connected to Ampier directly.
45. Emailify
With Emailify, you can design and export responsive, production-ready HTML emails from Figma without requiring any third-party apps, websites, or APIs. With features like a custom component builder, customized text, images and auto layouts, and several others, Emailify improves your workflow.
46. Marka Email Generator
Marka Email Generator exports HTML email templates from Figma. It works with prepared frames. Marka supports text objects, images, buttons, rectangles, and frames with elements.
Plugins for Creating SVGs
Adding SVG to Figma? These plugins will make your life a bit easier.
47. Blobs
Sometimes the simplest things are the best. If your design needs unique shapes for an aesthetic feel, Blobs will come in handy. It lets you create organic blob shapes with the click of a button. Every shape that’s generated is unique. You can control how unique a shape is along with how many points it has. The blobs are created in SVG.
48. Line Synthesizer
Line Synthesizer lets you create wave patterns and styles using audio style knobs. The knobs also give it a unique vintage feel.
49. BlendingMe
BlendingMe is the best way to create a blend for two lines, ellipses, or rectangles. All you have to do is select two objects you want to blend, choose a count of blending steps and the plugin does the heavy lifting. It also lets you change the blending path, color, stroke weight, and opacity while the plugin is working.
50. Close Path
Close Path lets you close any open path between selected objects easily. It works with straight connections and curved connections.
Content Plugins
Content is king, so give it the royal treatment with these plugins.
51. Content Reel
With Content Reel, you can 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.
52. Mockup
You can get access to a library of high-quality mockups to aid your presentation using the Mockup plugin. Graphics and offers perspective transformation. It has several features like clearly named and conveniently structured layers that make it easy to integrate into your design.
53. Mockuuups Studio
Mockuuups Studio offers over 1000 various scenes. It is packed with everything you need to create product mockups, marketing materials, and visual content for social media or blog posts.
54. Lorem Ipsum Crypto
Lorem Ipsum Crypt lets you generate sample cryptocurrency addresses for Ethereum, Zkopru, and Bitcoin wallets. However, the generated addresses can’t be used for receiving transactions. The corresponding private keys are either not created or destroyed immediately.
Icon Plugins
If you’re working with icons in Figma, these plugins will help your workflow.
55. Iconify
Iconify offers over 100,000 icons in PNG and SVG format. It lets you have access to Material Design Icons, Font Awesome, Jam Icons, EmojiOne, Twitter Emoji, and 100 other sets of icon styles for your design.
56. Bootstrap Icons
With Bootstrap Icons, you can add icons from the Bootstrap icon library directly as SVG in your Figma projects. Bootstrap Icons features a list of over 1400 icons and is open sourced (MIT). This means you can download, use, and extend it for free.
57. Lucide Icons
Lucide Icons is an open-source icon library, a fork of Feather Icons with a library that’s constantly growing. The icons are totally free for personal and commercial use.
58. Material Design Icons
This plugin gives you access to the Material Design Icons library, with 27,000 new icons, available in PNG and SVG formats. You can search icons by name or scroll through the entire list. Filter by a category, change style and size, and choose between different styles: filled, outlined, rounded, and so on.
Summary
There are several plugins and tools available on Figma to make your work easier, and although we’ve covered several of them, many are created every day. Exploring the Figma community is one way to learn more about them.
Conclusion
If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
If you enjoyed this article & would like to leave a tip — click here
Top comments (1)
wow that's absolutly Amazing! thanks a million to share something special with us! You know, today I'm happy to Get 20000+ Design Resources thorught *UIHUT Figma Plugins. *
you can try out & share your feedback. figma.com/community/plugin/1162429...
Features:
🤩 3000+ Web Templates
😎 3000+ Illustrations
😍 3000+ Mobile App Kit
😲 2000+ Web Application Kit
🐹 500+ 3D Assets
🐼 9000+ Icon
Want to learn More?
» uihut.com
Happy Designing🥰