InVision Studio for UI Designers

Interface Design and Prototyping all in one

Created byGreg Rog

Last updated 8/2018

English

English [Auto],

What you'll learn

Learn all the Studio's tools
Practice on a real project
Create animations and microinteractions

Course content

1 section • 20 lectures • 2h 53m total length

Welcome to Studio3:29
Explore how to use InVision Studio to design beautiful user interfaces, build components and overrides, craft animations and micro interactions, and hand off specs with easy collaboration.
Interface roundup9:02
Explore the studio interface, create from blank or import sketch files, view an animation tutorial, and prototype transitions while organizing pages, artboards, groups, and layers with shortcuts.
Navigating on canvas7:17
navigate the canvas using spacebar to pan and shortcuts to center, zoom, or present; import sketch files, work with symbols and layers, and optimize images for retina displays.
Working with colors9:47
Learn to build cohesive color palettes in InVision Studio by generating colors, locking favorites, adjusting hue and saturation, and applying linear and radial gradients with blending modes.
Artboard settings9:22
Explore artboard settings in InVision Studio, toggle dark and light themes, and use macro-grid and micro-grid layouts to arrange images and text, adjust text size, line height, and color.
Working with vectors11:21
Explore vector tools in InVision Studio to create and edit vector points, handles, and paths, apply fills and strokes, and import vector and raster graphics for UI design.
Working with images8:08
Apply masks and grouping to images in InVision Studio, resize with preserved proportions, explore fill modes (fit, stretch, tile), and organize layers for consistent animation across boards.
Components in Studio5:45
Create reusable UI components in Studio to streamline design across art boards. Update the component's source of truth to propagate changes, while overrides and detaching preserve or isolate instance appearances.
Positioning elements13:16
Apply percentage-based sizing and alignment in InVision Studio to create responsive layouts that scale across devices, using containers, groups, and components to control center or corner positioning with fixed margins.
Applying positions to layout4:21
Position avatars and UI elements with bottom and center pins, group into a container for consistent layouts, then preview on multiple devices to ensure a responsive design.
Creating animations10:01
Create and refine artboard transitions and shape animations in InVision Studio by configuring motion presets, triggers, and timelines, then test, adjust, and automatically link layers by name for multi-board animations.
Easing in animation3:51
Animate transitions between art boards in InVision Studio by adjusting motion, easing, and duration, applying global or per-transition easing, and animating properties such as x, y, and size.
Animating first artboards6:51
Apply animation principles to a multi-artboard layout by creating transitions between car images (Lamborghini, BMW M4, Ferrari), using drag-and-drop replacements, and fine-tuning timing, opacity, and swipe gestures.
Looping the animations8:01
learn to create and loop multi-step transitions in InVision Studio, link and align layers, and build parallax detail animations for a car lineup prototype.
Details screen14:31
Design a car details screen in InVision Studio by renaming artboards, organizing elements, and building a fixed, scrollable details panel with bottom-up animation and a smooth transition.
Renting a car11:17
Animate a Lamborghini rental user interface in InVision Studio by building availability and car-type filters, showing results with motion timelines and sequential transitions.
Rapid Prototyping13:55
Learn rapid prototyping in InVision Studio by creating a multi-screen car rental flow with duplicates, animations, and timeline transitions, using sliders and select groups to simulate user input.
Filters screen9:59
Import sketches and other assets into InVision Studio, create micro interactions and transitions, and build a robbys prototype with multi-screen navigation including fixed headers and footers.
Previewing prototype12:28
Explore how to preview your prototype on real devices, export to the Invision platform, and share interactive prototypes with comments, inspect tools, and asset export options.
That's it for now0:52
Celebrate your progress in the final lesson of InVision Studio for UI designers, and experiment with new projects to speed up your design work.

Requirements

This course is for macOS users only
No prerequisite knowledge is required

Description

InVision Studio isn't just another app for UI design. It's a complete solution for bringig your project from its early shape to a high fidelity prototype together with outstanding animations. Having it all under the hood of InVision platform lets you go even further. You can easily preview the prototypes on devices, share them with your clients and get their feedback as well as set up an easy handoff for your developer. Oh, and Studio is both for macOS and Windows. Plus, it's COMPLETELY FREE. And so is the course.

Studio tools and shortcuts
Practical app workflow
Working with Components
Animating your UI in Studio
Creating microinteractions
Export, preview and handoff

Basics in a breeze

Soon you'll find out that Studio is probably one of the easiest tools to master and most of the functions are simple and intuitive. Especially if you've previously used Sketch, transition to Studio is painless and all the tools and shortcuts works just as expected. This is why we won't spend much time explaining the interface, rather than jump right into creating a practical design in Studio. As you will find out this is the most effective and rewarding way of discovering Studio.

It just works

The overall user experience of Studio is great. There are dozens of little things that just works, without bothering you. You might even think - what is there to learn? Everythig is so simple. Thanks to this, the learning curve that you're about to take is focused on effective workflow, rather than the tool itself. My aim is to show you the tips and tricks to work even faster, better and more efficient.

One fits all

This is one of the rare examples where one solution gives you a spectrum of possibilities. For most of the time you won't have to leave InVision Studio. Even though you can create seamless transitions and advanced animations in you UI, the software itself feels light and responsive. We'll explore different parts of your workflow, from initial sketches, to a detailed design, to a prototype working on devices. All without leaving Studio.

Leverage the platform

InVision Platform is much more than Studio. Thanks to its capabilities you'll be able to easily export and share the prototypes and edit them after the rounds of feedback from your client or project owners. We'll explore those options together with the handoff capabilities and creating automated specs for developers.

Design elements

In the course I will explain the usage of colors, typography, grid and other basic UI design concepts combined with the tools and workflows available in Studio. We'll focus on the correct setup, creation of the Components and other good habits that will help you in professional UI design process.

Create beautiful UI

In the course I'd like to showcase Studio workflow based on a practical UI project of a Supercar Rental app. Thanks to this approach I'll be able to show you step-by-step design process in Studio that is closer to real life example.

Who this course is for:

UI/UX designers willing to get to know InVision Studio