Draw attention with Visual Hierarchy
Everyone familiar with Figma knows about the Figma Community, for those who don’t know Figma community is a hub for Figma users where you can find resources like files and plugins, that you can download and start your next project with and get a bit of fast forward for it. In this blog, I’ll list some of the most useful plugins from the Figma community that helped me in my design process and could improve your design workflow too.
Wireframe
This is a very useful plugin when you are planning your designs in the initial stages to get an idea of what you are designing. Wireframe provides a vast set of wireframes for creating beautiful wireframes, user flow, prototypes, and basic structures, so no other kits, files, or skills are required! You can just drag and drop to add it on Figma - it’s also useful for quick brainstorming and project ideation.
Wireframe has got a vast collection of wireframes for Desktop, Mobile and tablets and with different colour schemes which would meet the personal needs.
Contrast
Right Color Contrast always plays a very important role in any design from UI to graphic design. The contrast makes it easy to check the contrast ratios of colors as you work. Select a layer and Contrast will immediately look for the color directly behind your selection and serve up the contrast ratio along with passing and failing levels from the Web Content Accessibility Guidelines (WCAG).
Contrast Plugin Comes with a scan feature where it automatically scans the whole page for contrast issues.
Content Reel
Content Reel is Plugin by Microsoft Design to design layouts quickly and easily by using text strings, images, and icons all in one plugin, and you can your own custom set of images text, etc. Just select the text or image placeholder in your designs and apply in one click.
When it comes to some advantages, Content Reel has an option to create custom content where you can add your own names and photos that you use frequently in your designs which makes the overall process more seamless.
Vectary 3D
3D is the latest UI Trend that everyone wants in their design, plugin like Vectary 3d make it easy to import 3d assets to Figma. Vectary 3D plugin is powered by Vectary - the easiest online 3D design tool and sharing platform made for 2D designers where you can create, import 3D assets and use those 3d assets directly in your design.
Here is the walkthrough for creating custom 3D Designs in Figma.
Vectary allows you to add your own custom 3D mocks and it can be used in figma directly.
One downside would be, it is still a new tool there are still bugs to fix in the web app which some time make you difficult to add custom mocks and you are allowed to have only 20 free projects in vectary.
Morph
Designing complex effects in Figma was an uphill task but this plugin makes things simple, within one click we can create awesome effects like Skeuomorph, Neon, Glitch, Reflection, Glass, Gradient, etc. right in Figma!
Here is the video that shows you the awesome things you can do with this plugin.
Morph is one of the only plugins in the community with vast options of effect and works perfectly. At the same time, it has limited options for colors you can only use from the 5-6 available color options.
Image Palette
We are always amazed by the colors in photos maybe of nature, Animals any art piece. Image Palette plugin extracts a color palette of 5 different colors from the selected images. So any time you come across a good image and plan it to apply in your designs this is the go-to plugin.
It does a pretty good job to extract colors from images but when it comes to images with multiple colors it doest give accurate results.
Handy Components
Whenever you need any design elements handy Components is go to plugin to instantly drop useful components straight onto your canvas with full auto layout support. It has lots of useful components like buttons, toggles, cards, etc which you use in your day-to-day design. But it has a very limited collection of components to use from.
Phosphor icons
There are many icon plugins in Figma but Phosphor icons is my go-to plugin for icons. It has various weights: Thin, Light, Regular, Bold, Fill, and Duotone, which you just drag and drop to your designs.
Color Compass
Instead of eyeballing and color picking randomly from the entire spectrum, simply feed a base color to this plugin to generate tints, shades, tones, and complementary colors. Increase or decrease the step value to hone in on the exact shade you want. Experiment with different swatches and update elements on the fly directly from the plugin.
Find & Replace
Just imagine a scenario where you have finished a design and there is a word to be corrected in your design and the word is used in over 100 design frames it would drive anyone crazy to replace those 100 words that’s where the Find and Replace Plugin is a lifesaver where you can just type in the word to be replaced in design and within one click all 100 words are replaced.
Image Tracer
Convert any white and black bitmap images to vectors using the Image Tracer plugin. This plugin saves you the time you’d manually trace with the pen tool or use Illustrator to convert to vectors. On running the plugin, you will see a console on the window with options to help you make edits to your taste.
You can through this tutorial about how this plugin can be used.
Image Tracer does a good job only for simple vectors and its hard to have good vectors with multiple nodes.
Similayer
If you are familiar with select all command in Figma this plugin takes its built ‘Select all with…’ command to the next level. by selecting similar layers; based on a whole range of properties.After selecting a layer, run this plugin to select all other layers based on specific properties. You can select multiple!
Conclusion
There are still loads of plugins for different use cases in the Figma Community. You can take a look through it and install plugins that you think will make your design workflow easy.
