Top 10 InVision Studio features

Reading Time: 6 minutes

The most anticipated designing tool ‘Studio’ by InVision was launched in 2018 for MacBook users. Later, it was released for Windows as well.

After using what InVision for a couple of months, designers at Octet Design Studio bring you its top 10 features.

Let’s explore each feature one by one.

1. All in one platform

Studio isn’t just a design tool. It also enables rapid prototyping and advanced animation unlike any other tool in the market. There are several tools for UX design like UXpin, Webflow, Sketch, Balsamiq, Atomic, JustInMind, Axure, Adobe Photoshop, Adobe Illustrator, Principal for Mac, Mockup plus, Vectr etc. But they have specific functionalities. For Eg. Balsamiq is used for creating wireframes while Photoshop & Illustrator are used in Graphic designing. InVision’s Studio offers an all in one platform to perform all of the UX design functions. Out of all the InVision studio features, we love this the most

Tools available in the market are quite fragmented and usually lead to a disjointed, disorganized workflow. However, Studio’s all in one platform has made the workflow extremely clutter-free allowing users to create very high-fidelity prototypes in just a matter of minutes.

With just a few clicks, designers can bring the static screen to life as it allows users to rapidly connect and animate interactive elements. While animations can be detailed and robust, Studio helps in linking things together early and often. With Studio, designers can save a lot of time as well as create seamless designs.

2. Vector-based design for high quality & adaptive to responsive design

Design tools available in the market offer both pixel and vector-based graphics. While the pixel-based designs are made from lots of tiny physical squares, the vector-based graphics use mathematical equations that calculate where the edges of the shapes sit in relation to each other. With pixel-based graphics, images tend to be of low quality as compared to the mathematically calculated vector-based designs.

The Studio tool from InVision allows users to insert images either by inserting pixel values or mathematically calculated percentage values that can also create high-quality designs. And the best part is, by using the vector-based method and inserting percentage values, users can create designs that are adaptive to different screen types.

According to a report, 83% of mobile users say that a seamless experience across all devices is very important. With Studio’s ability to create vector-based high quality and responsive designs, we are sure that is going to make a mark among the design community as well as the end consumers.

3. Components to reduce rework

While designing a project, there are a lot of elements that get repeated throughout. It is crucial from the UI point of view that these repeated elements remain consistent from screen to screen. Such elements can be set ‘Components’.

These components can allow the designers to manage the appearance and properties of the repeating layers from a single centralized instance called a “Master”.

No matter how many instances of a component are used throughout the design, they can all be updated instantly, simply by editing the Master. This can save hours of time of the designer and avoid the tedious work of updating things like buttons and icons. It can help in creating flawless consistency throughout the project.

4. Simple & rapid prototyping

As mentioned before, the Studio tool by InVision not only creates designs but also allows the user to create prototypes instantly on the same platform simply by linking two or more screens together. This process has been explained in detail in the tutorial video on the InVision Studio website.

5. Detailed motion & animation tool

After the creation of a prototype, it enables the designer to further improve the fidelity of the prototypes by using the Motion transition feature.

When applying the Motion transition to an interaction, Studio automatically links up the matching layers between the source and destination screens and animates the differences. It is one of the unique features of this tool since there is no other tool in the market where one can design, prototype and animate on the same platform and with so much ease.

6. Sharing design system & libraries

At any point in the design and prototyping process, Studio allows the user to sync directly to the InVision account to share and collaborate on the project by creating design systems.

Once the designer has synced to InVision, they can view the prototype, gather feedback from stakeholders, and get developers what they need to begin building.

7. Freehand tool & commenting tool for live collaboration

Prototypes created in Studio are super easy to share and test with clients. Like InVision Craft, Studio also has the option of Freehand. It is an infinite, collaborative space for the entire team to work through design ideas in real-time. With Freehand, one can;

• Add artboards or images from Sketch and Photoshop
• Hand off control to the teammates
• Co-draw to share sketches and rough ideas
• Undo, redo, and scale
• Comment to share your feedback
• Save and share your work

By using Freehand in Studio, anyone involved in the design process can give their input on the prototype.

When the designer is ready with the initial design, they can simply click on the share button and send it anywhere they like. Anyone with the link to the prototype can view it and leave comments or feedback. The transparency among the team and client right from the prototype phase can help in creating a better collaborative design. Hence, getting inputs from the team and keeping the client in the loop saves a lot of time and effort for both.

8. Developer friendly- ready to use codes on multiple platform & export assets

The designer can share a direct link through which the developer can easily access the same prototype the designer has been working on.

The developer simply must head down to the Inspect tab on the toolbar at the bottom of the screen. It allows the developer to view the measurements, grab colours, look at fonts, even select individual objects to grab assets. Further, they can browse through all layers in groups, and then head over to the Code tab to grab codes from their preferred language.

The best part about Studio’s share function is that every time the designer syncs from Studio, the developer/s will get the latest assets and code—so that everyone can build better, faster and together.

9. Import & run sketch files

In the Studio tool, it is obviously easy to start a completely new project. Even if there is an ongoing project created in the Sketch app, it allows the opening of that file too. One can easily open a Sketch file, pick up right where they’ve left off, and begin prototyping in Studio immediately.

It is as easy as copying the Sketch file from the Sketch app and pasting it on Studio. It opens everything as it is—the artboards, text layers, images, and all symbols as components, it brings over everything. Even when there is no need for the entire document, it is still possible to bring in the individual elements.

10. 3rd party apps for assets, libraries, productivity & collaboration

Studio provides an open platform for user-created add-ons and kits delivered through their app store. One can easily link other applications they use across the web for design and save time.

It prevents the user from having to search for every image or element on a new website. Instead, it allows linking of external websites and apps to directly import the elements and work faster.

Final thoughts

Invision Studio has many great features but the above ones appealed to us the most.

With InVision Studio, there is a huge scope for designers to get even more creative and create high-quality designs quickly. The designers at Octet Design Studio highly recommend you try it out. Also, it is free of cost!