Sorry, your browser is not supported
To have the best experience using Skillshare, we recommend that you use one of these supported browsers.

How to Animate a Sketch UI using Prototype

Dennis Muthuri, UI Designer, UX Lover and Saxophonist

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Videos (29m)
    • About the Class

      0:30
    • Getting Ready for Class: Materials

      0:34
    • Prepare Assets for Import to Principle

      3:34
    • Importing to Principle

      5:27
    • Our First Animation: The Action Button

      7:57
    • Final animation: The Option Buttons

      6:14
    • Reusable Animations using Components and Closing

      5:05

About This Class

About the Class

This class will show you how to add motion to a User Interface that has been designed in Sketch using Prototype. It’s perfect for any designer who creates their UI using Sketch and wants to add motion and interaction to their designs.

No prior experience of Principle is required to take the class as I’ll explain how to use it. The only thing you need to do before you take this is to download the Principle app on your machine. Head over to http://principleformac.com/ and click the download button to do this.

Skills You will Gain

You will learn how to:

  • Prepare your Sketch UI for animation in prototype.
  • Properly import your Sketch file into prototype.
  • Use shapes, easing and timing effects to your UI.
  • How to use components to create re-usable animations

Project

You will animate a pre-existing Sketch UI and create an effect similar to the compose button on the inbox app.

3

Students

--

Projects

0

Reviews (0)

Dennis Muthuri

UI Designer, UX Lover and Saxophonist

Based in Nairobi, Kenya, Dennis Muthuri is a problem solver at heart and is attracted to great design which solves problems as well as pushes the limits of what's possible.

As a consultant, he's worked with startups and consulting agencies such as Sky.Garden and ihub for most of his career, helping their teams craft products which deliver customer value contribute to their bottom line. 

He'd like to spend the next part of hi...

See full profile