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
UI Animation using Sketch 3 Principle App and Flinto
File Size :
7.39 GB
Total length :
8h 43m



Pablo Stanley


Last update




UI Animation using Sketch 3 Principle App and Flinto

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

UI Animation using Sketch 3 Principle App and Flinto


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 SymbolsCreating a Left Bar Navigation with Nested SymbolsUPDATE December 27 2016 – New projects!
Creating an on-boarding parallax animation using Flinto and SketchDrawing Santa on Sketch (Holiday Special)The most useful keyboard shortcuts on SketchMy 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 prototypesCreating 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 animationsParallax Effect using PrincipleDrag And Drop InteractionContinuous 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 TransitionsUser Interface Cards Flow AnimationAdding Sound to Your Prototype (and many more)
IntroductionHola, 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 InVisionPrinciple 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 CourseThis 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.


Lecture 1 Intro / Promo

Section 1: Sketch 3 Basics

Lecture 2 Introduction

Lecture 3 Understanding Artboards

Lecture 4 Using Colors and Graphic Styles

Lecture 5 Creating Text Styles

Lecture 6 Using Symbols

Lecture 7 10 Quick Tips!

Section 2: Sketch 3 Intermediate Level Stuff

Lecture 8 Designing with Layout Grids

Lecture 9 Creating Custom Shapes

Lecture 10 Masking

Lecture 11 Plugin: Dynamic Button

Lecture 12 Plugin: Craft Duplicate by InVision

Lecture 13 Plugin: Craft Photos by InVision

Lecture 14 Plugin: Craft Library by InVision

Lecture 15 Plugin: Craft Prototype by InVision

Lecture 16 My Favorite Keyboard Shortcuts

Lecture 17 Common Shortcuts and Creating your Own

Lecture 18 Favorite Sketch Plugins (2017 Version)

Section 3: Sketch Advanced Stuff

Lecture 19 Creating a Button System with Nested Symbols

Lecture 20 Creating a Left Navigation Bar with Nested Symbols

Section 4: Principle – Simple UI Animation and Prototyping Tool

Lecture 21 Introduction to Principle

Lecture 22 Connecting Screens and Creating Links with Events

Lecture 23 Creating Custom Animations on Principle

Lecture 24 PRACTICE: Create a tabbed Navigation

Lecture 25 Continuous Interactions: Dragging, Scrolling and Paging

Lecture 26 PRACTICE: Creating a Scrollable Prototype

Lecture 27 The Power of Drivers on Principle

Lecture 28 PRACTICE: Creating a Character Move With Dragging Interaction

Lecture 29 PRACTICE: Paged Scrolling using Drivers

Lecture 30 PRACTICE: Creating a Parallax Effect

Lecture 31 PRACTICE: Simple Drag And Drop

Lecture 32 PRACTICE: Character Animation Using Principle

Lecture 33 Exporting your prototype to GIF and Mocking up on Device

Section 5: Flinto – User Interface Animations Tool

Lecture 34 Intro to Flinto

Lecture 35 The Basics and the UI of Flinto for Mac

Lecture 36 Creating Screen Transitions on Flinto

Lecture 37 Creating Modal Overlays Using Flinto

Lecture 38 Adding Layer Transitions On Flinto for Mac

Lecture 39 Connecting Layers on Flinto

Lecture 40 Creating Scrollable Areas using Flinto for Mac

Lecture 41 Creating Cards Animation Flow on Flinto

Lecture 42 Adding Sound To Your Prototype on Flinto

Lecture 43 Using Mouse Over and Mouse Out Gestures (hover) – Creating Quiz

Section 6: Projects

Lecture 44 Prototyping a modal overlay on Flinto

Lecture 45 Creating an onboarding walkthrough parallax animation

Lecture 46 Designing a Santa Illustration (Holiday Special)

Lecture 47 Creating a Parallax Effect Using Flinto

Lecture 48 Creating a full Prototype using Marvel and Sketch

Lecture 49 Create Animated Icons Using Flinto

Lecture 50 Designing a Refresh Animation

Lecture 51 Prototyping a Refresh Animation

Lecture 52 Creating a simple signup flow on Sketch 3

Lecture 53 Creating a prototype of a Signup Flow using Marvel App

Lecture 54 Adding Sound to your Prototypes – Creating a Drumpad

Section 7: EXTRA: Intro to Design and Prototyping

Lecture 55 Introduction to Prototyping

Lecture 56 Design Tools

Lecture 57 Prototyping Tools

Lecture 58 Animation Tools

Lecture 59 My Favorite Sketch Plugins (recorded live)

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 Information:

Udemy | English | 8h 43m | 7.39 GB
Created by: Pablo Stanley

You Can See More Courses in the Design >> Greetings from CourseDown.com

New Courses

Scroll to Top