Animating Sketch files in InVision Studio (2021)

Create beautiful and engaging interactions for your user interface designs

4.10 (289 reviews)
Udemy
platform
English
language
Design Tools
category
1,096
students
1.5 hours
content
Apr 2020
last update
$54.99
regular price

What you will learn

Master InVision Studio to create engaging ui animations

Advanced techniques and shortcuts to design faster than most professionals

How a good UI (user interface) influences good UX (user experience)

Troubleshoot and fix animation glitches

Master timing and easing techniques for superb transition mechanics

Description

While Sketch is the industry leading tool for designing beautiful user interfaces for digital products, it only takes us up to the point of having static designs — that haven't yet been brought to life.

InVision Studio allows us to import our Sketch files and transform them into beautiful interactive experiences full of engaging animations with just a few clicks.


Learn to Animate Beautiful, High-Fidelity UI Animations with Studio's Powerful Tools and Smooth Workflow 

  • Master the essential principles and tools of InVision Studio.

  • Discover animation techniques that will enhance your creative potential.

  • Learn and implement UI animation best practices to ensure quality and usability.

  • Journey from design to fully interactive prototype by building on a sample iPhone app.


Find out why every company in the Fortune 100 uses InVision

Studio combines design, prototyping, and collaboration into one harmonious workflow. It starts with a live design environment, which gives you the power to create intelligent layouts and interactions as part of your normal workflow.

Studio enables designers to move fluidly between visual and interaction design. Any type of layer (including artboards) can have one or more interactions. If a layer has interactions, you can see the layer marked with the small lightning icon in the layer list on the left side of Studio.

Take your simple interactions and animations to the next level with advanced motion that lets you modify the global duration and delay, or edit in Timeline.

The comprehensive animation editor for Studio, Timeline gives you complete control over every aspect of your prototyping interactions. Timeline presents a compact visual overview of your animation timing and layer hierarchy, allowing precise control over each animated property. Timeline makes it easier to manage complex transitions and fine-tune the delay, timing, easing adjustments, and speed of animated layers and properties. Use Timeline to edit all your animated interactions—adjusting each interaction layer by layer or as a whole.

After creating your prototype in Studio, you can publish that prototype to InVision Cloud where you can preview interactions and animations, leave comments, and inspect elements.

At any point in the design and prototyping process, Studio allows you to sync directly to your InVision account to share and collaborate on your project. 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.

When you open a Studio prototype on the web, you see exactly what you saw in the InVision preview window. The same fidelity, the same interactions, the same animations—the same everything. When it's time to share, you can head down to the Share button in the bottom right hand corner, choose Copy Link, and send it off anywhere you like. Anyone with a link to your prototype will be able to view it in its full fidelity and leave comments.


Contents and Overview 

  Whether you’re a beginner or a veteran designer with experience using Photoshop and Illustrator, you will find this course valuable in the way that it blends step-by-step instruction with hands-on, customizable exercises: 

  • Studio Prototyping from A to Z: With 28 lectures and 90 minutes of dense content, this course covers everything from rapid prototyping, interactions, and styling to text editing to exporting finished projects.

  • Test Your Knowledge: Periodic quizzes will review key concepts and ensure that you are mastering the content.

  • Interactive Design Project: Together with the instructor, you will animate the user interface for a travel app. Included Sketch and Studio documents allow you to pick up at any point in the project.

  After completing this course, you will understand how to animate high-fidelity mobile application prototypes using Studio — and you will be better prepared to meet the demands of your clients and developers.

Content

Welcome

Introduction
What is InVision Studio
Fonts and sample files
Downloading and installing InVision Studio

Importing from Sketch

Importing from Sketch
The rasterize layer trick
Importing from Sketch

Prototyping Basics

Creating interactions
Choosing a trigger
Preset transitions
Previewing your prototype
Editing and removing interactions

Motion

What is the Motion Transition?
Setting up artboards for motion
Adding the motion transition
The swipe trigger
The timer trigger

The Timeline Editor

Navigating the Timeline Editor
Changing layer timing
Easing made easy
Advanced easing with the graph editor
Separating properties
Manually linking layers

Troubleshooting animations

Handling layer linking issues

Scrolling and Pinning

Making artboards scrollable
Fixed scroll position
Masking a fixed image

Publishing and Sharing

Publishing to InVision

Congratulations

Congratulations

Screenshots

Animating Sketch files in InVision Studio (2021) - Screenshot_01Animating Sketch files in InVision Studio (2021) - Screenshot_02Animating Sketch files in InVision Studio (2021) - Screenshot_03Animating Sketch files in InVision Studio (2021) - Screenshot_04

Reviews

LM
March 24, 2023
This course was promoted to me and I purchased it only to find that InVision sunset Studio in January 2023. Thanks, Udemy, for the wasted money and the time that I spent in the course!
Bastiaan
March 7, 2023
Invision is niet meer te downloaden. Sketch heeft nu zelf prototyping tools: https://www.sketch.com/docs/prototyping/
Peter
February 10, 2023
The pacing and division into lessons is really efficient for learning prototyping in InVision. Anyone who has used other prototyping tools like Figma or Adobe XD can be up and running in InVision in a couple of hours. This is also a perfect follow-up to Joseph Angelo Todaro's "Sketch from A-Z" Udemy course.
Giuseppe
March 19, 2021
sì, ottimo, mi piacerebbe avere anche una “bibliografia” o "videotutorial" per approfondire lavori fatti con Invision. Grazie
Emily
February 28, 2021
His voice is so clear! He explains clearly and I don't need to put him on 2x speed in order to keep my attention. This is all very engaging.
Chidi
February 22, 2021
Very good course. I took the instructor's other course (on Sketch) and then this one. Both courses are awesome and very well presented and the instructor is a master of this subject. I would strongly recommend it.
Bernadette
February 22, 2021
per ora ogni lezione è molto breve, si potrebbe dire lo stesso con un unico video invece che tre diversi.
Jim
February 16, 2021
Senior front-end dev with 20 years experience. This course was perfectly pitched. Well done Joseph. Recommended.
Terence
February 7, 2021
Five stars for the content! However, I followed all the steps, naming conventions, checked and rewatched numerous times but some of the functions did not perform as they did in the video. Either Invision is super buggy, or my computer is having issues.
Volodymyr
January 30, 2021
I came from Sketch from A to Z course. Purchased this one because I LOVED your previous course, so at that time I thought it was a no-brainer. However, the amount of content here is lacking and it feels rushed. Moreover, there is a free course on InVision's official website made by the author and they feel nearly the same, to be honest.
Susanna
January 2, 2021
I cant get the #6 video right, it said I can press and hold option + drag the image to resize it at @3x with the correct name and size but it doesnt work. Been stuck at that part for 30 mins until i gave up. Update: I found out that it was possible on the older version, this function is no longer available and this video needs to be updated.
Radik
December 5, 2020
This course is just what I needed! Transitioning from visual design to UX, I'm really happy I came across this course during Black Friday sale, without even knowing Joseph is one of the top instructors for Sketch and InVision.
Diana
November 19, 2020
Thanks Joseph! Your course was easy to follow and I appreciate your explanations on why some things won't work and why others do.
Nik
October 28, 2020
Really enjoyed the course - very easy to understand and follow along. Definitely gives you a solid overview of how the main features of inVision studio work My only comment would be I'd have like to see a bit more complex examples that went into more depth of the potential that inVision studio has.
Alberto
May 18, 2020
I have done also the Sketch course of Joseph Angelo Todaro, and they both are the best courses on Udemy I have ever done! Recommended to anyone!

Coupons

DateDiscountStatus
7/12/202087% OFF
expired

Charts

Price

Animating Sketch files in InVision Studio (2021) - Price chart

Rating

Animating Sketch files in InVision Studio (2021) - Ratings chart

Enrollment distribution

Animating Sketch files in InVision Studio (2021) - Distribution chart

Related Topics

2767700
udemy ID
1/19/2020
course created date
5/18/2020
course indexed date
Bot
course submited by