UI Animation using Sketch 3, Principle App, and Flinto

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.

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.

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.

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.

12 Quick tips for Sketch!

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.

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

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

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

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

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.

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.

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

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 

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

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

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

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

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.

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

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

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

Prototype your refresh animation using Flinto

Creating our design on Sketch

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

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

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

Design tools of a product designer

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

Animation tools for granular control of the interface.

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