Learn how to create advanced animated states and interaction models in Framer, and improve your prototyping process for mobile apps.
Do you feel ready to take your interaction and animation skills to the next level? Do you know the basics of Framer but find yourself wondering about using states, video, SVGs and more to enhance your prototypes? Well if you answered yes to any of the above questions, you've come to the right course. In this course, I'll teach you about states, methods, using video, sound and SVGs inside of Framer. Hi, I'm Manny Henri. And I've been working with Framer since it was introduced. And it is my great pleasure to help you learn more about this amazing tool for prototyping.
First, we'll go through importing assets into Framer using your design built in Sketch. Then, we'll use a scroll component to create a side scrolling element in our prototype. Next, we'll build a few animations leveraging states and its methods. Then, we'll show you how to add sound and video to the prototype. (electronic pinging) Finally, we'll go through animating SVG inside of Framer. This course should be great for you even if you don't use Sketch because I'll provide all of the resources necessary to get us started.
So if you're ready to bring your prototyping skills to the next level, fire up Framer and let's get started.
- Setting up design files in Sketch
- Importing files into Framer
- Adding background elements
- Side scrolling with cards
- Creating quick interactions
- Fixing potential layer conflict issues for interaction
- Switching to different menus with animations
- Adding sound, videos, and SVG animations