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.
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
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
Storyset by Freepik
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
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
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
1,200+ PEOPLE ALREADY JOINED ❤️️
Get fresh posts + news direct to your inbox.
No spam. We only send you relevant content.