The meaning of the design system is: a collection of fundamental elements and reusable UI elements useful for both designers and...
Figma vs InVision in 2020 – Comparison UI Design Tools
In this article you’ll learn about:
- What are the UI 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 information 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.
But when we look at the tool of choice for prototyping—InVision beats Figma here with almost twice as many votes:
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 Windows (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.
Figma has to be integrated with the 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
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.
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.
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.
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.
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.
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
The following brands have adopted InVision:
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:
The InVision app with InVision Studio:
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.
When your customers land on your product page, it’s only half the success. Now you need to make sure that...
Yup, there is a beauty cult that rules the world. Not only in fashion, beauty or art but in almost every...