UI animation prototypes using Flinto and Sketch (beginners)

OMG. ANIMATED PROTOYPES, YO!

Just a hands-on, no BS, workshop where we learn how to create simple but powerful UI animation prototypes using Flinto.

Here's the curriculum.

____________________________________________________________________

UI animation with Flinto Workshop (Beginners)

• UI Animation Principles (the only theory stuff)

• An introduction to Flinto

• The Sketch Flinto Plugin

• Exporting our first project.

• A look at the UI

• How to create simple transitions between artboards

• Creating an Overlay Modal

• Adding scrollable areas

• Paged Scrolling

• Using Connected Layers

• Simple Example

• Tabbed Navigation

• Cards UI with details

• Using Behaviors

• Creating a simple switch

• Creating buttons with Behaviors

• Creating Scroll Effects with Behaviors

• Practice

• Cards UI

• Mobile app with detail page and side-drawer menu

• Bonus: Creating a Parallax effect using connected layers

• Bonus: Creating a Parallax effect using Behaviors

____________________________________________________________________

https://a248.e.akamai.net/secure.meetupstatic.com/photos/event/8/0/d/2/600_447452978.jpeg

What this is

Let’s learn to do some simple but awesome UI animations using Sketch 3 and Flinto. We’ll do it in person, in a small group (12 max), one-on-one. The old-fashioned way.

After some basic animation principles presentation, we'll jump straight into creating our first simple prototype on Flinto. Then we'll do a couple of simple mobile app projects where we'll learn to add screen transitions, layer animations, controlling elements with continuous interactions like scrolling and dragging and exporting our prototype, so we can share it with others (and yeah, we'll do some gifs too). How cool is that?

https://a248.e.akamai.net/secure.meetupstatic.com/photos/event/8/0/e/8/600_447453000.jpeg

Who is it for

This workshop is for anyone interested in mobile app design, UI animation, and prototyping. We'll be focusing on using Sketch 3 and Flinto. People with beginner to intermediate levels are welcome.

IMPORTANT: You must already know the basics of Sketch to take this workshop.

Who is this NOT for

• The workshop is not about coding. If you're looking to get to develop ready-to-implement code for the web or mobile apps, then this is not for you. But, this workshop will teach you a great tool to create prototypes, and in so, getting a feel of an interaction or a flow early in the process, before investing in engineering time.

• This is NOT for people that don't know how to use Sketch. Please take the workshop for sketch beginners first or check out this free crash course on YouTube (https://www.youtube.com/playlist?list=PLWlUJU11tp4fEXI8deWhBQAHDv9R23WHB) first.

https://a248.e.akamai.net/secure.meetupstatic.com/photos/event/8/0/e/d/600_447453005.jpeg

What you need

• Bring your laptop! You'll need a MacBook or Windows running OS X virtual environment.

• You need to have Sketch 3 (https://www.sketchapp.com/). You can get a 30 day free trial ;)

• Install Flinto (https://www.flinto.com/mac) (15 day trial available)

• Install Flinto's Sketch Plugin. (https://www.flinto.com/mac_sketch_plugin)

• Download all the resource files needed for the workshop (link will be sent a couple of days before the meeting).

• Feel free to BYOB (bring your own beer).

https://a248.e.akamai.net/secure.meetupstatic.com/photos/event/8/0/f/7/600_447453015.jpeg

Why?

I started Sketch Together because I want to share the knowledge of using Sketch 3 and other tools for mobile app and web design. I want to give a new take on the old way of teaching; one on one, in a small but efficient workshop. Packing the important stuff in two intense hours. At the end we will have designed a simple mobile flow and put on a live prototype.

Why are you charging?

The workshops used to be free but now I'm requiring a small cover to fund expenses on my part putting together the content. If at the end of the workshop you feel you didn't learn some good stuff I'll refund you your money :)

Looking forward to creating awesome stuff with you!