Master the power of InVision Studio

Explore the ins and outs of InVision Studio, and discover techniques and tips for transforming your designs into powerful concepts. In just minutes, you’ll learn the fundamentals of Studio, the nuances of advanced animation, the simplicity of collaboration, and much more.

Start course

Joseph Angelo Todaro

Video Producer

Details
  • 18 videos
  • 64m
Here’s what we’ll cover in this course:
  • Getting to know InVision Studio
  • Importing from Sketch
  • Screen Design Fundamentals
  • Rapid Prototyping
  • Advanced Animation
  • Designing with Components
  • Collaborating with InVision Cloud

Course outline

Welcome to InVision Studio

Welcome to InVision Studio, the world’s most powerful screen design tool.

2:39

A quick tour of InVision Studio

Let’s take a moment to get familiar with InVision Studio’s layout and tools.

4:54

Importing from Sketch to InVision Studio

Studio happily imports your Sketch files so that you can pick up where you left off without skipping a beat.

1:27

Adding and editing text layers

Great typography is a pillar of excellent design, and Studio gives you the tools you need to make strong typographical decisions.

9:31

Managing layers

As projects scale and documents become densely populated with elements, it becomes increasingly important to stay organized and agile.

4:03

Masking layers

Masking is a powerful way to keep design elements contained within a specific area or shape.

4:55

Using boolean operations

Using boolean operations, it’s easy to produce complex vector shapes by combining simple design elements.

4:46

Scrolling artboards

When the content of your screen design exceeds the boundaries of a device’s physical size, Studio solves the problem with easy-to-make scrollable artboards.

2:42

Rapid prototyping

It’s never too early in a project to begin prototyping and testing the experience of interacting with your product.

2:54

Previewing on a device

It’s fast and easy to preview prototypes within Studio, but previewing your work directly on your device offers a much more tangible view of your interactive design.

1:17

Advanced animation using motion

When you’re ready to take the fidelity of your prototypes to the next level, the Motion transition allows complete control over the transition that takes place between each and every layer of your screens.

4:16

Fine-tuning animations with the Timeline Editor

Using the Timeline Editor, we can pinpoint the perfect timing and duration for each layer to create meaningful context through motion.

7:14

The timer trigger

When designing complex experiences and animations, you may want a transition to begin automatically, without the user taking action.

2:40

Creating, adding, and editing components

Components save countless hours of work by keeping the appearance of repeating design elements in sync with one another.

3:01

Component overrides

Where there are rules, there are exceptions. Component overrides allow us to make visual exceptions to component instances for incredible flexibility.

3:16

Component resizing

Using percentage based measurements and anchoring, components can be made scalable and responsive for even more… well… flexibility.

2:34

Shared design libraries

Shared design libraries allow any Studio document’s component library to be a single source of truth — propagating changes to all files using those components.

7:05

Syncing, presenting, and sharing

Once you’ve synced to InVision, you’ll be able to view your prototype in all of it’s animated glory, gather feedback from stakeholders, and get developers what they need to begin building.

2:56

Transformative collaboration for all the work you do