5 Must Have Figma Plugins For Web UI Design

Today I am sharing 5 of the Figma plugins that sped up my workflow significantly for working with Web UI design.

These plugins help me to increase speed and swapping out components, selecting colors and adding placeholder images that always look good and speeding up my workflow for exporting design assets in a "social media ready" format.

Component Utilities

Component Utilities

My first pick Component Utilities is a set of helper utilities that aid in speeding up your workflow.

Personally, I use the "Replace with Component" utility more than anything else within my workflow for putting together UI designs.

The "Replace with Component" utility does as it says on the box: replaces the currently selected component. It will provide a pop-up window that allows you to select a component from your Figma library, but most importantly (at least to me), keeping "Resize component to fit layer" turned off makes it easy to quickly swap out parts of the UI quickly without needing to resize the pages after.

Replace with Component

Unsplash

Unsplash

Following up with the plugin that is probably on any and every Figma plugin list, Unsplash.

Unsplash is a free service that allows you to search for images and get them directly into your Figma project.

If you setup your component with images, then this plugin makes it incredibly easy to swap out images and to quickly click-through to the image on the Unsplash website.

Unsplash in action

Another popular alternative that does not require attributes is Pexels and Freepik is another great alternative.

Storyset by Freepik

Storyset

Speaking of Freepik, the next selection is Storyset by Freepik, which is a great solution for using illustrations in your mock ups.

With the previous plugin, swapping out images is quite straight-forward but with the illustrations, it requires a little more setup to make it quickly reusable within your project components.

Personally, I import each illustration as I need and convert that into a component with a naming convention that makes it easier to swap out when needed.

Storyset in action

Split to frames

Split to frames

When it comes to preparing your design assets for export for social media platforms such as Instagram, the Split to frames plugin is your best friend.

I use it for all Web UI exports that I post to my social media account @dendribbles

Split to frames in action

Webgradients

Webgradients

Finally, the last plugin that I used every day is the Webgradients plugin.

This simple plugin enables you to quickly select beautiful, curated gradients and apply them to your shapes and designs.

Webgradients in action

Summary

Today post shared the 5 Figma Plugins that I consider "must-haves" in my daily workflow.

Each plugin plays a pivotal role in speeding up how I deliver high-fidelity web UI designs in the shortest possible time so I can move onto focusing on what matters most for me.

Resources and further reading

Photo credit: pawel_czerwinski