UI Animation using Sketch 3, Principle App, and Flinto
4.6 (447 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,040 students enrolled
Wishlisted Wishlist

Please confirm that you want to add UI Animation using Sketch 3, Principle App, and Flinto to your Wishlist.

Add to Wishlist

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
Best Seller
4.6 (447 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,040 students enrolled
Created by Pablo Stanley
Last updated 6/2017
English
English [Auto-generated]
Current price: $10 Original price: $25 Discount: 60% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 8.5 hours on-demand video
  • 40 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
Requirements
  • 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)
Description

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)

//////////////////////////////////////

Introduction
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 is the target audience?
  • 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
Compare to Other Sketch Software Courses
Curriculum For This Course
58 Lectures
08:18:18
+
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.

Introduction
06:18

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
04:22

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
07:17

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
10 Lectures 50:11

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
03:34

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

Creating Custom Shapes
02:24

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

Masking
03:07

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

Plugin: Dynamic Button
04:39

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
05:01

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
03:47

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
10:20

My Favorite Keyboard Shortcuts
08:25

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

Common Shortcuts and Creating your Own
03:13
+
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
30:39

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
48:00
+
Principle - Simple UI Animation and Prototyping Tool
13 Lectures 01:22:00
Introduction to Principle
05:47

Connecting Screens and Creating Links with Events
03:19

Creating Custom Animations on Principle
06:59


Continuous Interactions: Dragging, Scrolling and Paging
06:25

PRACTICE: Creating a Scrollable Prototype
02:48

The Power of Drivers on Principle
03:30

PRACTICE: Creating a Character Move With Dragging Interaction
09:50

PRACTICE: Paged Scrolling using Drivers
10:03

PRACTICE: Creating a Parallax Effect
04:19

PRACTICE: Simple Drag And Drop
05:11

PRACTICE: Character Animation Using Principle
08:38

Exporting your prototype to GIF and Mocking up on Device
10:47
+
Flinto - User Interface Animations Tool
10 Lectures 40:34
Intro to Flinto
00:54

The Basics and the UI of Flinto for Mac
03:00

Creating Screen Transitions on Flinto
03:51

Creating Modal Overlays Using Flinto
02:55

Adding Layer Transitions On Flinto for Mac
04:29

Connecting Layers on Flinto
03:52

Creating Scrollable Areas using Flinto for Mac
03:34


Adding Sound To Your Prototype on Flinto
01:30

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
09:47
+
Projects
11 Lectures 02:19:24

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

Prototyping a modal overlay on Flinto
05:53

Creating an onboarding walkthrough parallax animation
20:30


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
11:59

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

Create Animated Icons Using Flinto
10:02

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

Designing a Refresh Animation
14:25

Prototype your refresh animation using Flinto

Prototyping a Refresh Animation
09:14

Creating our design on Sketch

Creating a simple signup flow on Sketch 3
17:37

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
07:21

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

Adding Sound to your Prototypes - Creating a Drumpad
14:08
+
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
05:39

Design tools of a product designer

Design Tools
13:08

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

Prototyping Tools
05:39

Animation tools for granular control of the interface.

Animation Tools
09:02

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

My Favorite Sketch Plugins (recorded live)
24:22
About the Instructor
Pablo Stanley
4.5 Average rating
3,475 Reviews
48,582 Students
7 Courses
Product Designer

Hello, I'm Pablo Stanley. I'm a San Francisco based product designer. I'm the designer and cofounder of a healthcare startup in San Francisco called Carbon Health. I love solving design puzzles, making silly illustrations, composing geeky music, creating colorful animated gifs, munching veggie burgers, and writing punny comics.

Mentoring is one of my new found passions. I want to learn and teach as much as I can and Udemy is the best platform for it.

I also write a comic series called “The Design Team”.