photo by SCAVENGEDLUXURY in tumblr.
photo by SCAVENGEDLUXURY in tumblr.

Awesome Figma Plugin

5 min read
––
about 1 month ago

Well, I can say myself is quite Figmaniac (people who use Figma to get things done on anything 🥴) haha. I've been using Figma almost a year since I'm stepping into this User Interface Design games. My first impression using this tool is kinda "hmmm strange, I don't think I'm going to like it." because it's strange to design in web browser. All I imagine designing with it was like Canva things haha. Totally strange.

But that was only last for few days and I'm never feel so wrong before this. YES. after a week using it everything was clicking. Somethings that made me feel working become easier is their collaboration system. Figma truly in their straight way to be the best Collaboration Tool. Very glad my environment told me to use this tool way back then.

After using it for few month and feel so helped with this tool, Figma released their plugins feature. I don't know, this is something top-notch feature from Figma. I've been using Adobe Xd but their plugin is something that I'd rather would not use 💆🏻‍♂️. And until today I always rely on Figma plugin's to finish my task or anything else.

Personal recommendation.

If you're designer especially focusing in User Interface Design or User Experience, I would like to share my recommendation of Figma Plugin that helped to speed up my workflow ✌️

💡Oh right, in case you don't know this. You can access plugin easily by hitting "Cmd" + "/" in Mac, or "Ctrl" + "/" in Windows. And then just type their name.

Unsplash

image / resources –– The number one most downloaded plugins in Figma. I think there's no one on this platform who don't know about this plugin 💆. Unsplash is one of many site that providing free image resources, and they're support high resolution image. God bless Unsplash.

🔖here is some tips. I still see many felows run this plugin one-by-one selecting layer. You can select many rectangles/layers to fetch multiple image from unsplash.

Color Palettes

color / resources –– Sometimes I want to try new color to put on my exploration design but I don't want to spend too much time searching on the web. Well, I really glad this plugin exists. Color Palettes plugin provides you many interesting color palettes to try. I know this color palettes sometimes not quiete good, If I have some spare time I would like to jump on Adobe Color instead. This is for quick design.

Webgradients

color / resources –– Still talking about color, but this one is gradient color palettes. Webgradients plugin generate soft-pastelish gradient color. I really like their calming tones. Check it on Figma. Oh yes, they have web version, take a look here webgradients website

Chroma Colors

color / utility –– After searching for some color inspo, usually I create my on palette. Defining color for your design is such exciting parts. But when you have very much colors on your canvas and you want to make a style from it, well it's going to take time. This is Chroma Colors take big part. Just select all your color, and then run this plugin.

🎯Another tips, befor you create style with Chroma Colors, better to rename it first with bulk rename to keep them in sections. Just like how you rename Components. ex: "Highlight / Magenta" and "Highlight / Cyan" will be grouped into "Highlight" section.

Similayer

layer / utility –– When working in Figma, layers often grew uncontrollable. And I usually forget where it does, or sometimes I wanna select many layers with same properties like name, or color, or text size. With this plugin, you just need to select what property you want to be filtered.

SmoothShadow

shadow / utility –– Straight to the point, this plugin generate you multi layered shadow with flexible adjustment. You can add/reduce layer, change blur, offset, and opacity. The control quite unique, they use curve to control its value.

Contrast

accessibility / utility –– There's plenty plugin to check contrast in Figma, some of theme are Stark and Contrast. Many people choose Stark to check contrast ratio, but I personaly prefer using this plugin. Contrast automaticaly detect update layer focus. Their value change if your select another layer. While Stark, need to re run everytime you select new layer. 😬

Swap Layer

layer / utility –– replacing one layer with another layer nested inside another layer is such pain. Imagine you have deep nested layer, rather than paste-then-delete, you can use this plugin. Select two layer you want to swap. And then run this Swap Layer plugin. Voila 😻

Cofetti

layout / utitlity –– don't want to spend designing doodly-decoration for your background? well you just need to define some shape, select them, and then run Cofetti. Boom, your background full of decoration🎰

Blush

illustration / resources –– I CAN'T HELP WAITING FOR THIS PLUGIN RELEASED. Blush is a plugin to generate illustration with plenty customization like scene, color, hair, pose, etc!. But to use svg customization you need the premium plan 😣. Still their free plan is enough for mini project 🤤

Super Tidy

layout / utility –– Figma builtin feature tidy up is great, but sometimes it doesn't work if layer position pretty messed. Yet, with this plugin you can easily tidy up you layer no matter how messed it is.


That's all folks! 🤪 the list will be updated whenever I found some new useful or interesting plugin. 🎒Thanks for reading!