Ui Animation

Learn to prototype UI animations and micro-interactions using Sketch, Flinto, Principle, Marvel & Invision Craft Plugin

Last updated 2022-01-10 | 4.4

- 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

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

* 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 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

8 sections • 59 lectures

Intro / Promo 1 lectures

Intro / Promo Preview 01:09

Sketch 3 Basics 6 lectures

Introduction Preview 06:18

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

Understanding Artboards Preview 04:22

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.

Using Colors and Graphic Styles Preview 07:17

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.

Creating Text Styles Preview 03:15

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.

Using Symbols Preview 14:50

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.

10 Quick Tips! Preview 12:29

12 Quick tips for Sketch!

Sketch 3 Intermediate Level Stuff 11 lectures

Designing with Layout Grids Preview 03:34

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.

Creating Custom Shapes Preview 02:24

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

Masking Preview 03:07

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

Plugin: Dynamic Button Preview 04:39

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

Plugin: Craft Duplicate by InVision Preview 05:41

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

Plugin: Craft Photos by InVision Preview 05:01

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

Plugin: Craft Library by InVision Preview 03:47

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 Prototype by InVision Preview 10:20

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.

My Favorite Keyboard Shortcuts Preview 08:25

Common Shortcuts and Creating your Own Preview 03:13

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

Favorite Sketch Plugins (2017 Version) Preview 26:07

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

http://sketchrunner.com/

Calendar Creator: Generate a 7 Columns Calendar

https://lstore.graphics/plugins/calendar/

Map Generator: Design beautiful map interfaces

https://github.com/eddiesigner/sketch-map-generator

LaunchPad: Publish a website directly within Sketch.

https://launchpad.animaapp.com/

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

https://gumroad.com/l/sketch-symbols-manager

Symbol Organizer: Organize the artboards on your symbols page.

https://github.com/sonburn/symbol-organizer

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

https://github.com/zeroheight/library-symbol-replacer

RenameIt: Batch rename layers and artboards.

https://github.com/rodi01/RenameIt

Magic Mirror: Create perspective mockups of your artboards.

http://magicsketch.io/mirror/

Auto Layout: Design responsive screens in Sketch

https://animaapp.github.io/

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

https://github.com/thierryc/Sketch-Find-And-Replace

Abstract: Version control for designers.

https://www.goabstract.com/

Measure: Create spec for developers and teammates
http://utom.design/measure/

Reduce App: Compress huge Sketch files in an instant

https://flawlessapp.io/reduce

Sketch Advanced Stuff 2 lectures

Creating a Button System with Nested Symbols Preview 30:39

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

Creating a Left Navigation Bar with Nested Symbols Preview 48:00

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

Principle - Simple UI Animation and Prototyping Tool 13 lectures

Introduction to Principle Preview 05:47

Connecting Screens and Creating Links with Events Preview 03:19

Creating Custom Animations on Principle Preview 06:59

PRACTICE: Create a tabbed Navigation Preview 04:24

Continuous Interactions: Dragging, Scrolling and Paging Preview 06:25

PRACTICE: Creating a Scrollable Prototype Preview 02:48

The Power of Drivers on Principle Preview 03:30

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

PRACTICE: Paged Scrolling using Drivers Preview 10:03

PRACTICE: Creating a Parallax Effect Preview 04:19

PRACTICE: Simple Drag And Drop Preview 05:11

PRACTICE: Character Animation Using Principle Preview 08:38

Exporting your prototype to GIF and Mocking up on Device Preview 10:47

Flinto - User Interface Animations Tool 10 lectures

Intro to Flinto Preview 00:54

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

Creating Screen Transitions on Flinto Preview 03:51

Creating Modal Overlays Using Flinto Preview 02:55

Adding Layer Transitions On Flinto for Mac Preview 04:29

Connecting Layers on Flinto Preview 03:52

Creating Scrollable Areas using Flinto for Mac Preview 03:34

Creating Cards Animation Flow on Flinto Preview 06:42

Adding Sound To Your Prototype on Flinto Preview 01:30

Using Mouse Over and Mouse Out Gestures (hover) – Creating Quiz Preview 09:47

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

Projects 11 lectures

Prototyping a modal overlay on Flinto Preview 05:53

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

Creating an onboarding walkthrough parallax animation Preview 20:30

Designing a Santa Illustration (Holiday Special) Preview 14:12

Creating a Parallax Effect Using Flinto Preview 14:03

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.