Animate Designs Sketch 3 and Photoshop and add Interaction

Learn to add animation and interaction to your Sketch 3 and Photoshop designs without writing a single line of code
4.7 (12 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
253 students enrolled
Instructed by Adria Jimenez Design / Design Tools
73% off
Take This Course
  • Lectures 31
  • Length 2 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 11/2015 English

Course Description

Last course update: January 26th 2017

This course teaches you step by step how you can move your Sketch 3 and Photoshop designs and prototypes from static images to animated, and interactive user experiences that you'll be able to play with and give to your clients and users to try, like the Apple, Facebook, Twitter and other thousands of companies are doing.

My name is Adria Jimenez, and I am an engineer and designer passionate about technology, design, and excellent products. During my life, I've worked in several multinational companies where I've learned how to create curated and beautiful web and mobile applications, and recently I created several courses to teach others what I've learned.

This is one of my most favorite topics, so I carefully created this course for anyone who wants to boost their design or UX career, learning how to move from static wireframes or designs to animated and interactive prototypes that you can show to your team or clients.

What are you getting with the course?

  • Lifetime access
  • HD video lessons
  • Step by step guides
  • Prototype challenges with solutions
  • Downloadable materials and exercises
  • Knowledge quizzes

What I'll be able to do at the end?

By the end of the course, you'll be able to create animated prototypes from your wireframes or designs that will provide interaction with the user, showcasing how to use certain features of your app without even touching a line of code.

As soon as you gain knowledge with the tool, we are going to go one step further creating full interactive prototypes that you'll be able to see directly on your phone, and not only that, the course has challenges that will help you learn and progress further in your career while you also have fun.

Who is the ideal student?

The ideal student for this course is an existing UX or designer who already knows how to wireframe or design applications but who wants to advance one step forward in his or her career and wants to be able to show or test animations or interactions with clients or users.

The only requirement for taking this course is to have an Apple computer and to be open to learning new cool stuff.

See you inside the course and see how quick your designs and wireframes improve.

What are the requirements?

  • You should already know how to do wireframes or designs
  • The software for this course only runs in Apple computers, so you need to use a Mac. We will cover the software in a lesson.

What am I going to get from this course?

  • Add interaction to designs and wireframes
  • Create animated prototypes
  • Build microinteractions
  • Showcase app ideas to team or customers

Who is the target audience?

  • Existing UX or designers who already know how to do wireframes or designs but who wants to advance one step forward in their carreer and wants to be able to show or test animations or interactions with clients or users.
  • Frustrated people who tried different alternatives like Framer, Origami or Quartz Composer and left it because it was too difficult.
  • This course is not probably for you if you already have an advanced knowledge about how to add interaction or animate your wireframes or prototypes.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Welcome

Welcome in! Be sure to check this lesson to see how to get the most of the course.


Before starting with the course, make sure you know what the course is about and make sure you are ready to start learning!


Grab all the course resources easily from here.


This lecture will show you where and how to download the required software for the course.

Section 2: Get to know the tool

The interface is simple but powerful so it's important to know what you can do with it. Learn in this lesson all the buttons and windows, why are they there and what they do.


This lecture shows how you can create shapes. Which are the shapes that you can create and why.


Learn in this lecture how you can add your assets to your composition. Directly from your computer to the composition and how you can later update them.


If you are using Sketch to design your assets, you'll learn in this lesson how you can import them so they look good in your design.


Learn how to properly connect your screens so they start to look like an animated prototype.


When you have different screens that share elements, the transition between them can be easily animated. This lesson will teach you how you can do it.


    From Principle 1.1 you can directly import your designs from Sketch with one click of a button. In this lesson you’ll learn how you can do that

4 questions

Check your knowledge of the interface doing this quiz before you proceed with other lectures

Section 3: Your first prototype

This lecture will show you how to create an animated prototype of a shopping cart.


Now that you've seen how easy is to animate between screens and you've put it in practice, how about if you learn how you can tweak those animations? In this lesson you will learn how to do so.


Creating a prototype is nice, but what is better than sharing it?

This lesson will teach you how to easily share your prototypes with clients or colleagues.


Test your prototype on your iPhone easily and learn how to share the prototype with your clients so they can also see it in an iPhone.

Section 4: Advanced interactions

This lesson will show you how to manage big content and how to make it scrollable in order to make it appear correctly for the user.


Dragging layers is something useful and most of the times painful to do. In this case dragging layers it's pretty easy. Let's see how we can do that.


Learn in this lecture how to properly paginate your content. Something easy and fast to do.


Control prototype behaviors using drivers. In this lesson you will see how easy is to add special animations based on behavior.

3 questions
Check your knowledge before proceeding to create more complex prototypes, this quiz will let you know if you are ready to continue or not.
Section 5: Combining skills to create prototypes

Now challenges are coming, learn how you should proceed with them so you can be sure you'll make it :)


Create a basic menu with different options. This will help you in the future if you need to create prototypes that have different basic actions in different screens.


If you didn't manage to solve the menu challenge, follow the steps mentioned here for a step by step guide to solve the problem.


Using drivers and animation learn to build this slingshot with a tension meter prototype.


This challenge is for you to try to make an image alignment prototype where using some alignment buttons you’ll correctly position an image inside a document. We will also use the hovering effects introduced in Principle 1.0


See in this lesson the step by step instructions to accomplish the proposed challenge.


Apple Watch is there and this lesson will show you how to prototype for it. Including the long press interaction.


Reacting once a user scroll and then doing an event delayed is a common pattern that is done in different situations. This lesson will show you how to do that.


You like challenges? Here is another one, this time you'll have to create a gallery with picture management where you can delete a picture.


If you tried the challenge and couldn't find how to do it, now follow this step by step guide in order to achieve the challenge.


You made it, congratulations!


Find in this bonus lecture a collection of resources to get inspired and learn from other people ideas. This is the quickest way to start with your animation prototypes, all for free.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Adria Jimenez, Software Engineer, Designer

I love creating software and teaching how to be more successful.

Currently I work at Xing creating software for millions of people. I've worked in other big and successful companies like Softonic, Honda or Fnac creating websites, apps, designs and software.

I really enjoy teaching people new skills so they can improve their lives.

All my life I've been surrounded by computers. As a child, my father - who was a programmer back then - introduced me to the world of computing, that marked me forever. Years later, after hours and hours in front of computers, I am dedicated to my passion: code.

I try to do my best to achieve the best result day by day.

Ready to start learning?
Take This Course