InVision Essential Training: Studio

1h 16mBeginner2018-09-19

Authors

Drew Bridewell

Lifelong learner who practices product design on a daily basis

Course details

InVision Studio—a powerful tool for comprehensive screen-based design projects—was built to meet the demands of the modern product lifecycle. Studio offers features that allow designers to collaborate with their teammates and tackle design, animation, and prototyping, all in one solution.
In this course, learn the fundamentals of this powerful tool. Instructor Drew Bridewell covers the basics of the Studio interface and shares best practices for transitioning from Sketch to Studio. Learn how to leverage the product's vector-based drawing features, add and edit animations and components, work on responsive designs, share and collaborate on projects, and much more.

Learning objectives
Navigating the interface
Best practices for importing from Sketch
Drawing, editing, and formatting shapes
Managing layers
Rapid prototyping
Advanced animation
Percentage-based scaling
Creating, adding, and editing components
Sharing and presenting your work

Skills covered

InVisionUser Interface PrototypingUser ExperienceEssential Training

Concepts

0. Introduction

01 - Design, prototype, and animate all with InVision Studio
02 - Keeping up with InVision Studio
03 - Ongoing updates, resources, and handouts

1. A Tour of Studio

04 - The welcome window
05 - The anatomy of a document
06 - A tour of the interface
07 - Saving Studio files

2. Importing from Sketch

08 - Importing from Sketch to InVision Studio
09 - Copy and paste from Sketch to Studio
10 - Best practices for importing from Sketch

3. Screen Design

11 - Adding and editing text layers
12 - Drawing, editing, and formatting shapes
13 - Managing layers
14 - Using Boolean operations
15 - Masking layers

4. Rapid Prototyping

16 - Linking screens
17 - Previewing your prototype

5. Advanced Animation

18 - Using the Motion transition
19 - Editing animations with the transition editor
20 - Linking layers with the transition editor

6. Working with Components

21 - Creating, adding, and editing components
22 - Component overrides
23 - Additional tips with components

7. Responsive Layout

24 - Pinning elements
25 - Percentage-based scaling
26 - Toggling between different devices

8. Collaboration

27 - Making layers exportable
28 - Synching, presenting, and sharing
29 - Mirroring to a device

Conclusion

30 - Next steps