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
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
Introduction
- Design, prototype, and animate all with InVision Studio
- Keeping up with InVision Studio
- Ongoing updates, resources, and handouts
A Tour of Studio
- The welcome window
- The anatomy of a document
- A tour of the interface
- Saving Studio files
Importing from Sketch
- Importing from Sketch to InVision Studio
- Copy and paste from Sketch to Studio
- Best practices for importing from Sketch
Screen Design
- Adding and editing text layers
- Drawing, editing, and formatting shapes
- Managing layers
- Using Boolean operations
- Masking layers
Rapid Prototyping
- Linking screens
- Previewing your prototype
Advanced Animation
- Using the Motion transition
- Editing animations with the transition editor
- Linking layers with the transition editor
Working with Components
- Creating, adding, and editing components
- Component overrides
- Additional tips with components
Responsive Layout
- Pinning elements
- Percentage-based scaling
- Toggling between different devices
Collaboration
- Making layers exportable
- Synching, presenting, and sharing
- Mirroring to a device
Conclusion
- Next steps