I tend to not use a lot of plugins (my go-tos are un splash and lorem ipsum), and I was curious to see what’s out there that could make all of our lives a little easier.

new to figma and I am overwhelmed of so many plugins can anyone suggest me a good and really helpful plugins just for web designing?

If you had to pick just three Figma plugins that you cannot live without, which ones would they be and why?

I'm curious to know which plugins have become essential in your workflow—whether for speeding up tasks, improving collaboration, automating repetitive work, or just making the design process smoother.

Would love to hear your recommendations!

I work in Figma every day but rarely try out new plugins. So I took last week to try over 100 of the top ones to see which are actually worth incorporating into my design flow. I found 21 really awesome plugins and grouped them into different "stacks". Thought some people here might find the results helpful. Enjoy!

​

Content Stack

Every design project needs content. Whether images, dummy text, or icons, you need content to make high-fidelity designs. The problem is, finding and adding high-quality content is time-consuming. The plugins below are essential for quickly adding a wide range of content types to your designs.

​

Content Reel

Content Reel is a one-stop shop for most of your content needs. It supports a huge library with specific categories of content to populate text layers, frames, or shapes. Choose from 100+ types of dummy text (e.g. lorem ipsum, names, dates), 100+ types of image fills (e.g. avatars, logos, cities), and a few icon libraries by Microsoft. If you can't find what you're looking for, you can also create an account and import your own text or image category.

Example use case: Bulk populate text layers in a table with realistic data.

1. Open Content Reel
2. Select the layers you would like to populate (e.g. text layer)
3. Click the desired category until you find a selection you like

Pro tip: Select the star next to the categories you use often to "favorite" them. Then find all your favorite categories under the "Home" tab for quick reference.

Gif from UI Prep Design System

Cost: Free! Must create an account to import personal content.

Install Content Reel

​

Google Sheet Sync

This plugin lets you sync Google Sheets with your Figma file to bulk populate text and image layers. This is a game-changer for any designs that need a large amount of data. Especially if that data needs to be up-to-date. Instead of populating every text or image layer 1-by-1, every layer automatically populates at once.

Example use case: Populate multiple data points for three cards.

1. In Google Sheets, create a new sheet with all the content organized under labels (e.g. "Title"). Each row will later map to one component.
2. In Figma, create your components and name the layers you need to be populated with a "#" at the beginning (e.g. "#Title"). Do not use any periods in your layer name (".").
3. In Google Sheets, set the Share link settings to "anyone with the link" and copy the URL.
4. In Figma, open Google Sheet Sync and Paste the Share link. Then select "Fetch & Sync".

Pro tip: Add images by pasting their web URL into the table cell. This only works if your image layer is a shape (not a Frame).

https://i.redd.it/64ersglk6ud71.gif

Cost: Free! Must have a Google account.

Install Google Sheet Sync

​

Blush

Blush supports a large library of well-designed pre-built illustrations. It also makes it easy to customize illustrations to match your brand. You can add illustrations created in Blush to your file as a PNG or SVG.

Example use case: Create a unique character by selecting from a number of different properties.

1. Open Blush
2. Select an illustration set & type
3. Select your desired hair color, skin color, and body parts

https://i.redd.it/1i1nj4oo6ud71.gif

Cost: Free! Must upgrade to Pro to add illustrations as SVG.

Install Blush

​

Unsplash

Unsplash is one of the most downloaded Figma plugins for a reason. It's the best plugin for finding and adding high-quality photos to your designs. It is perfect for when you need to find specific, or particularly beautiful images.

Example use case: Inserting a specific image into a product card.

1. Open Unsplash
2. Select the layer (frame or shape) you want to populate
3. Browse or search the library and select your desired image

Pro tip: Select multiple layers, then choose a category in the "Presets" tab to populate each layer with a different image.

Gif from UI Prep Design System

Cost: Free!

Install Unsplash

​

Iconify

Iconify feels clunky, but it's the best (free) all-in-one icon plugin. It has 100+ icons sets from popular libraries like Material Design and Font Awesome. Plus, each icon set is searchable and has vector support.

Example use case: Add a specific icon to your file from a certain icon set.

1. Open Iconify
2. Select your desired icon set
3. Browse or search for the icon you need
4. Drag and drop the icon into your design file

https://i.redd.it/zna98oiy6ud71.gif

Cost: Free!

Install Iconify

​

TinyImage Compressor

Once you have your content, you'll need to export it for development. Exporting assets from Figma can result in large files that take up a lot of space and slow down performance. Instead, use TinyImage Compressor to reduce the size of your exports. It supports compression for JPG, PNG, SVG, WebP, GIF, WebM, AVIF, and PDF file types. It's the best way to reduce asset size and keep the original quality.

Example use case: Compress large images

1. Make images exportable (select "+" next to "Export" in the Design Panel)
2. Open TinyImage compressor
3. Choose items you want to compress and select "compress"

Gif from UI Prep Design System

Cost: Paid subscription after free trial (15 compressed exports).

Install TinyImage Compressor

​

Perfectionist Stack

Keeping your designs pixel perfect and up-to-date not only makes you look like a real pro but makes maintaining your design file and communicating with your team much easier. The larger the project, the more important, and difficult, this becomes. Below are the best Figma plugins to help you and your team catch errors and make bulk updates.

​

Style Organizer

Style Organizer allows you to see every color and text layer on a page, identify if it's linked to a style or not, and make bulk updates. It even recognizes when "unlinked" layers match a saved style and will "merge" them all to apply the correct style. This is a huge time saver when you need to clean up a file with a lot of missing styles.

Example use case: Find all missing color styles and "merge" them with the correct style.

1. Open Style Organizer
2. Locate missing styles ("unlinked")
3. Select "Merge" icon or make edit in Design Panel

Gif from UI Prep Design System

Cost: Free!

Install Style Organizer

​

Spell Inspector

After testing the top 4 spellcheck plugins, Spell Inspector was the clear winner! It searches an entire Figma page and shows all the misspelled words in a table format for easy scanning. This is crucial as you are bound to have some gibberish placeholder text. Being able to scan and ignore them is a big time saver.

Example use case: Finding and correcting all spelling errors

1. Open Spell inspector
2. Navigate to the "real" misspelled word by clicking on it in the table
3. Select the correct spelling option to replace the word

Gif from UI Prep Design System

Cost: Free!

Install Spell Inspector

​

Icon Resizer

I'm not sure why. I'm not sure how. But I've seen too many design files using mismatched icon sizes. If this sounds familiar, you need this plugin! Rather than manually resizing every icon's frame and vector shape, then center aligning everything. Use Icon Resizer to bulk resize all your icons (frame AND vector).

Example use case: Resize a set of icons whose frames and vectors are all different sizes.

1. Open Icon Resizer
2. Select all icons
3. Set "Max Height/Width" and "Icon Box Size", then select "Run"

Pro tip: Make the max width/height ~6px less than the box size to allow for a little internal padding.

Gif from UI Prep Design System

Cost: Free!

Install Icon Resizer

​

Similayer

Similayer allows you to auto-select every layer on a frame that is "similar" to your original selection. This is a huge time saver when you need to select 10+ layers. Especially if those layers are nested inside of groups or frames. Use it to select layers with similar text, fill, stroke, size, position, etc. It can even be used with multiple properties (e.g. similar fill AND stroke). My favorite way to use Similayer is to select all instances of a master component and make bulk overrides!

Example use case: Select every instance of a certain icon to swap it with another icon.

1. Open Similayer
2. Select a single layer
3. Choose one or multiple properties this layer has in common with the other layers you would like to select.
4. Click "Select layers" and make an edit(s) to selected layers

Pro tip: Use this plugin with Content Reel to bulk populate many similar layers.

Gif from UI Prep Design System

Cost: Free!

Install Similayer

​

Branding Stack

There comes a time for every website or product when branding needs a refresh or update. While this is often a fun moment for exploration and creativity, it can also be a daunting task. Finding the right styles and making all the updates is difficult and time-consuming. But with the plugins below it doesn't have to be. Use them to auto-generate the perfect color palette and update your text and color styles in bulk.

​

Batch Styler

Customizing every style to match your branding is tedious. Especially when you're starting a new project or customizing a UI kit. That's where Batch Styler comes in. Rather than editing styles 1-by-1, this plugin allows you to edit every aspect of your text or color styles in bulk.

Example use case: Update the font family for every text style.

1. Open Batch Styler
2. Select every text style (hold "Shift" to select multiple items)
3. Update the font family and select "Update styles"

Pro tip: Use the "find & replace" inputs to bulk update style names.

Gif from UI Prep Design System

Cost: Free!

Install Batch Styler

​

Image Palette

Image Palette allows you to pull color inspiration from an image. It uses a fancy algorithm to capture the 5 most prominent colors of an image. This is a great way to discover new color combinations you might not have thought of.

Example use case: Create a color palette from an image

1. Select the image
2. Open Image Palette

https://i.redd.it/pc6c7ccs7ud71.gif

Cost: Free!

Install Image Palette

​

Tailwind Color Generator

Generating a well-balanced range of colors can be time-consuming. It's both a science and an art form that is surprisingly difficult to get just right. Luckily the Tailwind Color Generator can do most of the heavy lifting. From one base color, the plugin generates 10 balanced styles (1 base + 4 tints + 4 shades). The new colors can then be found neatly organized in the Style Panel.

Example use case: Create a full color range based on one default color.

1. Open Tailwind Color Generator
2. Select layer with new default color
3. Add "Base Name" and create a color set

Pro tip: Use Image Palette (above) to find base colors.

https://i.redd.it/cbvfxldw7ud71.gif

Cost: Free!

Install Tailwind Color Generator

​

Accessibility Stack

There's nothing less user-friendly than your users not being able to see your designs. Use these plugins to catch accessibility errors early and set up guidelines to follow as your designs scale. This ensures users understand and can navigate through your product with ease.

​

Contrast

After testing the top 3 color accessibility plugins, Contrast is the clear winner. It's easy to use and super fast at flagging contrast issues. You can test contrast ratios (from WCAG) for a single layer, or scan an entire page to spot issues. It even uses "smart sampling" to check the contrast with elements using a gradient or image.

Example use case: Test the contrast ratios for each of your text layers.

1. Open Contrast
2. Select the layer you want to test
3. Edit layer or background until it passes all ratio tests

Pro tip: Keep all black text layers above 65% opacity.

https://i.redd.it/dgdfgrxz7ud71.gif

Cost: Free!

Install Contrast

​

Color Blind

This plugin allows you to create views for 8 types of color vision deficiencies. Each view represents how people with color blindness experience your website or product. It then flags where they may have trouble. You can then make updates to the color palette or add extra signals (e.g. icons, text) to reduce confusion.

Example use case: Test accessibility by creating views for all 8 types of color vision deficiencies.

1. Select layer (entire screen or component)
2. Open Color Blind
3. Choose one or multiple types of vision deficiencies and select "Create views"

Pro Tip: Test the contrast ratios for each view you create using the Contrast plugin.

Gif from UI Prep Design System

Cost: Free!

Install Color Blind

​

Showoff Stack

Use this stack of plugins to go the extra mile and bring your designs to life. Create animations or vector shapes that you otherwise would only be able to create in a separate tool (e.g. Adobe). Or generate complex effects and sharp-looking mockups.

Figmotion

This plugin takes things to a whole 'nother level! It allows you to create advanced animations to show specific interactions. Instead of using a separate tool like Adobe After Effects, with Figmotion you can create an animation right in Figma. It's also easy to use (even for novice animators). Render animations as mp4, gif, webm, or export as CSS or JSON.

Example use case: Create an animation for a loading screen.

1. Open Figmotion
2. Select the frame you want to animate
3. Configure the keyframes (watch this video to learn how)
4. Render or export video

Pro tip: Insert gif into your prototype to show where this behavior can be found. During "presentation" the gif will autoplay.

https://i.redd.it/rn148zx68ud71.gif

Cost: Free!

Install Figmotion

​

Image Tracer

Image Tracer allows you to "trace" an image and generate an exact copy as a vector shape. This is perfect for removing a background, editing the shape/color, or export as an SVG. I often use this when creating illustrations or modifying a logo or icon.

Example use case: Create an editable vector shape from a PNG.

1. Select image
2. Open Image Tracer
3. Select "Place traced vector"
4. Edit vector

Pro tip: Use images with a solid dark shape on a light background.

https://i.redd.it/2fchv5za8ud71.gif

Cost: Free!

Install Image tracer

​

Morph

Morph allows you to create interesting effects to give your designs a little extra "oomph". Each effect is pre-built and ready to use. Or you can tweak the properties in the Design Panel to get it just right.

Example use case: Create interesting effects for a card background.

1. Open Morph
2. Select a shape or vector (not frame)
3. Select and configure the effect you want
4. Preview effect and select "apply"

https://preview.redd.it/nplernse8ud71.png?width=2158&format=png&auto=webp&s=b359bbf6661d298306a73e32fd7a508fa2bf6623

Cost: Free!

Install Morph

​

Clay Mockups 3D

Place designs in a device mockup to show them in marketing websites, ads, or portfolios. Clay mockups 3D not only allows you to insert your design into a device. It allows you to customize the device angle, rotation, and color.

Example use case: Insert design into a customized device mockup

1. Select image
2. Open Clay Mockups 3D
3. Customize the device type, orientation, and color
4. Select "Save as Image"

Pro tip: Make your frame size 1200x800 and add a little extra internal padding to the top.

Gif from UI Prep Design System

Cost: Free!

Install Clay Mockups 3D

​

Wireframe Stack

Wireframe plugins make it easy to use Figma for both low and high-fidelity designs. That way all your design work is in one place and easy to reference vs in separate tools. The plugins below speed up the early design phase work with drag/drop layouts and automatic arrow connectors.

​

Autoflow

Autoflow is a quick and easy way to add connecting arrows between frames to illustrate a user flow. The best part? When you move the frames, the arrows automatically update to maintain the connection. You never have to manually move or edit an arrow again.

Example use case: Create and edit a user flow

1. Open Autoflow
2. Configure line color, stroke, and terminal settings
3. Connect two frames by selecting both of them while holding "Shift"

Pro tip: Re-open Autoflow to edit frame location. When Autoflow is open, you can change frame location and the arrows will update automatically.

https://i.redd.it/apkdfcbl8ud71.gif

Cost: Free!

Install Autoflow

​

---

Save this list for future reference >

https://www.uiprep.com/blog/21-best-figma-plugins-for-designers-in-2021

Just out of curiosity how important are figma plugins to designers and alike?

Plugins that you're using everyday as a UI designer..

Hey everyone, been working on a fun plugin that reviews your Figma files and catches inconsistencies in colors, typography, spacing, stroke and radius (more like a Figma File Roaster). It generates a design file health web report so you can spot and fix issues faster! It’s not public yet, but would love to give access to folks interested in getting their first audit of their design file!

https://preview.redd.it/q5g3oklrw4le1.png?width=1200&format=png&auto=webp&s=c659d6fcfbcaa6ccacf4a9b79c27a754a8ee3d5c

https://preview.redd.it/45cmkceiz4le1.png?width=2588&format=png&auto=webp&s=0ec2630c6d2759a217bc2c71ddc48ece513ee350

https://preview.redd.it/j27vadbjz4le1.png?width=1058&format=png&auto=webp&s=5bb9fa1676990725baa01514d5b8fc460df071af

I would love to get some early feedback and thoughts on the same. If you wish to try you can also fill in this waitlist form: https://tally.so/r/mDZdJN

i love design resources website but then too much of resources becomes mind-boggling; so thought of why not create a space here.

I've been learning Figma for the last two years but lately found out it was acquired by Adobe. I hate when they buy competitors off the market for various reasons. I'm mostly using open source software for my needs and would like to find an alternative to Figma.

What are your recommendations for open source software for UX designers (alternative to Figma or any other type of software you need in your daily work/life)? Or what's the reason you're not using open source?