Best Figma Plugins for Senior Web Designer in 2024

A comprehensive list of Figma plugins recommended by experienced web designers. These plugins significantly enhance the efficiency of web visual design, streamline team collaboration, reduce time, and cut down on interdepartmental communication costs. Plus, most of these plugins have free versions that are more than sufficient. Ideal for web designers, UI/UX designers, or anyone using Figma for project management, brainstorming, creativity, and marketing tasks. (Last updated: October 27, 2023)

“Practical experience sharing, not just online information compilation.” – Irving

Today, using Figma for web design and UI interface design is widespread and popular. I typically use Photoshop for image compositing, adjusting image colors, and Illustrator for creating and editing brand logos or small icons. I export image files and then import them into Figma for web layout. In this article, I’m sharing the Figma plugins I frequently use in web design to significantly enhance efficiency and reduce time costs. If you want to delve deeper into web design concepts and exchange practical experiences, whether you’re a marketer, engineer, graphic designer, or from another field, feel free to join our web design learning Line community.

🍉 If you don’t have a Figma account yet, you can sign up for a free account – the free version is already quite useful! I personally used it for a while before upgrading to the Professional version, which removed page and file limits. It has now become the hub for all my design projects.

Both Photoshop and Illustrator have become more powerful over time, but they’ve also become bulkier, leading to occasional issues with missing images and fonts when sharing files. Opening files and collaborating with a team can be cumbersome. Figma, on the other hand, provides an excellent solution for remote teamwork and online real-time collaboration, with its responsive and user-friendly interface. It’s designed specifically for UI/UX design, with features and formats that cater to designers. Along with its continuously expanding library of plugins, it can be considered the ultimate tool for web and UI/UX designers.

Here’s a quick overview video of 13 Figma plugins. I’ll continue to add more content in the future, which you can find on this page. Feel free to bookmark this page (Mac: command + D, Windows: Ctrl + D) and revisit it anytime!

PDF File Import

Plugin Name

PDF to Figma

Plugin Description

Figma supports drag-and-drop import of PDF files, which are converted into images upon import.

Use Case

Using PDF to Figma, you can directly import PDF files into Figma, making it much more convenient for web designers. It eliminates the hassle of switching between Figma and PDF software for viewing detailed requirements. Additionally, it offers smooth zooming and browsing within Figma, avoiding the frustration of using PDF software.

If you encounter issues with PDF import and receive a message like “file size too large,” it’s likely due to the PDF’s dimensions being extremely large in terms of pixels. Figma has its own limitations to prevent performance issues. In this situation, you can open the PDF in Photoshop and quickly split it into two or three smaller parts. Then, copy and paste these sections into Figma.

Quick Tip: If you want to export the screens in Figma as a single PDF file, follow these steps. First, make sure all your content is organized in separate frames and numbered sequentially. Then, select all of them and click on the toolbar’s “File > Export Frames to PDF.” You’re done!

---

Web Page Screenshot

Plugin Name

html to design

Plugin Description

Convert any website into fully editable Figma designs. Utilize an existing website by importing its HTML into Figma, allowing you to start your own design without building every element from scratch.

Use Case

We usually install browser extensions like “Capture Webpage Screenshot – FireShot” when researching other competitor websites or collecting high-quality website page designs. However, sometimes, due to excessively long pages, even though we capture the entire page, the image quality and resolution might deteriorate. Later, we discovered the “html to design” plugin, which not only captures extremely long webpages but also directly stores them in Figma files. In addition, if there are images or icons on the webpage, they can be individually selected and used, essentially “cutting the images,” which is incredibly useful!

When a webpage contains videos or dynamic effects like parallax scrolling, it’s very likely that you won’t be able to capture them. In such cases, you’ll have to resort to using Chrome browser extensions to capture those elements. The solution often involves using multiple methods and complementary tools. With the free plan, you can use it “10 times” every month. So, if you’ve used up your quota, you’ll need to wait until the next month to start counting again. Alternatively, you can use another Figma account to continue ^_^

---

Image Editing

Plugin Name

Pixel Cleaner

Plugin Description

A single click can clear all decimal numbers after selecting the object’s parameters, including automatic layout, typography, position, dimensions, and more.

Use Case

Many people have likely encountered the issue of white borders appearing around images when uploading them to a website. It’s frustrating to find these white borders and not know the cause. There are several possible reasons for white borders around images, including a 1-pixel light gray edge on the image, decimal points in the image’s original dimensions or position, and more.

The usual solution would involve going back to Photoshop, making adjustments to each image one by one, and then exporting them again, which can be quite cumbersome. However, there’s a more convenient way to resolve all these issues at once. You can use the Figma plugin “Pixel Cleaner” to eliminate decimal point problems across various aspects of your images with a single click. The one issue it doesn’t automatically handle is the “1-pixel light gray edge” problem, which you’ll still need to remove manually, but it swiftly resolves the rest.

Fixing just one or two images might not seem like a big deal, but when you have to correct over a dozen or twenty images at once, you’ll realize the significant time and effort savings. In Figma, you can select all the images, click the plugin button, and instantly correct them all at once, saving you at least half an hour or more of repetitive and tedious work.

---

Layer Management

Plugin Name

Sort Layers

Plugin Description

Sort layers by name or position.

Use Case

Regarding image arrangement and organization, I often encounter two common scenarios: firstly, I need to name and sort all images from web page slicing in one go, arranging them either from top to bottom or from left to right. Secondly, when I have to import dozens of photography assets directly into Figma and categorize them, I also need to sort them into sections for export. Just these two situations have made Sort Layers a huge help. In the past, I was too lazy to look for solutions and sorted everything manually, which was quite time-consuming. Tasks involving repetitive actions like this really benefit from automation!

Layer naming tip: First, use Sort Layers to organize your files. Then, select the relevant layers, right-click “above layers,” and choose “Rename” from the menu. In the Rename to field, enter the file name. After that, you can click on Number ↑ or Number ↓ to add numerical order that increases or decreases the sorting order.

Information about layer naming settings can be found in the official document “Rename Layers – Figma.” Figma and Sketch are commonly used for mobile app design and UI/UX projects. However, your focus on “web design and SEO” for practical websites involves different requirements and approaches. For details on optimizing web images, you can refer to this article: “How to Create and Optimize Web Images for SEO“

---

Image Library Import

Plugin Name

Unsplash

Plugin Description

Insert beautiful images from Unsplash into your designs.

Plugin Name

Pixels

Plugin Description

Add completely free images from Pexels directly to your designs.

Use Case

When doing web design or writing blog articles, you often need to use images from free and commercially usable image libraries. There are many popular image libraries on the internet, and here are a few that I personally like and frequently use to enhance the aesthetics and quality of articles: Unsplash, Pexels, and various other international and domestic brand websites and blogs.

In the past, when working on website projects, web design layouts required text and image materials, and when writing blog articles, text and images had to be combined. So I used to keep the text in Word or Google Docs and stored the images in local or cloud folders separately. However, since I started using Figma, my approach has changed. I now centralize and organize images in Figma, and if needed, I can also do some basic layout work or adjust image sizes and cropping right within Figma. Using this plugin to directly import images from my frequently used libraries like Unsplash and Pexels in Figma is very convenient, eliminating the need to switch between different screens and saving time on downloading and uploading images.

I’ve noticed that some Figma plugins offer an “All in one” image library import feature, but the image import speed is slightly slower. That’s why I prefer using individual image library import plugins that are much faster.

---

Color Picker

Plugin Name

Get Palette

Plugin Description

Get Palette can help create beautiful color palettes using images.

Use Case

Sometimes we struggle with choosing color schemes, right? Sometimes we need inspiration for color schemes, sometimes we need an overall color palette for our brand designs, and sometimes we find certain images, photos, or pictures with captivating and suitable color schemes. However, we can only use software or Chrome browser extensions’ color picker tools to roughly sample a few parts of the screen and come up with a color combination.

Now, I can instantly satisfy this need by using the Figma plugin: Get Palette. I can import any image into Figma, activate the plugin, and immediately see several primary colors from that image. It allows me to quickly understand the atmosphere created by the color scheme, and I can use, save, or fine-tune it right away.

Additionally, this plugin only works with JPG and PNG images, and it cannot be used with SVG files. Some plugins display the color values alongside the colors, but this one does not. You have to click on each color and then copy the color code displayed on the right. I prefer this plugin because it has a feature I really like, which is the ability to choose how many color samples you want to generate, ranging from 1 to 10.

If you don’t have Figma installed or don’t want to use it, there are several online tools with similar functionalities. For example, you can use “Image picker – Coolors,” which allows you to upload an image or paste a URL to automatically generate the key color codes of that image. As for commonly used color codes like HEX and RGB values in web development, I use another plugin called “ColorLabels,” which quickly displays these values in the file.

---

Color Code Display

Plugin Name

ColorLabels

Plugin Description

You can create color styles with color codes in just one click.

Use Case

During the design process, finding inspiration through image searches, creating mood boards, and other visual references is essential. The visual impressions and emotions conveyed by colors are significant. By using Figma plugins like Get Palette to extract color schemes from images and ColorLabels to generate color codes, you can make the design and web development processes more efficient. These two plugins work seamlessly together and allow you to choose formats like HEX, RGB, HSL, and HSB. The most commonly used formats for the web are HEX and RGB, such as white (#FFFFFF) and black (#000000).

I noticed that ColorLabels is continuously updating. When I first used it, there weren’t as many format options for color codes. Now, it has added new features. In addition to quickly displaying color codes, it can also show the “color name” associated with that code, which is quite interesting!

---

Icons

Plugin Name

Iconify

Plugin Description

Importing a large number of icons as vector shapes into Figma from various sources such as Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji, and many more, including over 100 icon sets with a total of more than 100,000 icons.

Use Case

In web design, the use of icons and small illustrations is crucial in addition to images. These icons can either be self-created or sourced from popular icon repositories such as Bootstrap Icons, Google Material Icons, Font Awesome, and more. The Figma plugin Iconify consolidates these resources, allowing users to freely select and insert SVG files into the design canvas, saving a lot of effort and eliminating the need to switch between windows or browse for downloads.

I typically choose SVG format for the icons used on websites because it maintains clarity when scaled up or down. Additionally, being in SVG format allows for flexible adjustments of colors, interactivity, and animations through CSS based on the content, making it developer-friendly.

---

Brand Logo

Plugin Name

Brandfetch

Plugin Description

Brands at your fingertips ✨ Say goodbye to searching for the latest brand assets — Brandfetch provides millions of resources like logos, colors, fonts, and more to streamline your design process. Ensure your brand aligns with its image and access it effortlessly by adding it to the global brand platform, Brandfetch.

Use Case

We use a variety of icons in our designs for reading guidance, visual embellishments, and more. We also often encounter a situation where we might need to use logos of other brands or services. After all, not every company keeps their brand assets readily accessible or available for download on their website. Some logos are easy to find, while others can be challenging to locate, and even when found, their image quality might not be suitable for use.

This Figma plugin, Brandfetch, is somewhat helpful as it compiles SVG files for many well-known brand logos like Google, Nike, LV, Apple, Amazon, Shopify, and more. Particularly, it provides commonly used payment icons found on e-commerce websites like Visa, MasterCard, PayPal, and others. For logos that are not available through the plugin, you can search the internet for the files. Wikipedia, for example, has downloadable logo files for many brands. You can also search for keywords like “payment icons” on Figma Community to discover a plethora of resources.

Because I didn’t want to use blurry, low-quality image files that would degrade the overall visual quality, my previous method was to search all over Google to see if I could find the original files to collect. For example, I’d look for SVG or EPS files, and if those weren’t available, I’d settle for higher-resolution PNG images with transparent backgrounds. The last resort would be JPG files (which are trickier to remove backgrounds from). From this, it’s evident that SVG files are the best for editing.

---

Background Images

Plugin Name

Subtle Patterns

Plugin Description

Get pattern images from Subtle Patterns.

Use Case

In the past, especially from the early days of the internet until around 2014, it was common to see web designs using “repeating patterns” as backgrounds. However, modern web design trends have shifted towards using large images, solid colors, gradients, ample white space, and oversized typography. I can provide more information on these trends if you’d like to explore them further.

Figma plugin: Subtle Patterns can come in handy when you’re looking for subtle and minimalistic patterns to use as backgrounds in your design. These patterns often feature fine grayscale textures or subtle grid patterns that can add visual richness and depth to your layouts without being overly flashy or distracting. They are particularly useful when you want to strike a balance between a clean, modern look and some added texture or visual interest in your design.

Sometimes an all-white or monochromatic background can appear somewhat empty, although this largely depends on the content of the design. Additionally, I often use this approach for creating social media posts on platforms like Facebook (Meta), Instagram, Twitter, and more. Surprisingly, it works really well! I highly recommend this method.

---

Gradient

Plugin Name

CoolHue – Gradient Color Palette

Plugin Description

CoolHue is a curated gradient palette that offers over 60 ready-made gradient effects. You can use these gradient effects by simply clicking on the gradients in the CoolHue palette or generate new random gradient effects at any time.

Use Case

When used effectively, gradients can make a design look very fresh and vibrant. If you prefer to use gradient backgrounds or just want to quickly apply a certain gradient and then make adjustments, the CoolHue – Gradient Color Palette plugin is perfect for this. It’s suitable for various uses, including web design and creating content for social media posts.

---

Wireframes and Placeholder Text

Plugin Name

Content Catalog

Plugin Description

Content Catalog can help designers generate avatars and text strings. Simply select one or more layers and apply a content type from the catalog.

Use Case

Web designers or graphic designers often encounter a situation where they lack content or assets, but the project is already underway. Marketing or the client is in the process of preparing content, and the designer can’t afford to wait idly. Every minute counts, so despite not being the ideal scenario for design execution, some actions need to be taken. At the very least, starting with a basic layout or framework can be a good way to get things moving.

In the past, I used to visit image libraries or simply use grayscale blocks as image placeholders, randomly type some text, or use online tools to generate meaningless lorem ipsum text. Now, I handle this with the Figma plugin, Content Catalog. I can select a bunch of specific areas, click a button, and generate “placeholder content.” This includes random profile pictures of people, dogs, or cats, English names, email addresses, phone numbers, numbers, etc. If I need random images like backgrounds or landscapes, I can complement it with the relevant Figma plugins, Unsplash or Pixels.

---

This article will be continuously updated, replacing old content and adding more Figma plugins that are found to be useful in practical design work. It serves as a sharing platform, but it’s also a personal online notebook for quick reference ^^ If you have any questions related to web design, feel free to reach out for a discussion at irving@irvinglab.com.