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

PDF to Figma – Figma supports dragging and dropping PDF files for import, which will be converted into images upon 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

html to design – Convert any website into fully editable Figma designs.

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

Pixel Cleaner – A single click clears all decimal numbers after selecting the object’s parameters.

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

Sort Layers – Sort layers by name or position.

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

Unsplash – Insert stunning images from Unsplash into your designs.

Plugin Name


Plugin Description

Insert beautiful images from Unsplash into your designs.

Pixels – Add completely free images from Pexels directly to your designs.

Plugin Name


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

Get Palette – It can help create beautiful color palettes using images.

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

ColorLabels – Create color styles with color codes.

Plugin Name


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!


Iconify – Import a large number of icons as vector shapes into Figma documents.

Plugin Name


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

Brandfetch – Providing millions of resources such as logos, colors, fonts, etc., to help streamline your design process immediately.

Plugin Name


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

Subtle Patterns – Get pattern images from Subtle Patterns.

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.


CoolHue – Gradient Color Palette – CoolHue – A selection of gradient palettes, offering over 60 ready-made gradient effects.

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

Content Catalog – It can help designers generate avatars and text strings.

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

Subscribe to Irvinglab’s Newsletter

Irving will regularly share his practical experiences in web design and development, as well as his curated list of design, SEO, and marketing tools.

    Design and Marketing Tools

    • ActiveCampaign: Email marketing and newsletter system (the best alternative to MailChimp)
    • Canva: Online graphic design tool, a real lifesaver if you don’t have a designer on your team! It solves all your marketing, social media, graphic design, and presentation needs with a wide range of templates.
    • Envato Elements: Unlimited downloads of paid resources including images, videos, music, sound effects, graphic designs, illustrations, presentation templates, and more. This is a platform I frequently use for various materials.
    • GetResponse: All-in-one marketing platform that includes email marketing, landing page creation, marketing automation, and more. You can start with a free account and upgrade as needed. This software is similar to Hubspot.
    • PickFu: An online research tool that allows you to conduct tests, optimizations, and instant consumer surveys to replace guesswork. With PickFu, you can instantly gather opinions from up to 500 US consumers. By seeking collective wisdom, it helps you make better business decisions.
    • SurveySparrow: Omnichannel Experience Management Platform for conducting customer satisfaction surveys across various channels.
    • Qwary: A CX (Customer Experience) platform that helps businesses collect customer feedback and improve shopping experiences and product performance through beautifully designed professional surveys. It allows measurement of NPS, CSAT, and CES.
    • Opinion Stage: Create free quizzes, polls, and forms with visually appealing designs and good functionality. It also offers paid plans to increase the number of responses per month.
    • Typeform: Elegant online form builder.
    • UXPressia: Quickly create professional Customer Journey Maps, Personas, and Impact Maps with various ready-to-use templates.
    • Surfer: SEO tool primarily used by content editors. It offers AI-generated SEO copy, keyword recommendations, SEO audits, and a visually appealing interface.
    • CopyAI: An AI-powered copywriting generator that creates high-quality copy for your business.
    • ABtesting AI: Have you tried optimizing your website with AB testing? Try AI testing with a free plan available.
    • Frase: Use AI to assist in searching, writing, and optimizing SEO articles with ease.
    • AppSumo: One-time payment platform for discounted digital software (greatly reduces costs).
    • Tidio: Design a high-quality online chat tool for your website.
    • Help Scout: Online customer support platform (alternative to Zendesk).
    • HeySummit: Host virtual online summits.
    • SimplyBook: Online appointment scheduling system and app booking software.
    • Liinks: One-page multi-link website that integrates multiple social and official website links.
    • LearnWorlds: Create and sell online course websites.
    • Teachable: A platform for creating and selling online course websites.
    • Make: A visual automation workflow tool that allows data integration and seamless movement between various software applications, enhancing work efficiency.
    • Piktochart: An information chart design tool.
    • ClickMagick: While searching for AB testing tools, I came across ClickMagick, which offers this functionality. After watching introductions from other YouTubers and finding it user-friendly, I decided to give it a try.
    • MotionElements: A platform for professional video materials, templates, and plugins.
    • MotionVFX: A platform for professional video materials, templates, and plugins.
    • Payoneer: A secure and fast one-stop solution for cross-border payments.
    • Wise: A cross-border account for international payments and receipts.
    • Surfshark: I recently started using Surfshark VPN, and it’s been great! Originally, I wanted to browse certain foreign websites that automatically redirected me, but using a VPN solved this problem.
    • Firstory: The most comprehensive and powerful podcast hosting platform for platform deployment, sponsored subscriptions, and advertising revenue. It eliminates all the tedious publishing processes by automatically distributing your recorded audio files to platforms such as KKBOX, Apple Podcasts, Spotify, and Google Podcasts.
    • Continuously collecting and researching more…

    If you have any questions, please feel free to fill out the form and leave a message or email me at You can also reach out to me through the Facebook or have a direct online chat. Let’s communicate and grow together! You can check out my web design portfolio to see my work. Join the Shopify website design and development learning community on the Line group to exchange ideas and learn together! However, please note that users in the United States cannot join the Taiwan Line group. Therefore, I have also created a Telegram community where valuable experiences from both platforms will be shared and organized. To further understand our services, you can add Irvinglab’s Line@ official account and leave a message for us.

    Leave a Reply

    Your email address will not be published.