Mobile App Prototyping: Designing Custom Interactions

1. Introduction: Hi. I'm Noah, and I'm a Product Designer currently living in San Francisco, and this class is about custom high-fidelity mobile prototypes using Framer. For the past four and half years, I led the design team at Google working on the Google app for iOS, and our goal is to build a mobile assistant right in your pocket that would allow you to look up all kinds of information from Google Search. If you're like me, and you've been designing for a while, when we first made the transition over to mobile, there was a lot of new things to pick up. Not only did people expect information faster, tasks were a little bit more transient, there's also a whole new level of types of interactions including swiping, and dragging, and even speaking with your voice, and yet we didn't really have the design tools that could catch up with that type of designing. So, fortunately, I learned about Framer a couple of years ago and started using it in our process to start to define those types of interactions. That meant by using your phone directly to show your ideas instead of looking up on a screen, you could start to get the sense for how much more opportunity you had to change your design, to make things easier to use, and to make things really delightful to play with. There are three different exercises that we're going to go through in this course. If you've done all three of them, then you're going to learn the basics of Framer including animation, including events like clicking, and dragging, and swiping, and everything like that, and also including Sketch import. One of the great things about Framer is that if you've used Sketch before, you can in one click import your designs into your prototype and start manipulating them right away. So, for the first example, we're going to go over the basics of animation. When I click an object, how do I animate it around? That includes things like physics. I'm still thinking more about the timing and the curves that happen when something moves across the screen to basically give you more detail there. For the second exercise, we're going to go through a walkthrough of a mobile app. Basically, when you first open an app, sometimes you'll notice there's a few screens you swipe through to get the gist of what the app is about. That's a pretty common mobile pattern, and so, we're going to go over that. You can even use your own examples in that one if you'd like, but I've provided examples for each of these for you. For the third one, we're going to import a to-do list app from Sketch and learn how to swipe something away, learn how to make a scrollable view. If you've taken the Skillshare class for Sketch, you can actually use your design from that course and import it into Framer and make it come to life. There's three main things that I hope you'll take away from this class. The first one is that you will learn why prototyping is important, why it can help you in your process, and how to really apply it to your day-to-day work as a designer? You'll learn how to build very high-fidelity prototypes, custom types of prototypes that allow for a lot more detail. Lastly, you'll hopefully actually pick up if you haven't coded before. This is a great way to get the basics of coding down. It's not a requirement for this course that you've coded to use Framer. It certainly helps, but you can just follow along, and I think you'll you'll come up with a lot of new insights along the way. So, in this class, for those three exercises, you can either upload one or all of them depending on how many you get around to doing. Either way, please just go ahead and try it because I'm around for feedback on those, or advice, or if you run into issues, you can mention it there at any time or even on the Facebook group which I've linked to in the resources. So, just be sure to give it a shot, maybe upload a GIF of it if you'd want or an image or a screenshot. One GIF tool I like to use is called LICEcap, and I'll mention more about that in the discussion as well. But definitely go ahead and upload your project that includes those three examples or again, whatever one you decide to do. 2. Why Prototyping?: A really common question about prototyping is that there are so many tools out there, and how are you supposed to figure out which tool you should use. I'm going to break down basically all the different options that are out there at least a big set of them to help you have a framework in mind for when you could use each of them. On one end of the spectrum, you have a set of simple tools. These are things that are very very easy to use and quick to pick up, and they let you do things like click-throughs, they let you do basic animations, and these are tools like Envision and Flinto that are really quite popular because you can just immediately start using them to put together screens of your interface. On the far other end of the spectrum, we have tools that are harder to learn, but also let you do a lot more. These are higher fidelity tools like the ones we're using today, framer. These tools might take a little bit longer but actually let you define really custom next generation interactions instead of things that are just built-in directly into your device. They also sometimes let you tap into the phone's native capabilities like using the camera and so on. In-between that spectrum, there's a whole set of tools that are not too hard to use, they are pretty decent to pick up and actually do let you do some things that are custom, and so they blend the best of both worlds in a lot of ways but it really just depends on what you want. So, the next most common question when it comes to prototyping is when is it actually appropriate to prototype? Because it turns out it's not always the right time to do it, and also certain parts of the design process might require different tools in different places. So, there's really five different types of things to think about when you're thinking about when should I prototype. The first one is process, which is where along the timeline of your development process are you in? If you're on the way end, and you already have a working app and you're really just tuning details, it probably doesn't make sense for you to use tools that give you high level click-throughs of things. But if you're in the way beginning of a process, you probably don't want to spend a ton of time or too much time in code in a way that might hamper the ability to just really identify what the core problem is you're trying to solve. It's better to make sure you use tools that are quick and easy to use and really let you just decide what problem space you should be working in. The second one is constraints. With constraints you really want to think about what does your development team, what are they capable of doing? If it's a bunch of people who are new to engineering, you might not want to complicate things or confused them with next-generation custom flashing interfaces, right? It's probably better to stick to the basics and use the built-in components. So you might not want to use a more advanced tool in that case. The third thing to keep in mind is time. How much time do you have? If you have a ton of time and all the resources in the world, then great! You can prototype multiple generations of something until you're really happy with it and then jump in and engineer it. If you don't really have a lot of time at all, one trick you can actually do is maybe lean on your engineering team for that proto-typing which can save you a little bit of time in that case so that you don't have to do the redundant work of specifying it once on yourself, and then the engineer doing it again anyway. The fourth thing to keep in mind is context. What does this app need to have? Does it need to be responsive? Does it need to work with real data? All of those different types of variables might affect which tool you're able to use. For example, if you're using real data only a few of the tools that we mentioned actually allow you to do that. Usually ones that are a little bit harder to pick up anyway. If it's something maybe that needs voice interaction, your camera, all of these things might affect which tool you use. The last one is personal comfort. The truth of the matter is there's not one dominant best prototyping tool. There's not one tool that you're supposed to use for everything. That's just not the case. Because honestly it depends a bit on just you and what you'd like to use, and I think it's best to not enforce one specific process and way of making something. You should just use what you're comfortable with. So, it's really up to you. 3. Prototype 1: Create an Animation: Hi, and welcome to your first Framer exercise. If you haven't already, go to framerjs.com and download the free trial so we can get started. When you've done that open Framer, and you'll notice you're greeted with a welcome window that has a set of common examples of interaction components you might use Framer for, and also a link to learn more and also a link to our community which is a really great place to go to ask questions, or see examples, give feedback, whatever it might be. We're going to start by clicking on the plus icon to start a new Framer document. I provided you with an image of Buzz Lightyear for this, but you're really welcome to use whatever image you want from the Internet. That's totally fine. When you have the image you'd like, drag directly onto the phone, and you'll notice he appears right on the screen. When we did that a few things happened. You'll notice on the way left, a snippet of code appeared which defines Buzz Lightyear's width, his height and a link to the image. This is written in something called CoffeeScript, which is a simpler cleaner version of JavaScript. If you haven't coded before, that's totally fine. Just follow along, and if you have any questions, you can feel free to post to the discussion. We'll do our best to answer them. You'll notice in the middle there is the layer panel which has a link to where the image is shown on the right, and if you have lots of layers, it is very helpful to tell where everything is. For now, we're going to start by renaming the image layer to Buzz, just to make it a little easier to work with, and you'll see the layer panel updated accordingly. So, the first thing we're going to do is learn about some of the properties that Framer lets you change for your images. So, for example, when you type in buzz. autocomplete gives you a bunch of different options. It gives you its x and y and blur. It gives you size and so on, scale. For now, let's go ahead and play with scale, and maybe we'll double it. You can see Buzz immediately updates on the right, which is really great for instant feedback. You can make it really small. For now, we'll go ahead and make it 0.8. We also want to change Buzz's position. We can do that no problem. So, you can see he move down a bit. If I go to 500, even further. Let's make him close to the bottom here. Looks pretty good. We also might want to change his x position. You can do that by changing his x position directly. We you can also use something we call methods to help speed up the process, if there's something specific you want to do, like center it. So, here we've centered Buzz's x position horizontally. You can center it vertically, or both. In this case, we just want to center it horizontally. Now, what we want to do is start bringing this to life. We want to start doing what Framer's really good at, which is adding events for clicking or dragging, and animating, and so on. So, there's all things we can do. One really fun one I like to start with sometimes is making the item draggable. All you do for that is set draggable enabled to true, and already you can fly Buzz around, which is really cool. You'll notice he even has momentum built-in for free. It's a lot of fun. We're not going to do a whole lot with dragging in this example. We'll do it more in future examples. But it's a really fun one to start with, because of how easy it is. But what we are going to start with is adding an event, so that when I click buzz something happens. So, to do that, we're going to type in Buzz.on and look at the series of events that Framer gives us. For this case, we're just going to go ahead and with a click. We're going to want to basically move Buzz in the air when you click it. To do that, we can change its y position to something like, I don't know, 100. Now, if you move your cursor to the right, you click on Buzz, he jumps into the air. But you'll notice, he just snaps, and that's not very interesting. We want to really animated him and make it look like he's actually flying. In real life, things don't just teleport from A to B, be cool if they did, but they don't. So, we want to animate this, and to do that, all we have to do is type in Buzz.animate and start giving some properties. So, let's for example, animate the same thing. Now he flies in the air. You can either hit the reload button or command R to refresh and try again. Pretty cool. Now, one thing to point out is that CoffeeScript uses something called indentations to mark which lines of code refer to what. So, in this case, anything that I write here with this x and y, refers to the closest parent where the closest line behind it that is not indented, which in this case is properties. Similarly, on the way top, when we've specified the width and height of Buzz, all of those things refer to the layer itself. If you've used things like JavaScript, you might recognize things like brackets that tend to happen that block things, into place. It's like that, only a little bit cleaner. So, the next thing we want to do is notice that the movement is happening very slowly, and it's also happening at the same rate over time. So, let's first set the speed. You can go ahead and add the number of seconds that you prefer for this animation to happen. So, in this case it's one second, a little bit better. But I can make it a half a second or even a quarter of a second, and see how it affects things. It's fun. You can already get a sense for how I can change just a few things and get a sense for how it feels until I'm happy with it. I might even want to start adding a few more properties like rotation, maybe scale. Pretty cool. So, I also mentioned that it's not only the speed we want to look at, but the rate over time at which it's animating. So, for that, we have something called curves. Curves allow you to specify different types of ways you might want your layer to animate. In this case, I want to have it feel like it's a real physical object, there's something, like it's actually affected by the rules of physics. So, let's give it a spring, and I'll explain what that means in a second. So, now you'll notice, when I click on Buzz, he springs and bounces off the top of the screen, which is pretty cool. So, what is that, and how do we do it? You'll notice that there's three values there. Let's go ahead and pop over to the Framer website to take a look at what those do. There's a great little tool that allows you to change these different variables, and see how they affect the animation, which is a really fun and fast way to decide how you want your animation to feel. So, as I change this, things get bouncier or less bouncy. If you want to know a little bit more about why this is, one way I like to think about it is to think about these as real objects, and to think about how those objects would move should they have been real. So, for example, if I throw a ball against the wall, it doesn't just go at a smooth rate over time and stop at the end, it has some physics applied to it. Right? When it hits the wall, it might bounce. If it's a rock, it might be affected in a certain way, the weight of the rock might change things. So, in this case, those three variables refer to tension which could be seen as bounciness, again maybe the shape of it, could be seen as friction which is maybe the weight of the object and how that affects its speed over time, and also velocity which is a windup how much initial force you're giving it in the beginning. I actually don't tend to find that we need to use velocity. You can use it if you want, but I like to keep things simple, and just use two properties, which is just fine. So, if that feels to springy, you can just play around until you're happy. So, the next thing we want to do is give Buzz as a series of states to play with. So, right now, he just flies in the air, but what if we want them to do a few different things? Well, Framer makes that really easy with something called states. What we want to do is define a name for the state, which we'll call flying, and give it a bunch of properties. We can use the same ones that we used up there, you can even copy and paste them if you want. You can use command bracket to indent back and forth as you'd like as well. To call that state, all you have to do is type in states.next. Now, when I click him, he animates up and right back down. Now, the reason it knows to go back down is because Framer states understand where the item was positioned initially, and remembers that as its default so that it will reverse from its default state to the state that you've defined. But it's happening slowly again. So, we want to remember to bring back in that curve that we used. To do that, all you have to do is type in animation options, and give it those properties. Now, it springs. You can add as many states as you want. So, if I want to add another one, and I want to start changing things around a bit, playing things between them, maybe I want to give maybe a flip effect, which could be cool. So, I want to flip it around its y-axis, so it flips horizontally. Maybe, I want its scale to be moved around in some way, and there you go. Three different states. Pretty cool. Now, just to make it a little bit more interesting, right now we only have one layer. What if we wanted to change the background by adding another layer? All you have to do is add a background. By default, it applies white, but you can really add any color you want. So, in this case, let's go ahead and add a nice soft blue. Looks pretty good. Finally, we can share this with anyone we want with just one simple click. By going over to the share button in the toolbar, it's going to ask you to save, which is a good thing to get in the habit of doing. When you do, we've got a link to the prototype, copy to the clipboard, and it's already loaded up in Chrome. You can play with it directly in the browser, which is great, because you can share it with friends, or coworkers, whoever just by sharing that URL. When you're looking at Framer prototype, you'll notice that you can also click open if you're viewing someone else's prototype to open it directly in Framer and see how they made it, or download it if that's what you prefer. You can also view these directly on your phone, which is really useful while you're prototyping. Some people like clicking the mirror button, which gives you a set of apps that you can download on your phone, and view them in full screen, and they even allow you to preview in real time so that you can make changes and see what they feel like, which is super useful. Now, the last thing I'll mention is just a few tips in case you get stuck or anything. We have in the tool bar something called snippets which gives you a set of commonly used items in the snippets of code that are used to create them. So, today we talked about states. So, you can click on that one, and you'll notice a bunch of code gets added. It reminds you how to do these things, and you can play with them directly on the right, which I like to use so I can copy and paste things if I forget some of the syntax. But another thing you can do is you can click on documentation, which has everything available on the left-hand side. You can even search it. Today, we talked about states again. So, we learned about animation options, we learned about how to animate between them, and there's even all other ones we didn't use that you can play with whenever you want. Finally, as you're typing in, notice that different properties appear. You can even click a little shortcut on the bottom right to see what that property is referring to and what it does, which is really useful. So, now you've learned the basics of how to click and animate things, you've learned about events a little bit, and properties, and the layer panel, how to share. With all this knowledge, it'll be awesome if you went ahead and created a project in Skillshare and showed us what you got. Play around with different types of properties, animate them, make it interesting, and share it so we can talk about it. 4. Prototype 2: Create a Transition: What we're going to learn in this exercise is how to use sketch and import your files directly into Framer to make your prototypes that much faster. We're going to do that with an example from Google Docs which is the on-boarding or first run experience and you can use whatever images you want for this really but in the meantime, I've provided you with a sketch document. If you don't have Sketch already, make sure to go to sketchapp.com and get the free trial. If you haven't used it, I highly recommend taking Andrew Markandos sketch course on Skillshare, it's a really great way to get started and if you haven't it's totally fine just follow along. We're going to open the sketch file and you'll notice that the images are separated into different art boards. These images are each swipeable screen that you'll have. You'll also notice there's indicator dots shown at the bottom. So, with this file open, all we're going to do is start a new Framer document with command N and import the sketch file. Framer already knows which sketch file is open which makes this super fast and easy you just click one button and your file's right there already. You'll notice if you mouse over the middle here that I've got all the same layers that I had access to in sketch directly in Framer which is super nice. It's turned off by default all of the different art boards that were not the first one. So, Framer just assumes you want to work with the first one right away. So, one thing to point out is that that structure, the layer hierarchy if you will, the grouping is the same in Sketch as it is in Framer, which is super nice. So, if I make changes at anytime say I rename this indicator dots or something, it's best not to use spaces I highly recommend just keeping it simple it'll make it easier so you don't have to type in underscores and code and when you hit "Save", go back to Framer and you can either use Command Shift I or just click "Import" again whatever you prefer to import the file again and you'll notice it's updated. Same goes for any images or things that you change on the image itself, it'll just upload without hurting your code at all which is really really nice. So, the first thing we're going to do is start to play around with some of these layers and code. We have to prefix whatever layer we're modifying with the name of this object that carries all of that information and we can name it whatever we want to, so we can type in Sketch if that's a little shorter. You'll notice that we've already have preceded in autocomplete the layers that I might want to manipulate which is super nice and if I want to change its value just like we learned in the first exercise, I can just do that. So, I can move it down. So, that's how we'll modify each layer as we need to. So, the first thing we want to do is actually make some of these art boards visible. Really all of them because we want them all to be shown as the user scans from page to page. So, to do that, set visible equal to true and you'll notice that the layer is now shown. All we need to do is copy that a few times and make sure that all the layers are shown as needed. One thing that's neat is as you mouse over these, notice how the code on the left actually highlights to the layer that is using that code in some way. This becomes really useful especially for longer documents so you can find where you're referred to each thing. So, the next thing we'll want to do is to make those indicator dots show up on the way top of the document so that we never lose them. Right now, they're just shown hidden inside of art board A and so if you were to be swiping through, you wouldn't see them anymore. So, the way to do that is we type in the name and we change its super layer referring to its parent from what was art board A to the entire Framer document. We can do that by just referring to the Framer screen. Now you'll notice on the right, it's shown at the way top of the document and they're on top of all the layers which is really great. The next thing we want to do is to wrap all of these different art boards into what we call a page component, think of it like if you have a binding for a book and you want to put all of the different pages into that binding so you have one seamless book, that's what we're doing. We want to make sure art board A, B, C, D and E all wrap inside of the same book. So, the way to do that is by typing in pages equals page component. Pages is just the name that we happen to choose for this you can call it really whatever you want. Page component is the name of the Framer reference for a swipeable paging view, and we want to wrap the first art board to do that just to get started. Now there's really just one page in this book, right? We've got this first art board, we want to really add all of the other ones to it and we do that simply by typing in pages.addPage and then type in the art boards one at a time. You'll notice each time we do that that the pages are placed inside of this wrapper in art board A. You can even see if you mouse over page content that we're now setting them up side-by-side. Framer does all the hard work for you here, you don't have to position anything yourself. It just knows based on the width of each image that you want them to be pages of the same width. Once we've added every single page, go ahead and try swiping. Pretty cool, in just a few line of codes, we have a swiping view but we're not done yet. Notice how every time I swipe whether horizontally or vertically everything's shifted around wouldn't it be weird if that happened in your app. We don't want that. So, Framer gives us just a line of code to fix that. All we have to do is type in pages.scrollVertical equals false and there you have it, everything is swipeable. But it's not done because those indicator dots in the bottom are staying and we want those to move depending on which page you're on. So, we're going to need to basically change something based on an event that happens. So, the event we want to listen to in this case is when the page changes. To do that we have something that we call change current page which is something we can listen to that let's us know when the page is changed, that something has happened. The way we can make sure it worked is by typing in a debug setting called print, you can type in whatever you want there and as you change the page, notice how Framer pops up this little window with the text that you decided to verify that the event was triggered. So, every time I swipe, it says 'YAY! ' Awesome. You can always comment things out by hitting command slash or typing in a hashtag in the beginning, which means that it's just not going to be read as code but it's nice to keep around as notes so that you can remember what you've done. Just like you can see at the top, that this comment reminds us that this is all of the layers from Sketch imported into one. So, now what we want to do is as you change the page, we need to update those indicator dots. So, I'm going to refresh to clear out the print document and now I'm going to change this indicator dot by typing in sketch.IndicatorDots but really what I want is to move just the selected dot. So, really we're going to call selected. All I want to do is I want to change its x position depending on what page we're on. So, to do that we're going to move its x position around for now you can try something silly like plus equals which means take it from its current position add it to whatever number you type in like 20. Now each time I go it's going to move over a little bit. But that's not really what we want, right? Because when I go left it's going to keep going forward cause every time I change the page, we're adding 20, and that's not really going to help. So, what I want to try doing is setting it kind of dependent on what page we're on. To do that, I can basically look up what page we're on with a simple method called horizontal page index. This means because we're swiping horizontally, we want to know what index of the page we're currently on. But right now, if we were to for example print that to see what it's doing cause you'll notice nothing's happening. We can just go ahead and print that same line and you'll see that it is actually moving but just by one and as you go backwards and forwards accordingly, it prints what page you're on. So, go ahead and comment that out and now that we know it's going to return the number of each page, we need to multiply that by basically the width of anything between the dots so that it'll jump to that state. So, we can take the width of the selected dot by typing in sketch.Selected.width and multiply that by the index. If you refresh you swipe across, you'll notice it's almost there, it's moving forward and backward as needed but not quite the right distance. That's because we're moving a distance of one dot but really they're spaced two dots apart. So, I got to do is multiply it by two and there you have it. So, we're going to stop there if you want to learn more advanced things here, you can actually take a look at the example I provided in the discussion board, which will let you see a more advanced method that animates things as you're dragging across but for now, this should be good enough to go so why don't you go ahead and try importing your own on-boarding example and sharing it as a project in the course. 5. Prototype 3: Create a To-do App Action: For this last example, we're going to learn how to make an interactive to do app. This involves taking what we've learned from the first two lessons about animation and sketch importing and adding on how to use a scroll component to have a scrollable list as well as a draggable component that animates content like this check mark as you drag. I've already created an example sketch file called done for us to use for this exercise. If you'd like to make it even more interesting, you can actually use your own custom to do app design if you've taken Andrew's sketch class on Skillshare. So, to start, let's go ahead and open the example file and take a look at how it's structured. You'll notice first that there is a group called "List content" in that this nicely fits beneath the header at the top and beneath the floating action button at the bottom. You'll notice that every layer is grouped with a very easy to read name which we can then use to modify them when we jump into Framer. So, it's important to keep this clean and tidy. So, with that said, let's jump right into Framer and see how we can start bringing this thing to life. So, we're going to create a new document. I'm going to import the sketch file that we have open and we're going to rename this sketch as we did in the last example, just to make it easier to write. The first thing we're going to do is make the list contents scrollable. We're going to do that by creating a new object called Scroll and just as we did with the page component in the last exercise, we're going to make it a scroll component and wrap the list content layer. So, as you'll notice, it's already scrollable which is pretty cool. All we had to do is wrap it using the correct grouped layer. Now the next thing we want to do is make sure that it doesn't scroll horizontally as it's doing now. If you remember from the last example, it's actually the same bit of code. So, now it only goes up and down. Great. The next thing we want to do is animate the first task called Task one call mom and allow it to be draggable. To do that, we refer to the layer and we type in draggable.enabled is true. You'll notice it works. I can drag it around but it's not quite the interaction we want. It's flying off the screen, you'll notice that if I refresh here, I can drag the whole scroll view and the item at the same time, it's not quite ideal. So, there's a bunch of things we're going to want to do. The first thing is locking and making sure that you can't scroll it vertically because that's just redundant not working very well. So, let's take all of this and make sure that we set vertical to false. Now we can only scroll it horizontally. Great. One thing you might notice is in this example and in the last one, we've had to type sketch dot before we access any of the layers that we've imported from Sketch. Over time that can get a little tiring and so Framer actually gives you a little shortcut to speed things up. All you have to do is call a utility called Global layers and type in the name of the object that holds all of your sketch layers. Now, we can simply not include the prefix and everything should still work just as it did. Great, that'll speed things up a little. Next what we want to do is add something called a direction lock, so that I can't drag two things at once when I don't want to. For example, if I'm just trying to drag this first task and the list is scrolling on me that might not be great. Similarly, if I'm trying to scroll and I'm also moving the top list that might feel weird too. Fortunately, Framer makes this super easy. All I have to do is type in scroll in this case because that's the scroll component we want to effect and we want to make sure that when you're dragging it, that it's locked and we want to do that for both the scroll content and also we want to do it for the task content. Which means as you move, I can't go either way here and as I'd scroll this, I can't scroll up and down. Wonderful. The next thing we want to do is add an animation so that when I drag the task, if I don't move it past a certain threshold, it should just snap right back to the beginning. So, to do that we're going to need to basically call an event once I've let go of the drag because it shouldn't happen as I'm moving or when I start, it should happen when I release. So, to do that, all I want to do is listen for when I've moved this task. So task1.on Events and again when I've ended it, I want to call some animation here. So, all we do is animate the task. We basically want its x to reset to zero. Maybe we want to add a small spring to that so that it feels nice. In this case, you can see it bounces slightly back into place which is a nice reminder that this thing is physical in some way, that it's something that can move. But we don't want it to just come back to place every time, right? If you reach past a certain point, we want it to animate a way. So, to do that what we want to do is check where this position is as you're dragging it. So that we know at what point should we trigger a flag and say hey, I'm exactly where I need to be to transition off and so what we can do to make that easier is we can look for another event called drag move and this event is called every time you move an item across the screen. So, in this case, we want to basically look at by printing it where is the x position of this task. You'll notice at the bottom that it's printing every single x value as I move it across the screen. So, you can tell that if it's really far to the left, it's in the negatives because it's behind zero. If you move it really far to the right, it goes upward into the 200s and further. We really want to market as complete whatever you want and one of the beautiful things about proto-typing is here you can make that decision instead of leaving it up to your engineers. You as the designer can have some impact on the exact way that something really feels. So, in this case, I think something around 250 should feel pretty good. So, we don't really need this anymore I'm just going to come to that for now and instead, we want to write something called an if statement. To see if the task has moved a certain far amount across the screen do something if it's not do something else. So in this case, we want to see has it gone past 250 pixels. So, if it's less than 250, let's snap it right back and if it is not so else, then let's for now let's just print something just so we can make sure it's working. Again, because coffee script uses indentation everything that is indented after this if statement refers to something that should happen here everything indented after the else happens afterward. So, here you can check if I move it pretty far across the screen, it says "Hello" and if I move it just a little bit, it'll snap right back or even if I go into the negatives because that's still less than 250. So, it's working pretty well but instead of printing "Hello" what we really wanted to do is to slide off the screen. So, you can feel free to copy and paste the existing animation but instead of the x being zero, we want it to go pretty far off the screen. So, I'm going to write 750 which is the width of the screen so it at least goes off. Let's see if it worked. So, if I drag a little bit less than 250, it snaps back if I go more than 250, it slides off. Awesome, it's a pretty good start. There's still a bunch more to do, right? We want to animate that checkmark so that it comes up as you drag and we also want to make sure that we slide off the rest of the items. We want to slide them up a little bit so that they replace what you had just dragged off. Let's do that one first. So, what we're saying is if it drags off the screen, let's add a comment to make this clearer. So, everything again that happens in this indentation happens after this else-statement is been called. So, what we want to do is basically move up all of these different objects, task two, task three, and all of done and just shift it upward. So, to do that, let's go ahead and start with the done one first. Let's take done and animate it. We want to bring it up in Y value and we want to bring it up to, for now, let's say about where task three was started. So, to do that, we just want to bring its Y value up to where task three is currently positioned, which looks like it's about 380 pixel if you look at that. We can give it a curve if we want or we can just simplify it and keep it as a time function. You can even use, if you've used CSS before, you've probably heard of cubic beziers, and you can use any of those or you can even just use ease in or out something like that. In this case, we can just use ease out, which instead of a spring is just a easing out function, so we can see what it looks like here. So, it looks like as I slid across, those items moved up as I expected. It was a little too quick. So, let's see if I slow it down. Getting better but we still need to move tasks one, tasks two and three. So, let's do it. Task two, let's animate it. Let's give you a bunch more room here so you can read a bit better. Let's set its Y value to where task one was. We can set the same time and let's do the same for task three. We want to set it to where task two was. So, as I go across, everything slides up. Now, if you notice carefully, the spacing between done in the bottom of this group is not moving exactly at the same rate. It almost looks like it's parallaxed a bit, which is a neat effect but maybe not what we want. So, I just want to tweak the done Y positioning just a bit further down and I can just use math and I can just add, let's put it 20 pixels down further. That looks a bit better, maybe even a little bit more. That was too much. Maybe, 20 was just fine. Yeah, it looks pretty good. So now, we successfully can swipe something off and animate the content up the screen. But what we want to do next is as you're dragging the item, allow the check mark to move. So, if we look back at where we were checking for the X positioning of this item called task one, we can un-comment that now and re-use it a bit or if you just deleted it, that's fine, just type it in again. What we want to do is we want to change something about that check mark which is called completed check. For now, let's mess with its opacity. So by default, it's opacity was set to one. So, if we just leave it at that, nothing will really change. It's just stayed at one the whole time. If we set it to zero, you notice it's gone. But what we really want is for it to animate as you're dragging, not to do one or the other. So to do that, what we can actually do is use a method called modulate, which sounds crazy but it's actually pretty simple. So, to learn more about how it works, we can actually just go straight into the docs and take a look at it. So, it looks like it takes in a value, which is the input of the modulate, meaning, what am I feeding into this that should change over time. So, you can think of it like maybe you're converting Celsius to Fahrenheit and in that case, as it moves between zero and 100, you would want Fahrenheit to read somewhere between 32 and 212, so, that they mapped to each other appropriately. So in this case, what we want to do is we want to map the X position of the task to an opacity value between zero and one of the check mark. So, let's try it out. If I take task one's X value as the input, then if you remember from the docs, and you can always look again if you want to reference them, we have two ranges to put in. The first range should be when we basically want to start this animation, which should be, I don't know, somewhere around 100 to 250. Right? That's referring to the X position of the task. Then we want to make the opacity go from zero to one during that range. So, let's give it a shot. Pretty good. So, now we've got the check mark animating with its opacity with your drag position. Now, for one last little detail, let's do the same thing but let's do it with the scale value of the check mark. So, we can copy and paste it, change it to scale and see what happens. Now, you'll notice, it goes way too far as I go out and if we look at the documentation again for modulate, you'll notice there's something called limit. It's set to false by default meaning, there's really no limit. So, if you go past this point, for example in that conversion, it would still be able to do it. But we don't actually want that because we don't want it to go past the position of you dragging. So, what we want to do here then is say, "Hey, we actually want the limit to be real." Then, as you notice, it stays in place as you want. Pretty good. So, that covers a good chunk of a lot of tips and tricks that you can use to create animated prototypes in Framer. One other shortcut that's interesting is, you can actually specify instead of typing in all of these curves over and over again. You can actually type in a default animation, which is something that you might want to do. The way you do that is you set defaults for your animation, and we want to set basically a default curve and in this case a spring. Just choose one and now you can actually get rid of things that you've specified one-by-one. Notice that it's still bounces a bit and if I take these out too, everything still animates. Go ahead and give this a shot. I would love to see you upload a project file by sharing it and that way, we can take a look at it and add it to your project. If you wanted to go crazy to use your own custom design for the sketch file, that would be great too. One thing to notice for that is that the sketch file here, you'll notice if you click on the airport is 750 pixels wide. If you take the sketch class, you'll probably be doing things at one x so in this case, 375 width. But framer actually needs you to use the exact resolution of what you're adding in your prototype. So, you'll want to double everything if you're using that class but for this case the example that I provided should be enough and you can even just customize the style of it yourself and go ahead and upload whatever changes you can think of, maybe you can change the background of the- if I move this across you've got this green color here, you could go in and maybe change that a bit if you wanted to do something different. Get creative and I would love to see what you got. Feel free to post questions to either the discussion group or if you're looking for a faster response time, I would facebook.com/groups/framerJS which has a really active community where people answer questions all the time very quickly instead of it just being me. 6. Your Final Prototypes: So, at this point, hopefully, you've created those three exercises which really taught you the basics of how to create a high-fidelity mobile prototype directly on your phone. With that, you've learned how to animate things and think a little bit more about spring physics, you've learned how to tie together a bunch of screens using sketch and import them directly into your prototype, and you've learned how to take all kinds of user input from dragging to swiping, to paging, and really incorporated that to build these complex prototypes whenever you need. So, again, go ahead and upload those projects that you've done so we can talk about them more, and I hope you enjoyed the class. 7. Explore Design on Skillshare: way.