3.2 From Static to Dynamic

Now that we've successfully recreated our layout right within principal, let's go ahead and make it a little bit more interactive by making the tab bars clickable, and so that we can switch in between views. So just like in the last section, to make a section, transition to another section, we can just select a layer, hit the lightning bolt, and drag and hold the action that we want to transition to. Now in our preview window, we can see we can switch between our two art boards. But, as you can see, our transition here isn't very exciting. So let's make that a little bit more exciting. Let's give it some Motion Design. If you remember in the previous section, in order for one art board to animate to the next, a layer from the first art board has to be in the next art board so that principal will animate its position across. To do this, we're going to select one of these views and we're gonna copy it over to the first one. Follow accordingly and try and recreate this step by step. So I'm going to move this to the bottom of the art board. And then what I'm going to do is I'm going to hold shift and use my right arrow key to move across the art board. So, holding shift and moving the right key. I'm just going to move it across like that. Remember, this is still within the first art board. And this is simply just overflowing from the preview window. Now we've got that sorted. Let's change the opacity. Okay. So that's off screen. And let's see what happens when we transition between from one screen to the other. As you can see, our transition works. Switching from the first screen to the second shows us that, because one layer is already present in the first one, it just moves its position as we transition between screens. So it's the same for the first one. Let's copy that scroll view from the first view into the second art board. I'm gonna shift it across holding Shift and using the arrow keys to move it across. Adjust its opacity. I'll move it backward first so that it's nice and neat. Adjust its opacity then as we tab through on the tab bar in the preview window, we can see that our design pans across like that. Not only does this look exciting and interactive and a bit more dynamic, it sort of adds some hierarchy to our design. Showing that one screen is next to the other and we can simply switch to them by hitting the tab bar. All right, so we've done those two screens, let's add this third screen, this add new episode screen. As you can see, because the screen's a little bit different, we're going to have to re-create a new layout for this. But instead of doing a new art board, let's duplicate this art board. I'm gonna call this Add Episode Screen. And I'm just gonna tweak this art board, this duplicate, and move items across so we don't have to copy over from the first to the second when we do transitions. Again, just follow step by step and see what happens and experiment along the way. Otherwise, just sit back, watch and try to understand what's happening here. So I've moved the tab bar down and decreased the opacity. Next I'm gonna select the scroll view and I'm gonna move it down. Moving it off screen, sort of like a transition and here I'm going to decrease the opacity, there we go. Our screen is looking a little bit cleaner. We're gonna change the navigation bar up here. I'm gonna change name, by going into our assets here, just by digging through the exported files, gonna add the add new episodes. So that screen looks like the design that we have in the sketch file. I'm gonna add this Done button here so that we can sort of recreate the layout, shifting again with my arrow keys to make the design a little bit cleaner. All right, so now watch closely. First, I'm going to tidy up the art board by moving these two into the navigation. And then, I'm gonna select the add button. Watch this. I'm gonna select this add button. I'm gonna adjust the angle. I'm gonna turn this 45 degrees, so it looks like a close button. Okay. We've done that. Let's do another thing. Let's transition from the first screen to the second by adding the interactive buttons. So I'm going to add, hit this add button. Select the bolt. And when I tap, I want it to go to this screen. On the other screen, I want to do the same, but go back for the close button, to the first screen, just like that. Now, watch as I interact with the content and hit the plus. Our add icon becomes a close icon just by using a simple animation. This is really neat. It makes our design a little bit more lively and it sort of looks more sort of a little nice detail in our design. Just like that. But our transition isn't going very well, so let's copy this layer. Paste it into our previous layer and then I wanna move it across. Just as we did when we did our transitions between the two screens. I'm gonna clean this up a bit and I'm gonna use the arrow key and shift to move the cross of the site. Just like that and I'm gonna decrease the opacity. Now what that does as I tap, our check icon just moves in smoothly just like that. This is a really nice design transition, because as you can see also, the tab bar that we moved down and the scroll view that we moved down automatically zooms down. As you an see, the add episode screen isn't quite finished yet. And there's a whole bunch of other elements that I still need to drag and drop into the principal canvas to recreate the layout. So instead, in your spare time after watching this short course, try and recreate the layout yourself. And at the same time, use Principle to animate it. In fact, there's a whole another screen included in the sketch file that you can recreate in principle and animate yourself. Try and use the techniques that we've covered in the Principle basics section, and at the same time, take advantage of the other little features like drivers, the animation panel's staggering feature, and some of the little busier curves that you can play around with in the animations panel. Other than that, we've successfully created a design, in principle, from a static sketch file into a more interactive, dynamic prototype.