In this video, Emmanuel Henri demonstrates the designs from the project in the other courses, which will be the basis of the prototype used for advance animations.
- [Instructor] Our project in this course will consist of taking a design built inside of another course, and use it for building a prototype and its interactions in this course. So let's go ahead and take a look at this design. If you don't have Sketch, don't worry, we'll have all the assets exported from Sketch, as well as images, you can use them in this course without Sketch. And we also have a PDF file, so if you want to take a look at the PDF file, it's inside of the resources right here. So it should be right below the sketch file. So we have the sketch file right here, and we have the same file in a PDF, so if you want to go ahead, you can open the purchase flow, which is the sketch file. Otherwise, you can follow along with the PDF. So these are our designs, so this is what we've built inside of another course, and we have the shopping view, item detail, user area, and then we have the purchase experience, which is a cart view, shipping view, payment view, and then success view. So we've built this inside of another course, what we're going to do now is leverage these designs and create interactions inside of Framer. So if you want to explore more, what you have in here is the inspiration for the design, so let me just use command and the scrolling wheel to zoom out a little bit. And then shift and then scrolling wheel to kind of move sideways, you're going to see that we had an inspiration board where we explored the colors, the design, so many shapes that we wanted to borrow from, and then the mock-ups to kind of give us an idea of what the design should look like. And then the symbols inside of Sketch are basically the things that we created to reuse across our designs. So what we're going to do next is make sure that we have all the tools that we need to copy and paste directly from Sketch to Framer X. If that's not the case for you, if you don't have Sketch, what you could do is rebuild in Framer X the designs from the assets that we have in our resources, so if we go back to the folder, in the resources you have all the same assets that we've actually sliced up and exported for you so you can use to create the same designs based off the PDF. So what I would recommend for those that don't have Sketch, is use the PDF as a guide, and then use the images here. But you can also have a trial version of Sketch that you can borrow from and follow along in this course, so if you want to do the copy and paste that we're going to do next, then install the trial version of Sketch and then just do what we're going to do. All right, so now that we have explored the assets, we're going to install all the tools that we need, and make sure that you have the right plugins to copy and paste from Sketch to Framer X.
- Setting up design files
- Importing and exporting files
- Enabling side-scrolling
- Adding animation to scrolling
- Animating the summary detail
- Transitioning to the detail card
- Inserting video elements
- Inserting sounds
- Adding SVG animations
- Delivering for review