Figma vs InVision in 2019 – Comparison UI Design Tools

User interface design tools help designers build robust prototypes and mockups fast without having to use multiple tools. While there’s a growing number of such tools available online, only a handful can compete with each other feature-wise. Let’s see how Figma and InVision, two popular UI design tools, compare.

In this article you’ll learn about:

  • What are the US design tools and why do you need them for your projects?
  • Figma vs. Invision similarities 
  • Figma vs. Invision comparison: what’s best for you?
  • Who’s using which tool? Companies you definitely know 
  • Practical informations that will help you decide  

What Are UI Design Tools?

UI design tools let designers prepare mockups, wireframes, prototypes, interfaces, animations, and, of course, designs. And here’s what designers can use them for specifically:

  • Building UI navigation patterns (visual touchpoints)
  • Preparing design handoffs to facilitate collaboration with developers
  • Defining how interactions look like (prototyping)
  • Collaborating further improve designs and gather feedback

The market is quite saturated with UI design tools, either coming as full-feature workhorses or as task-specific tools. Some of the more popular UI design applications include:

In this comparison, we’ll be focusing on just the last two: Figma and InVision (enhanced with InVision Studio for additional features). The InVision app alone provides only a fraction of the features that Figma does (it’s a prototyping app: designs have to be imported from either Sketch, InVision Studio, or as standalone files). Pairing the InVision app with InVision Studio gives designers access to a self-contained ecosystem.

 

Figma and InVision: What’s the Same

Let’s start this comparison by listing out what the two tools have in common:

  • Nested components support
  • Visual structuring of layers and pages
  • CSS-like values for layers
  • Ability to set responsive layouts
  • Creation of static UI screen designs
  • Free basic plan
  • Third-party integrations with popular apps and platforms

Popularity and Launch

Figma went online in 2016 and InVision hit the market in 2011 (with InVision Studio joining the game in 2018).According to the 2018 Design Tools Survey based on 2,800 designers, Figma is used more often than InVision for designing interface.

 

 

Most popular tools

The most popular UI design tools. Source: UXtools

 

But when we look at the tool of choice for prototyping—InVision beats Figma here with almost twice as many votes:

 

Most popular tools prot.

The most popular prototyping tool. Source: UXtools

Toolset & Ecosystem

With the introduction of InVision Studio, a complementary application that lets designers create their own design screens, InVision became a holistic solution for designers.

That said, InVision’s ecosystem is vast, with a broad variety of task-specific tools and third-party integrations.

Figma, on the other hand, offers all the features of InVision in one place, accessible from the web-based app.

It all boils down to convenience: with InVision, you will have to switch from various tools, import/export files and libraries you want to work on. Moreover, InVision Studio is only available for macOS and Window (no browser-based access). With Figma, the workflow is more streamlined and the tool is platform independent, although Figma does come with a desktop app for Windows and macOS.

 

Animations

Figma has to be integrated with Principle for animation features. And there’s a caveat—Principle is available for macOS only.

InVision Studio has pretty decent timeline animation features, something only UXpin can boast about among the biggest players in the realm of UI design tools.

Timeline Editor in InVision Studio. Source: InVision

Collaboration

Figma boasts real-time collaboration similar to that of Google Docs. After setting granular permissions to anyone who can access a Figma project, the team can edit the design together on the go. Granular permissions ensure that no one unauthorized will alter the project in any way.

Figma-write-new-comment

With Figma you can write live comments in your mockup.

While the InVision app has commenting options, it doesn’t have Figma’s “multiplayer” collaboration capabilities. Moreover, the work you do in InVision Studio has to be uploaded to the InVision app to take advantage of collaboration and feedback features.

figma people

Figma toolbar shows who is actually working on the same file.

Version Control

Here Figma is again similar to Google Docs—there’s automatic history available for review and optional return to a previous state.

The InVision app doesn’t have this option.

 

Components

Figma creates a visual thumbnail of each component in the library. Component overrides can be conveniently set in the layer palette on the right. Figma lets designers customize many layer variables such as colors, fonts, text alignment, opacity, and many more.

Figma component overrides. Source: Figma

In InVision Studio, there is no visual overview of components—you have to navigate through the list by component name. When it comes to component overrides, the feature is very similar to that of Figma, except it offers less customizability in layer properties.

 

Performance

While the InVision app is on par with Figma performance-wise, InVision Studio has some slight but noticeable issues. With medium to complex prototypes, users experience choppiness and slow response time. This issue has been raised by the InVision community.

Figma wasn’t a stranger to performance issues in the past. However, with the release of a few updates, the tool became consistently responsive and is now rendering designs smoothly, even when multiple people are working on the same file.

 

Team Sizes and Projects

Since Figma is famous for its multiplayer editing, it will be a good choice for rapid prototyping and fast iteration in larger teams and big projects. In an enterprise environment, open collaboration and streamlined workflow available in Figma can significantly increase efficiency.

Figma-permissions

Figma leaves you to share your document to your team and give different permissions to all of them.

That’s not to say InVision is for small teams only. Quite the contrary—many internationally recognizable brands use InVision in their design processes.

Companies Using Figma and InVision

Figma is used by:

  • Microsoft
  • Twitter
  • Dribbble
  • Slack
  • Dropbox
  • GitHub

The following brands have adopted InVision:

  • HubSpot
  • LinkedIn
  • Sony
  • Visa
  • GoDaddy
  • Atlassian

SVG Imports

There’s an ongoing problem with importing SVG files to InVision Studio. Here’s more on the official InVision Studio thread. While not a major flaw, this is a serious consideration for teams that use SVG files heavily in their projects.

So far, there are no such problems present in Figma.

 

Figma vs Invision Pricing

Figma subscription plans:

pasted image 0-3

Figma pricing. Source: Figma

 

 

The InVision app with InVision Studio:

pasted image 0-4

Pricing. Source: InVision

InVision Studio itself is free to use.

 

Finally – Figma or Invision? The Choice Depends on Workflow Preference

The biggest difference between Figma and InVision seems to be the style of collaboration. Figma offers a rich, real-time collaborative experience in designing UI, while InVision favors a somewhat isolated design workflow, with changes introduced upon feedback.

The choice of the UI design tool essentially boils down to project needs, workflow preference, and experience of designers in a particular tool. That said, switching from a long-standing setup made of Sketch + InVision + other complementary tools to Figma is an endeavor not every company or team is wishing to go through. A tool switchover requires a large amount of learning that can last months.

If you are still not decided on what tool you want to go with write us – we would love to help you!

SUBSCRIBE our NEWSLETTER

Are you interested in news from the world of software development? Subscribe to our newsletter and receive a list of the most interesting information once a week.

Add comment