UI Animation using Sketch 3, Principle App, and Flinto
4.2 (1,053 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5,787 students enrolled

UI Animation using Sketch 3, Principle App, and Flinto

Learn to prototype UI animations and micro-interactions using Sketch, Flinto, Principle, Marvel & Invision Craft Plugin
4.2 (1,053 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5,788 students enrolled
Created by Pablo Stanley
Last updated 4/2018
English [Auto], Italian [Auto]
Current price: $16.99 Original price: $24.99 Discount: 32% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 8.5 hours on-demand video
  • 41 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn the Fundamentals and Some Advanced Tricks on Sketch
  • Create realistic prototypes for mobile devices and web
  • Create UI animation and micro-interactions using Flinto
  • Create UI animation and micro-interactions using Principle
  • Create simple prototypes using Marvel App
  • Basic design skills (not obligatory)
  • Sketch only runs on Mac. Having the latest OS is a must
  • Get Sketch 3 (30 day trial)
  • Get Flinto for Mac (15 day trial)
  • Get Principle (15 day trial)

UPDATE June 2017 - Nested Symbols!

  • Creating a Button System with Nested Symbols
  • Creating a Left Bar Navigation with Nested Symbols

UPDATE December 27 2016 - New projects!

  • Creating an on-boarding parallax animation using Flinto and Sketch
  • Drawing Santa on Sketch (Holiday Special)
  • The most useful keyboard shortcuts on Sketch
  • My Favorite practical Sketch Plugins!

UPDATE July 11th 2016 - New content!

  • Added How to add Hover effects on Flinto - Mouse Over / Mouse Out. Great for web design prototypes
  • Creating a Parallax UI Animation Using Flinto.

UPDATE July 5th 2016 - New content!

  • Added a section covering Principle for Mac.
  • 12 videos (over an hour of content)
  • How to create character animations
  • Parallax Effect using Principle
  • Drag And Drop Interaction
  • Continuous Interactions like Paging, Scrolling, Dragging.
  • Many more!

UPDATE June 18th 2016 - New content!

  • Added a section covering Flinto for Mac.
  • 9 videos (over an hour of content)
  • Connecting Layers, Complex Transitions
  • User Interface Cards Flow Animation
  • Adding Sound to Your Prototype (and many more)


Hola, my name is Pablo Stanley. I’ve been a designer for almost 18 years– And I have worked with different startups for quite a while. I want to teach you how to apply the tools I use every day–and I’ll give you some insight into my workflow and process as a product designer.

On this course you'll learn how to design web and mobile products using Sketch 3. We’ll also learn how to prototype full flows and micro-interactions using the most current apps in the industry like Flinto, Principle, Marvel App, and Invision’s Craft Plugin. And the coolest part about this course? We’ll learn how to create detailed UI animations and how to apply them to your projects.

This course is designed in different sections so you can jump around depending on your skill level. You’ll be able to learn how to use the tools to make your own designs from scratch. And we’ll also learn by doing, getting hands-on with more advanced projects.

So, Why Sketch?
Sketch 3 is a design tool focused on user interface and user experience design. Because of its simplicity, it’s really easy to understand; anyone with little to no training can learn Sketch. It’s perfect for designing for multiple mobile devices, working on responsive web design, delivering assets in an easy way, and makes collaboration with developers amazing. It also costs a fraction of the price of Adobe Suite (goodby monthly payment). So yeah, it's pretty cool.

Why Flinto, Principle, Marvel App and Craft by InVision
Principle makes it easy to create animated and interactive user interface designs. Great for Multi-screen app, or new interactions and animations.

Flinto lets designers quickly make interactive prototypes of their mobile, desktop, or web apps.with custom animations, gestures, and Sketch import

This simple editor in Marvel allows you to link all your designs together in seconds, then add gestures and transitions to make your prototype feel just like a real app or website.

This Course
This course covers the basics, but also goes into detail on some advanced features, tricks, and plugins that I use in my daily workflow.

We'll also work on some cool projects that we'll be able to prototype and share on our mobile devices and the web. We'll even do some UI animation and micro-interactions that will make your prototypes look pretty realistic.

Who this course is for:
  • Web Designers
  • Mobile App Designers
  • Developers wanting to know a bit more about User Interface Design
  • Product Managers trying to learn new skills.
  • Graphic Designers who which to start creating web and mobile products
Course content
Expand all 59 lectures 08:44:25
+ Intro / Promo
1 lecture 01:09

On this course you'll learn how to design web and mobile products using Sketch 3. We’ll also learn how to prototype full flows and micro-interactions using the most current apps in the industry like Flinto, Principle, Marvel App, and Invision’s Craft Plugin. And the coolest part about this course? We’ll learn how to create detailed UI animations and how to apply them to your projects.

Preview 01:09
+ Sketch 3 Basics
6 lectures 48:31

Let's first quickly learn about the interface of Sketch 3. The inspector, the toolbar and the layers list.


See artboards as the Screens of your app. Each screen could be a state or an interaction of your flow. Organizing artboards can help you represent a user story instead of having multiple files for each.

You can copy, duplicate, drag, rearrange, rename, and export Artboards.

Understanding Artboards

Graphic Styles make it easy to reuse a style that you need to repeat constantly. Styles record color, transparency, border, and any effect applied. Understanding colors in Sketch is easy. Global Colors will follow you across documents. Document Colors are to be used only on the current document. 

Using Colors and Graphic Styles

Text Styles allow you to re-use the same style across your document. Similar to how CSS works, if you change it in one place, it changes everywhere. Press T to create a new text layer. Choose font and edit the style in the inspector. 

Preview 03:15

Symbols make it easy to have elements that are repeated across your design. They share style, position, size, and effects. When you change one symbol, it changes everywhere that symbol is being used. Useful on elements like Navigation Bar, Status Bar, Icons, etc.

Preview 14:50

12 Quick tips for Sketch!

Preview 12:29
+ Sketch 3 Intermediate Level Stuff
11 lectures 01:16:18

Start by creating a new Desktop Artboard. Then go to Layout Settings and customize your grid. With the grid, you can easily set 1, 2, 3 or 4-column layouts.

Designing with Layout Grids

To create complex shapes, you can combine different shapes in a non-destructive way 

Creating Custom Shapes

You can mask objects or images inside any shape. Really cool.


Install the Dynamic Buttons 3.5 plugin and use it on any text layer by pressing CMD+J

Plugin: Dynamic Button

Forget copy+paste. Perfectly clone any design element at lightning speed with Duplicate.

Preview 05:41

Add images to your design easily with Invision's Craft Photo Plugin and Content Generator

Plugin: Craft Photos by InVision

Keep your team's design current with a single source of truth for all assets.

Changes to your library design appear in your teammates' design too, so everyone stays up to speed.

Create a new library and add a couple of elements from the artboard below. Then Create a new document, import those elements, change them, and see how it syncs on this file too.

Plugin: Craft Library by InVision

On this video we’re gonna take a look at the newest addition to the Craft plugin from InVision called “Prototype”. 

Prototype allows you to create rapid prototypes inside Sketch, without leaving the app, just previewing on your phone. Not only that, but it also gives you access to native iOS components like the camera, the keyboard, and the web-viewer, contacts, photos, etc. This is seriously a game-changer, a plugin that will render a lot of mobile prototyping tools obsolete. 

Plugin: Craft Prototype by InVision
My Favorite Keyboard Shortcuts

Let's learn some shortcuts quickly and how to create your own.

Common Shortcuts and Creating your Own

Sketch Runner: Spotlight for Sketch. Create, install, run, find stuff on Sketch.


Calendar Creator: Generate a 7 Columns Calendar


Map Generator: Design beautiful map interfaces


LaunchPad: Publish a website directly within Sketch.


Symbol Manager: Organize the name and grouping of your symbols.


Symbol Organizer: Organize the artboards on your symbols page.


Library Symbol Replace: Replace symbols in the current document with symbols from a Library.


RenameIt: Batch rename layers and artboards.


Magic Mirror: Create perspective mockups of your artboards.


Auto Layout: Design responsive screens in Sketch


Find and Replace:  Find and replace any text in your file.


Abstract: Version control for designers.


Measure: Create spec for developers and teammates

Reduce App: Compress huge Sketch files in an instant


Favorite Sketch Plugins (2017 Version)
+ Sketch Advanced Stuff
2 lectures 01:18:39

Let's learn how to create a button system using nested symbols! Don't forget to download the resource files ;)

Creating a Button System with Nested Symbols

Let's use Nested Symbols in Sketch in a smart way to create a navigation bar. Don't forget to download the resource files ;)

Creating a Left Navigation Bar with Nested Symbols
+ Principle - Simple UI Animation and Prototyping Tool
13 lectures 01:22:00
Introduction to Principle
Connecting Screens and Creating Links with Events
Creating Custom Animations on Principle
Continuous Interactions: Dragging, Scrolling and Paging
PRACTICE: Creating a Scrollable Prototype
The Power of Drivers on Principle
PRACTICE: Creating a Character Move With Dragging Interaction
PRACTICE: Paged Scrolling using Drivers
PRACTICE: Creating a Parallax Effect
PRACTICE: Simple Drag And Drop
PRACTICE: Character Animation Using Principle
Exporting your prototype to GIF and Mocking up on Device
+ Flinto - User Interface Animations Tool
10 lectures 40:34
Intro to Flinto
The Basics and the UI of Flinto for Mac
Creating Screen Transitions on Flinto
Creating Modal Overlays Using Flinto
Adding Layer Transitions On Flinto for Mac
Connecting Layers on Flinto
Creating Scrollable Areas using Flinto for Mac
Adding Sound To Your Prototype on Flinto

Add Mouse Over and Mouse Out gestures on your prototypes. Great for web app design :D

Using Mouse Over and Mouse Out Gestures (hover) – Creating Quiz
+ Projects
11 lectures 02:19:24

Let's create a simple animation prototype with a modal using Flinto.

Prototyping a modal overlay on Flinto
Creating an onboarding walkthrough parallax animation

Creating a background parallax effect using Flinto. You'll learn how to connect layers, reuse transitions, and how to control the content with swipe gestures and taps.

Preview 14:03

Let's create a project using Sketch and prototyping it on Marvel App

Creating a full Prototype using Marvel and Sketch

Create animated Icons using Flinto by connecting layers, reusing transitions and using swipe gestures.

Create Animated Icons Using Flinto

Design a screen with list elements to be refreshed using Sketch 3.

Designing a Refresh Animation

Prototype your refresh animation using Flinto

Prototyping a Refresh Animation

Creating our design on Sketch

Creating a simple signup flow on Sketch 3

Let's get hands-on a project by creating a simple prototype using Sketch and Marvel App

Creating a prototype of a Signup Flow using Marvel App

Let's add sounds to our User Interface using Flinto by creating a Drumpad

Adding Sound to your Prototypes - Creating a Drumpad
+ EXTRA: Intro to Design and Prototyping
5 lectures 57:50

Let's lean why prototyping is important and why you should incorporate it in your workflow.

Introduction to Prototyping

Design tools of a product designer

Design Tools

An overview on some of the prototyping tools out there. From static screen prototypes to granular UI animation prototype apps

Prototyping Tools

Animation tools for granular control of the interface.

Animation Tools

I recorded this live on my youtube channel–sorry for the bad quality :)

My Favorite Sketch Plugins (recorded live)