Best 50šŸ”„Figma Plugins

Best 50šŸ”„Figma Plugins

Plugins for designers and developers!

Ā·

5 min read

General Stack:

Most-Helpful-Figma-Plugins-of-2021-for-designers-1.png

  • Print to Figma: Create print documents in Figma. ā€ŽEasily set up frames that are sized properly for printing at specific DPIs.
  • Spell Inspector: It searches an entire Figma page and shows all the misspelt words in a table format for easy scanning.
  • Remove BG: Background can make your design feel off, cluttered, and ultimately drive attention away from where it's needed. This plugin can handle the job in seconds.
  • TinyImage Compressor: Besides compressing image files of different sizes and formats, it also allows you to optimize progressive JPEGs and transparent PNGs.
  • Font Preview: Font Preview allows you to see how your text would look in different fonts within the plugin window.
  • Lorem Ipsum: Lorem Ipsum will save the day for you. It is undoubtedly one of the most downloaded and best-rated Figma plugins for designers.
  • PitchDeck Presentation studio: Figma plugin will help you turn your Figma design into a slide deck. You can also convert your Figma design into PDF format.
  • GiffyCanvas: This plugin allows you to create GIF images within Figma.
  • Find and Replace: Find and Replace is a Figma plugin that allows you to search for texts on your page and replace them just like a text editor.
  • Figmotion: You generally cannot create in-app animations in Figma, but Figmotion allows you to overcome this shortcoming without using a third-party app.

Content Stack:

user-generated-content-social-media.png

  • Unsplash: This is a royalty-free image gallery that you can use without exiting your screen.
  • Blush: This is an illustration gallery where hundreds of artists can display their work. What's left for you to do is pick a collection, choose an illustration, and place it on your canvas.
  • Content Reel: Content Reel is where you can get EVERYTHING from images to text strings, to icons, and Avatars.
  • Mockuuups Studio: This plugin offers over 500 scenes to choose from and add to your design with just a few clicks.
  • Iconify: Iconify is the largest library of icons in the Figma plugins.
  • Icons8: Free Figma icons in various UI design styles for web, and mobile.
  • Vector Maps: This plugin allows you to add vector maps of countries, regions, and cities to your Figma mockup.
  • Artboard Studio: Artboard Studio mockups allow you to create, animate and design your creative projects in your own scene with their extensive library of items.
  • Vectary 3D Elements: Vectary Figma plugin allows you to place your Figma design into a predefined 3D mockup or your custom 3D element.
  • Google Sheet Sync: This plugin lets you sync Google Sheets with your Figma file to bulk populate text and image layers.

Perfectionist Stack:

graphic-designer-creating-his-artwork-using-computer_180264-157.png

  • Icon Resizer: Importing a bunch of icons and resizing them manually is a very long procedure, but you can resize all the selected icons with a single click.
  • Mapsicle: Mapsicle plugin easily creates maps in your designs. You can search any location and use that location image as a map image in your designs.
  • Table Paste: As the name sounds, this plugin can help you export data from an Excel spreadsheet to stylized tables created in Figma.
  • Datavizer: The plugin visualises your data quickly and has beautiful UI to help you create charts, graphs, UI dashboards and many more.
  • Design System Organizer: Manage your design system easier with the Figma plugin ā€” Design System Organizer.
  • Redlines: Redlines allow you to create and generate redlines from a selection of objects easily while enabling full control over the style and display of each redline element.
  • Style Organizer: Style Organizer allows you to see every colour and text layer on a page, identify if it's linked to a style or not, and make bulk updates.
  • Similayer: You can use Similayer to automatically select each similar layer on a frame of your initial selection.
  • Contrast: You can use this plugin to check colour contrast on the fly!
  • Batch Styler: Batch Styler lets you change multiple colours and fonts simultaneously.

Designers Stack:

1_byVrtqaPUQ3-9E755puLHw.jpeg

  • Image Palette: Image Palette allows you to pull colour inspiration from an image. It uses a fancy algorithm to capture an image's 5 most prominent colours.
  • Image Tracer: Image Tracer allows you to "trace" an image and generate an exact copy as a vector shape.
  • LottieFiles: LottieFiles makes integrating animations easy.
  • SkewDat: You can use skewing to add more depth to your design and create a fully-fledged 3D effect.
  • Responsify: Responsify is an open-source Figma plugin you can use to test your designs on multiple devices quickly.
  • Figma Measure: The plugin acts like a tidy ruler to help you measure heights, widths, distances and more.
  • Figmotion: Figmotion allows you to create animations directly in Figma.
  • Chart: The chart is a plugin for Figma that uses real random data to create the most popular charts.
  • Clay Mockups 3D: Clay mockups 3D allows you to insert your design into a device and customize the deviceā€™s angle, rotation, and color.
  • Isometric: Isometric allows you to create isometric layers without manually setting them up.

Developers Stack

figma-plugin-fae-dev-design-connector.png

  • Figma to HTML, CSS, React & more!:šŸ˜ You can convert any website to a Figma design with a couple of clicks.
  • Wireframe: Wireframe offers many pre-designed templates for both desktop and mobile platforms that allow you to speed up the ideation process.
  • Breakpoints: You can preview responsive design layouts inside a Figma frame.
  • Zeplin: You can easily create user flows and organize your design files with variants to keep desktop, tablet, and mobile screens in one place.
  • Autoflow: Autoflow is the best and easy tool to create quick user flows.
  • Color Blind: This plugin allows you to create views for 8 types of colour vision deficiencies.
  • LilGrid: This handy plugin will help clean up your appā€™s interface. It is great for organizing many buttons and/or icons that your design or system uses.
  • Motion: This plugin allows you to animate UI elements, moving characters and much more.
  • Wire Box: Use this plugin to create UI mockups. It can also be used to convert HD mockups to low-fidelity wireframes whenever you want to concentrate on the user experience part of your project.
  • Typescale: As a designer, we all know the importance of typography and hierarchy. Type scale is the best tool to generate type scales quickly.

Did you find this article valuable?

Support Sahil Saini by becoming a sponsor. Any amount is appreciated!

Ā