How to Animate a Sketch UI using Principle

Dennis Muthuri, UI Designer, UX Lover and Saxophonist

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

    • 2. Getting Ready for Class: Materials

    • 3. Prepare Assets for Import to Principle

    • 4. Importing to Principle

    • 5. Our First Animation: The Action Button

    • 6. Final animation: The Option Buttons

    • 7. Reusable Animations using Components and Closing

14 students are watching this class

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


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