Verve Search logo

7 helpful Figma plugins for designers

Figma is evolving at an incredible rate. With a recent edition of FigJam and updates such as Cursor Chat and Audioeditors and viewers can collaborate even more effectively, saving time and resources.

One of the best things about Figma is the ease with which you can install all sorts of incredibly helpful plugins. If you’re new to Figma, it can be hard to know where to start – so here’s my guide to the best Figma plugins of 2021.

Master

Are you wanting to attach objects to an existing component or merge two main components? No problem. This plugin can help create, clone, and move components without losing overrides. While it might take some time to master this plugin, it’s absolutely worth it. Find out more about Master here.

Convertify Figma to Sketch/XD

In a previous blog, I touched on the differences between Figma and Adobe XD. For those designers that still have to toggle their design work between the two platforms, you might find the Convertify Figma to Sketch/XD plugin very useful. It easily converts and exports your design files from Figma to Sketch, Adobe XD, or After Effects with one click.

Adee Comprehensive Accessibility Tool

Adee is the plugin for you if you need to test your design out for accessibility. Adee is a powerful tool that offers a wide range of functionalities, including the game-changing colour-blind simulator. This feature lets designers select their design frames and preview them in eight colour blind modes within the Figma app.

Find / Focus

Alright, we’ve all been there – the larger the project, the harder it is to find that one layer. The Find / Focus plugin solves the difficulty of manually searching through endless layers in your document with its find, select, and zoom feature. Just type the layer name into the search window and refine your search with additional regex or case sensitive options.

Status Annotations

For those who use Figma’s free Starter Plan or like to keep all their design versions on one page, Status Annotations could be a helpful plugin addition. Although the status labels are quite small, this plugin does the job. It indicates the status of the design process for any selected element – a collaboration feature we needed!

Font Scale

Fonts can be difficult at the best of times, especially for those who are just starting out in design. Font Scale helps designers achieve harmony and consistency in a typographical hierarchy. With several scale factor options to choose from, Font Scale generates font size previews.

Figma Chat

As previously mentioned, Cursor Chat does a great job as an instant messenger within Figma; it’s innovative and super helpful for collaboration work. However, if you are looking for something a bit more old school, the Figma Chat plugin is a great option.

This plugin lets you communicate with other people inside the Figma file. You can also select a frame or an element and attach it to your message so that the recipient can find that element quickly.

Final thoughts

As we’ve discussed in a previous blog post, the design team at Verve Search uses Figma because of the sense of community that the platform encourages with features that allow for enhanced collaboration between creatives. If you’re new to UX and UI design, check out our selected plugins to see how they can work for your workflow and improve the collaboration on your team.


Interested in our content marketing and digital PR services? Get in touch.

Figma vs Adobe XD: which tool should you design with?

With remote working presenting new challenges to our creative process and our production team wanting to experiment with new design features, we’ve recently switched to a new design tool. But which option would work best for you?

In 2016, Figma introduced an innovative browser-based interface design tool. The same year, Adobe Inc. released its own version of a UX design tool: Adobe XD.

Alongside other popular editing software options such as Sketch, both Adobe XD and Figma have evolved into competitive design platforms, and our production team decided to investigate the pros and cons of each. Here’s what we found:

Platform and performance

The most obvious difference between the two platforms is that Figma is browser-based, whereas Adobe XD is a downloadable desktop application.

Adobe XD allows users to work with local files offline. It also allows users to share and get feedback on their design, thanks to its cloud capabilities. In its recent update, Adobe took a step further and XD now integrates with apps and services across the Creative Cloud suite. This means that sharing assets between apps and users with Creative Cloud Libraries is now easier.

Some might assume that Figma’s browser-based approach to designing is limited to internet connectivity. However, Figma allows its users to work offline on a pre-opened file via a desktop app (available for both Mac and Windows).

When comparing the two, it all comes down to individual preference and work style. However, working on a browser-based platform like Figma definitely has some advantages when it comes to collaborative work and live updates.

Pricing

Both Figma and Adobe XD offer free and subscription-based pricing options. XD’s single-app plan for professionals and small teams costs £9.98 per month (without a trial) and is free for personal use. Figma’s pricing options break down as follows: free for personal use; $12 per editor/month on the Professional Plan; and $45 per editor/month on the Organization Plan (annual billing only).

It’s worth mentioning that Figma’s free version allows unlimited editors on 1 project and 3 team files, as well as a 30-day version history, unlimited cloud storage, and unlimited viewers. Adobe’s free starter plan only allows for collaboration on one shared document and one additional editor, limited cloud storage (2GB), and a 10-day version history.

Here a more detailed view on the price differences between the two:

Click to expand table

Features and functionality

Figma and Adobe XD are becoming more similar in terms of features and functionality. Each platform seems to adopt something new with every update. For example, Adobe XD has been working hard to achieve something similar to Figma’s game-changing collaboration features. On the other hand, Figma only recently introduced its Smart Animate feature, which is very similar to the Auto Animate feature that Adobe XD introduced some time ago and changed the prototyping experience completely. However, there are still some visible differences in workflow. Let’s discover them below:

Figma Pros:
Free unlimited viewers without registration
Free collaboration with live-work updates from team-mates
Unlimited cloud storage
Browser-based (no installation required)
Observation mode makes it easy to follow team-mates
Overlays capability
Export assets (PNG, JPEG, SVG, PDF)
Gradient Smart Animate transition
Border gradient feature
Dynamic overlays allow multiple layers of an interactive content
Deep selection tool makes the workflow more efficient
Sketch import
Pages in file capability
Custom frames
Multiple shadows capability
View prototypes on device placeholders

Figma Cons:
Safari version bugs (e.g. cursor doesn't update)
It takes time to create a set of repeated elements
It is time-consuming to design scrollable UI elements (e.g. image carousel, interactive maps)
Projects need to be opened in a browser or Figma app online before working on them offline
Interactive components not yet available
Interactive components not yet available

Adobe XD Pros:
3D Transform (shapes, text, groups)
Repeat Grid makes it faster to create a set of repeated objects
Scroll Groups makes it easier to design scrollable design elements
Voice prototyping (e.g. voice commands, build-in speech playback, sound with the voice-enabled feature)
Component states (e.g. hover state, selected state)
2 video exports (Unlimited until June 2021)
Adobe Fonts Access (Basic Library)
Export assets (PNG, JPEG, SVG)
Import from Photoshop, Illustrator, and Sketch
Record videos for prototyping and interaction previews.
Custom passwords to Share Links and Design Specs for enhanced security.
Share individual boards
Collaborative plug-ins (Workfront, Asana, Monday.com)
Toggle state shortcut

Adobe XD Cons:
10-day version history (free plan)
Registration required to view documents
Limited cloud storage
Co-editing feature fee for corporate use (£9.98 /per month)
Cannot Auto Animate gradient transition
No border gradient feature
Not as intuitive when selecting multiple elements
2 PDF exports (Unlimited until June 2021)
Pages in file capability (upcoming feature)
Collaboration on a separate file
Click to expand table

What are we using at Verve Search?

At Verve Search, we’ve chosen Figma over other prototyping design options.

Here are the five reasons we decided to go with Figma:

1. Figma is free

Team accounts are paid but individual accounts are free and include all the same key features as the paid version.

2. Simpler developer handoff

Our developers can get dimensions, styles, and download icons and images from the project URL. Resources such as images and SVGs can be exported globally and locally.

Image illustrating development stage. A design is overlaid with a box showing CSS code being edited.

3. Easy collaboration

Co-designing alongside your co-workers is no longer a fantasy. Our team can now edit files together in real-time, leave comments with mentions, and follow along via Observation Mode. This has been particularly useful for remote working.

Image illustrating collaboration. Multiple users' cursors are hovering over a prototype design

4. All-in-one platform

It’s an all-in-one platform that does not require switching from one system to another in order to complete or share the design process. Designing, prototyping, reviewing work, and sharing feedback are all in one place.

Image illustrating user hovering over Figma software window, prototype view window, and a selected design element

5. Design features

Tools like ‘deep selection’ provide more control over design elements and save time during editing. Other features that our team enjoy working with are instant arcs, overlays, gradient borders, smart animate gradient transitions, and much more. Figma helps our designers to expand their creative ideas and showcase their visions throughout the design process.

Image showing the user's cursor selecting a design element.

Final thoughts

Figma made the right choice to focus on collaborative work and the ability to access files from the browser without installation, while I find that XD’s strength is in finding new design processes, such as Scroll Groups, 3D Transform, and Repeat-Grid features.

Only time will tell which platform will gain more recognition among designers. So far, Figma and Adobe are doing well at listening to user feedback and transforming it into real features, bringing visual design onto another level.

Features and images presented in this article are extracted from the official websites of Figma and Adobe. Figures for both are correct as of May 2021.


Interested in our content marketing and digital PR services? Get in touch.