Figma: Five Fantastic Plugins for UI Designers

Elevate your UI design skills with this selection of five powerful and essential plugins

Figma: Five Fantastic Plugins for UI Designers
Make Figma even better with these five plugins

Having been a designer for 10 years now, I've seen design tools come and go. It wasn't long ago that Figma was the scrappy newcomer, vying for Sketch's crown. Figma however appears to be here to stay and stands as the de facto standard for creative minds, offering an array of tools that bring digital interfaces to life.

Yet, what truly elevates Figma's prowess is the remarkable universe of plugins it harbours. Finding and incorporating the right plugins into your daily workflow can be an absolute game changer.

Whether you're a UI Designer steering a startup towards its first website or part of a twenty-strong design team for a multinational organisation, Figma + awesome plugins, will change how you design for the rest of your career.

Sound too good to be true? Well, I'm here to prove to you that the synergy between Figma and these plugins is not a myth but a tangible reality.

Let's go!

Beautiful Shadows

Tired of trying to create the ideal shadow in Figma all by yourself? Fret not, because Beautiful Shadow has you covered.

This handy plugin lets you create lovely shadows with ease. Just drag a 'light source,' and it'll cast shadows on your selected elements. It's a simple way to add a touch of elegance to your designs without any fuss.

Beautiful Shadows preview
Light source on top, shadow on the bottom. Beautiful. Source: Beautiful Shadows

Install the plugin from the Figma Community.

Phosphor Icons

Phosphor Icons, a versatile icon collection, is your go-to resource for enhancing interfaces, diagrams, presentations, or virtually any creative project. It's a multi-purpose toolkit that effortlessly elevates the visual appeal and functionality of your work, making it a must-have addition to your design arsenal.

This is, and has been for a long time, my go-to icon plugin for Figma.

Whether you're sprucing up a website, adding clarity to diagrams, or giving life to presentations, Phosphor Icons has your back with its adaptability and broad range of applications.

The Phosphor Icons website. Beautiful.

Install the plugin from the Figma Community or visit the Phosphor Icon website.

Unsplash

What is there to say about Unsplash? Around for a long time, Unsplash is now one of the top dogs when it comes to license-free photography websites in the world. You'll be hard-pressed to not find appropriate photography for your projects.

Unsplash preview
1000s of beautiful images for free? Be sure to credit any work you use.

Install the plugin from the Figma Community or head over to unsplash.com to bask in the glorious images by some of the most talented photographers in the world.

šŸ’”
If so some reason you're not a fan of Unsplash, we'd recommend trying Pexels, another phenomenal license-free photography website with 1000s of photographs to choose from.

A11y - Color Contrast Checker

To ensure text is easily readable for all users, all designers should follow Web Content Accessibility Guidelines (WCAG) standards. Although you can insert a hex code into an online contrast checker, doing it right within Figma is a faster and more efficient option.

A11y - Color Contrast Checker examines the colour contrast ratio of text within a frame and offers insights regarding its compliance with WCAG's AA and AAA levels. Additionally, it includes colour sliders, allowing users to tweak colours and see real-time changes in the contrast ratio.

šŸ’”
Please note that this plugin currently supports single, 100% solid fills. Some known issues exist with background layer detection, which is due to its current limited support for the mentioned feature.
A11y - Color Contrast Checker preview
On the left, is a series of cards with varying degrees of contrast. On the right, are the details. Source: Contrast Checker

Install the plugin from the Figma Community.

Annotate Design

Annotate Design is a plugin that expedites the process of adding annotations to your designs. It's not just a time-saver; it's a vital conduit for effective communication.

Annotations play a pivotal role in making your creative vision comprehensible to stakeholders and engineers. They serve as the guiding light, offering clarity to stakeholders, aligning their objectives with your design choices, and providing engineers with a clear roadmap to faithfully translate your vision into a tangible product.

This plugin acts as your communication ally, ensuring a seamless journey from design concept to real-world execution, making you not just a designer but also a proficient communicator.

Annotate Design preview
Become the best communicator in your team, with Annotate Design. Source: Annotate Design

Install the plugin from the Figma Community.