Framer X Crash Course: Create A Fully Working Prototype!

1. Welcome: I My name's case and I'm the user interface in use of experiences line I specialize in creating why frames prototypes in high fidelity layouts. Over the course of my design career, I developed a consistent workflow by keeping on top of the industry trends involved a tech and design fields. This has led to me finding new ways to add a unique level of dynamic nous to the products that I create in this class would be looking at frame eggs. I'll be walking you through the entire process of bringing your designs alive. So she's utilizing components, adding events and explore the internal Freeman stores that you could get hands on experience in using the latest potential. Behind this software is immense. As we go through each stage of the interactive process, I'll take the time to explain what each total feature does and why did it a specific. Before we continue with this class, go ahead and download the attached project files in There will be a class project which will give you the opportunity to experiment in practice in order in time. If you want to see more of my work, make sure to head over to the skill share profile or connected me on other social platforms . Such drivel on Twitter also feel free to keep this profile of follow to keep up to date of any future classes about anything designed in you know it's related. Feel free to reach out to me if you have any questions or feedback on how this course could be improved, ready to get started, so let's begin. 2. Overview of Framer X: hi, guys. And welcome back to the next part of this video. I'll be giving you a quick overview of the frame X software such as tor any interface and take a look at what some of the features do. This is just to give you a feel for what the platform is gonna be like before we get into actually creating a prototype. What's cool about this is a potential behind it and the way it's been received within the community, specifically amongst designers. As I felt that with the previous version, it had a rather steep learning curve, which meant that if you weren't familiar with JavaScript, getting to grips with the basics in taxes and making the most of the prototyping process seemed like a dot and task to many people. And despite frame of X still using the code based engine this time react, The actual prototyping process itself has been made much more friendly and intuitive, and definitely rivals the likes of envision studio in a doobie exceeds prototyping, feature or far outweigh in principle in terms of simplicity. Therefore, I feel it's beneficial to learn this because as designers not only can we create amazing interactions. We can also see the power of reacting, how it works without actually having to write any reactivate itself. So without further ado, let's open up the main interface and explosive with the features. Okay, so here we are in free mags, as you can see, not a lots going on. However, we have selected this type here, which is where the main magic begins. The happen it's called tools and in there is split into four sections, which is layout interactive. Drawing in canvas decision allows you to control not only the design process but also the prototyping process. This poll probably seem very familiar to you, but to open up more of the interface, let's select free and choose a campus in which the design for Senator How envisioning sketch Do we have the option to choose watch, phone, tablet, computer or TV? For the purposes of this, let's choose iPhone eggs, and it's like the round tour to open up the property stuff. Now that I've created circle, you'll see on the layers tub that is nested within this iPhone for him on here, you have the property stuff they probably looks very familiar to have it looks on sketch in here, you can align it. Set the position in for responsiveness as seen by the animation below, said the within the height, the overflow to show or hide, as well as things like the A, Passy, the rotation and the Radius. You can also turn this into a link by making this a clickable event that will take you to the next page is what edit the code. It's like the blending option or change other familiar things that should have feel color and other style elements like the border in the shadows. You could also explore it individually or as a whole canvas. Dependent on the requirements, however, will touch on news in a later video within a tool section. You'll also see three other important elements, which a stack link and scroll stack is essentially a flex books attribute that enables you to distribute an organized lists, but for clean horizontally in an easy and efficient manner. Link is essentially the process of linking screen so that you could go between them and scroll is a scroll component will enable you to scroll within a mask on a certain page below that under drawing, you have graphic, which is where you can create and edit vector shapes and paths. And lastly, under canvas, you have basic navigational options. Such a select zoom and pan this issue so you can move around the page and zoom in as you design. All right, so I haven't looked at the design side of things, and I feel the need to go into too much detail. Was it sort ready to be straightforward in similar to all the Softwares? Therefore, let's look at components now similar to symbols, and sketch components are essentially reusable elements. It could be distributed across multiple pages, however, only need to be edited once. In order to use your own components, you can create them using even design or code. If you're a designer, of course, your favor this. However, if you're a developer or someone who's familiar overreact code, you can create them. Using this on the news visual studio code is a workflow integration. For the purposes of this video, let's create using code so I can show how that integration will work to start with. Let's title it something simple, like Hello World Click, creating it it. It's What will happen is visual studio code will load up displaying all of the react properties for that component. I won't get into this too much is like I said, although it uses react, we don't have to worry about actually right in this, despite these to your components or should I say component being created in react for him. Eggs also offers the opportunity to override things like the title. How there any basic styling elements will still have to be done in visual studio code to show how components work across two pages. Let's quickly go back in and change one of the style of elements. Isn't it a simple like changing color of the text of Black Control S from which is a bit of change across the Like, I said, most of you probably have done this in design. However, the Framers store also offers a variety of different you I kits and components already for you to installing new on your projects. So let's explore that next. All right, so I've touched on components and how you can create unusual own. However, when it comes to rapid prototyping, sometimes creating your own from scratch is isn't feasible. Luckily, frame offers an entire internal store or people within the community can give you a variety of different You I kids on components ready for you to use. This is specifically handy for people like me. You just want to quickly dragging things like loading icons. And don't think too much about it. Is this constant being updated? So I definitely recommend checking this out. 3. Updates and Framer Docs: All right, guys, welcome back to the next part of this video. In a bit of research this morning, and the latest version, which was released on October the 16th is actually framer X three. Now, honestly, for in the X five in the beta version looks exactly the same. It's frame extra. I think it's mostly just improved functionality. So if you are following this tutorial really doesn't make a difference. You could use either this one or this one, because if you go back to the interface, this is the latest version. It looks exactly the same. Like I said, it's mostly just improved things. Um, and they had a lot of things in that the community have recommended as well. So custom overlay transitions. What's really weird is I actually sent that through for feedbacks owned. If they took that ambulance pretty cool. Part of this video was well, was mainly just giving you an overview of the actual website. So the community behind it on the other people that are backing it cos they're getting behind it and just, you know, the general kind of support that you'd find on Twitter and Dribble. And another thing I'd recommend looking at as well. Now I'm more of a hands on person. I like to dive into Softwares and learn. However I always give. The documentation for new software is a quick read because it was really handy for actually going through. They will explain everything. Yes, it's very wordy, but and visual images are there. They're very nice. And like I said, if you if you want to go and check that out, just head over to frame ex dot com. But yeah, On the next video, we'll look it import and export from sketch and also just given a quick overview of how the responsiveness works within design and then, yeah, we'll get into prototyping. 4. Importing From Sketch: All right, So in this video, we're looking importing your designs directly from sketch into Freeman, now 22. Long is it's a really simple process. But let's say you've designed some thinking sketch and you like any to prototype. It needs to be quick and be rapid. What will you have to do? I mean, excuse the awful layer hierarchy was implicate command. See to copy it, you get into Freeman. Come on, V and that you go. And what it would do is it will retain all of the layers and also add parents as well. So these groups, although not frames, will have nested lays within them. It retains its and from there you could simply highlight what you want to do. Slight link tell, get it to this page. And when you preview it, this is simple. Is up now important from sketch isn't without its limitations. You'll notice straight away. Well, you may not have noticed, however, that these two graphics here in port in, no matter how many times I tried to get those to translate in here, that just doesn't happen. They're just pure white squares. So there is some glitches in terms of translating the design from there to a different software. Another cool thing about imported directly from sketch is essentially retains all of the layer properties from the original file. If you want to make any last minute design adjustments, you don't have to go back into the original sketch for you could do it directly in frame by simply double tapping it to bring up the layer properties. From there, you can change the color. Change your Plessy given change of irritation, meaning you can maintain constant control. The design process what at the same time keeping it separate from the original sketch file . 5. Designing in Framer X: Okay, so the last thing we're gonna quickly look at is the parent and child relationships within the design process that forms the layer hierarchy is well, it's a responsive side of things based around flex box design. Airframe eggs is really into it, and everything is already organized for you. If you create a type player, Hello, Forever X will automatically determine the parent and child relationship between these two layers. This means everything stays organized. You don't have to worry about working out where the group's go. This also makes it easier for the responsive side of things which will demonstrate here to demonstrate it. Responsiveness have created these three year. I continue this here each containing two elements within eight pixel margin figurehead and closes down unopened responsibly. You'll see three frames each of these framed represent each of these containers here with them. In those frames, you have the two Children, the text and the circle. This allows framer exit determine the responsiveness accurately. Alright, So I've just shown you lay a hierarchy and responsiveness and they show you export like to really obviously to show is pretty much the same as every other software. However, It's cool show anyway, just in case. So what we'll do if you want to export your whole campus will select the exporting title. I'll go across the exploit this little drop down. Would you expect your size and go one X, I think two x or three x If I'm compressing down for dribble, I never hear such a file type, so you can see the full is PNG. However, you can choose from J. Peg Ah Web package, which basically is a compressing format for images that you put on the Web and then you have PdF export and fresh veggies is a slightly different process is it requires you to copy the SPG coats that you can pace it directly into your text editor. This is especially handy for export and iconography for your developer to demonstrate how this could work. Gonna go into the tools type in select graphic, create frame, and what this will do is open a variety of different options that should path, rectangle, oval, polygon and start to show how to export it. Let's create a basic shape using the puff. It'll hasn't gotten anything too crazy just enough to show how we exploit it. Put Phil on, you know, the 100 and now you have your shape. Unless say, you need to export. This will keep it fully edible. With your in the production stage, you simply go to copy. You have the option to copy the SPG code. Now that I've covered exporting, I feel it's time to move on to the full prototype. So go ahead and open the practice file. And under Main files, it's like the Users folder, where you'll find the file toe work from from there will be able to go through the prototype increases together. See you in the next video. 6. Linking Screens: All right, Welcome back to the next stage of this course. In this, we're gonna begin actually building a basic prototype. I'm assuming you've opened the project files. What? You'll see that I've created four screens. Although relatively simple, These four screens contains four of the main features in frame expeditions, stacks Cree inscrutable components linking screens and using YouTube videos. Keep it simple. We're gonna look at Lincoln screens and creating a basic flow within the APP. I think I recently showed this earlier when I shouldn't have to import from sketch. It is a really easy process, so let's demonstrate that now. On the enters page, you have a but in here, which is afraid I was called enter. What we're gonna do is when a link it's that the page transitions to the categories page here to do up. Gonna cook link, target it to this page and you'll see a variety of different options such as the transition and the direction in which it comes in is what does which pages on a target to or an override not to do that. You can even drop down here. Let's say you want to go to the main. You'll just select menu where you can just click it again and it will be really itself. It's not that the lynch to see that the full transitions of what works and let me preview it. We click this, put your sleeping categories page transitions in really simple, really effective and good at showing how the apple flow. I'll go ahead and look more of the screens. So I say from the categories Page, we have this frame here, which is a menu what we're gonna do. We're also gonna like that this menu Hoover lease you can link it so liked it go into the transition option are currently is set to feed, which is what works you have right of different ones. They have push overlay mode. Also, if it was like a pop up instant, which she wants the actual Animation Dept. I just wouldn't use that and flip I've used it. It's chaotic, but fade. It will create a nice little overly will be no movement and you'll see that as we get back in, so refresh it. You'll see the menu pops up. Okay, so from here, you know how the next it but Of course, we don't have any breakage. I mean, what things to flow nicely. Let's go back. Slip the X frame and again Pretty, pretty simple Process what you're linking practical agrees. Don't push. You wanted to fade again on let me go back, people fresh. No faith by two categories. Now what we're gonna do is go from video footage. We're gonna go across to the last page to finish up the Lincoln part of this process. We're gonna get video footage again. Link videos Page have that pushing again. So what we'll do is things like menus that every believes they will fade. Any pages will have in transition in from the from the right to go to the left. And now let's preview the whole thing if it actually goes black. Maybe not. But either way, so if you click video footage, you'll see that goes to the video page. This is why we look at the GT bureaus. You can see the highlight, their active. It's really cool, but we look at those air late stage Now that we've linked to the screens, let's preview the whole out to see how it will flow Full screen that you can see we're still in this nice pH. Here you'll click Enter the cosmos, not take you through to cut every page. From there, you can hit the menu, and then we'll select a video footage to go through to the last page. And one other thing I've got to show as well is that this Bakker also goes about to cut, agrees. When you click that you'll see the transitions opposite to create a nice, dynamic death within the design. 7. Creating Stacks: Okay, so now that we've linked up ages and seeing how the outflows the next single looker is stacks and how we can organize and distribute list in an easy and efficient manner, this is particularly useful because frame recognizes the exact position of where the last one was, allowing them to snap into place without you having to worry about organizing them in a different way. So they show you how to do this. To begin with each of these frames their individual elements over To put them into a stock , you could go across the tool section and on the layout hit stack or s for sure. I let run the elements you wish to put into the stack and wait for the properties panel to show up. So, as you can see here, you have a padding which will allow you to distribute on the page if you want to keep that zero. And for these I had a 30 pixel margin between them were changed a gap to 30. As you can see, then I look exactly the same. However, you can usually move and organize them and have him step into place. However you want it was being able to set the gap in the party in because it's a flex books attribute. He also uses a lot of the original flex books. Terminology Just start in center is what is giving you the option to set a direction to either horizontal layout or a vertical out. Now with this stack, essentially access a mask, which means it's restrained around here. So if you were to sell it to vertical sorry horizontal, not a lot will happen as it's literally contained within this section. It normally it would go off the page for the purposes of this, or they won't actually need it. Demonstrate how that would work so as you can see and I give it a bit of space around the side because it's set to start on, distribute it said that it up view to set that to center. As you can see, it's not scented within the mosque. If you'd said at the end, of course, you're set to the bottom of the mosque as well is that you also have a line, so if you said that it start as you can see, it's a line to the left hand side. You said that to the end, well aligned to the right hand side, and that late stage will be turning this into a school component. So it's always handy to meet these into a stack first so that any last minute adjustments can be done easily. So now that you know how to utilize stacks and organize your listener, but away in the next video, we'll look at turning these indescribable components. 8. Creating Scrollable Sections: All right, guys. Now that we've covered stags, let's look it scrolling. This is where the interactive sites let's get a lot more interesting. So first things first and there would makes it may seem a little long winded is gonna move these out of the way. Thank you than that, Then this video footage link The ghost was a videos page we're gonna remove. I'm gonna duplicate this page. Well, I know nicely because CD there is there. I'm simply gonna delete this. We have cooled this categories. A scroll I'm gonna do is gonna make it 910 pixels. 110. Get rid of these. Now, you just sit on the stacks. What you do is gonna remove this stack. Visit ST Pictures from the top, someone to essentially photography. Duplicate these. Now it's anything to extreme is just to show how they would scroll on what we do. Place a minute. Stuck just so they were organized in case you wanna make any last minute adjustments from there like we did last time. 30 pixel on with station, should I say? And now you have this scroll here. So now we're gonna do is gonna go to tools. You're gonna sit like scroll. You're going to draw on this commerce here where the score component needs to go. So 37 pixels on 375 pixels in width and roughly 654 pixels in height. So I tracked that down stupa, and then what we're gonna do before we link that Gonna re link this back to the video page , So I'm gonna fucking there we go. Link it That there No, not use that within a stack on a future scroll component is now also linked. Now go back to the initial scroll section. We link it to that. As you can see, they have just appeared. It looks exactly the same. However, we would go in preview that I'm refresh it. Not only does the video footage still work, but you cannot scroll as well 9. Adding Youtube Components: Okay, so welcome back to the final stage of this process. Now, in this video, we'll look using the e t media component nickel pray in real time, you RL's into low projects. The cool thing about this is not only is it using the YouTube baby I it also helps to retain all of the original thumbnails as well. If we get preview, you'll see that these were all active links. You click there, you see, the video will load in place that normally would not issues their various different species themes and stuff. That's kind of what was going for here. And to do this, all you have to do is exit not shown here. Always couldn't suicide demonstration. But you'll go to your that. I show you what it download originally. So it's this here now already gone ahead and downloaded that and it looked like this. So will be a YouTube frame. As you can see that the phone is a frame X intro video, however well, I've gone ahead and done is found even here that I use there. So it's just space team. So she's your best food. Hasty, so you'll do really simple we'll copy the euro well, you'll go back and you'll see the euro is here. Come on, Vey much this time now changes when I hit. Enter another cool thing. You can also slight the auto place things. Now. This essentially determines how the video will play when you first enter the page currently set off, which means you have to physically click it in old video to load. I think you can also choose from on, which essentially allows the videos automatically start playing as well as Luke, which will play the video on a continuous cycle. So what is that you want to slit the code video over right? I also edit the actual example code for this component. So it's really cool, really versatile. And, yeah, you know, a real level of depth to your animations also don't feel restricted by these dimensions you can see here. This is basically in 1920 by 10 80 p dimension. However you'll see on here I have actually changed it, and this is essentially a clipping mask. So when I click on this, you'll see that the frame is nested shall see. The you tube component is nested within the frame I would have done is used as a clipping mask. So I go to unclip. You'll see that the original YouTube components actual dimensions are there. And if I like both of those again you're to clip you see it's back to how it originally Waas. Go ahead and play a round of betting around. You are rollings in there, even clipping this or simply double tap? And if you want to maintain the styling evidence, I'll also be Lincoln. Example Fellows in the Project Floater. You can get ahead in the practice with this in your own time. So now that you know how to embed YouTube videos within your project, that essentially concludes our prototyping process for this design, the next to videos will wreak upon. Everything we've done is what he's looking for. The latest update in the new features that have been added 10. Bringing it all Together: So welcome back to what was going to be the final video. Obviously, this morning for in excess of its launch version five for their A base in Italy have been, like a new interactive side of things as well. But I say that it was one extra, you know, quickly overview that in the next video, but essentially, this was just gonna be, you know, kind of recap on what we've done. So I have shown you the interface. I'm sure you frame a store. Yeah, the different futures and hopes to actually building a design on prototyping it. So this seems like, you know, the properties tab, and you know how to use responsive design. And it was really, really into it compares to the original frame. If you ever use that, you didn't stand. Why? This is, you know, all the hype. Uh, yeah. We put together the most basic prototype possible. Uh, of course, in the real world, you put together more complex flows in this revolutionary like us. It doesn't have a lot of the animation death that principle has. I know. I said it's a lot easier to use, uh, in principle, principle gives you a lot more kind of freedom to play around the timeline and customize different transitions you've seen said before at the time. The four main elements there is now another element called Page, but this this was just linking screens, organizing this components for frame, Should I say into a stack component and also, you know, creating scrolls and that level of dynamic nous to different pages? Oh, and obviously, of course, adding YouTube videos, I mean, that's like the simplest process, but it's really cool. Yeah, I mean, let's go ahead and preview the final prototype. Gonna go to full screen. Coming, exploded, got exceed. Gonna enter the CAA's MERS. As you remember, we go through the categories Page Ah, and you can cannot scroll with in there as well. I have realized that I've selected the scroll mask a little to further down. You see where it cuts off there. That's where the top of this should actually be. And then probably halfway there would be where the mask ends. So it's growing, but it's all the demonstration shows how it would float. Of course, you go ahead. You tired these things up as the process goes on. Of course. From here, you can also view the menu when you select. There we go. So course you could be cool if they had, like, hover states is well, remember, in principle, they have the ability to harvesting. Kind of go over these and change the color. It just gives it up, you know, extra depth. But you're close. This you want to go through to video footage? Why, No, you work. No way. I was gonna so well. Oh, I see. I've moved it to their but then a wise than that we will go through to video footage. And you've got easy to videos here. So you can click anyone you want. Uh, you know, you got the full sound there, and it's really high quality is what I was really impressed by that. I mean, when I first saw it on the we have the demo that they gave out, I was like, This is incredible. This is no other Softwares done. This Corsican and go bite will see it transitions in a different direction. Yeah. I mean, like I said, this was just to kind of give people an introduction to it. It's a relatively new software. So what days are constantly happening? And it's kind of annoying trying to teach software's like this because, like I said, I thought I was shown although main features. And then this morning another update comes through and it's like, Oh, well now Adam Page and I was like, Really? I need to create another video, just a sort of demonstrate what that is, Because otherwise I feel like I'm short changing. You go through, read the docks on the website. They probably updated it. Now that there's new stuff coming through, yeah, it's it's honestly moving so quickly and everyone's been behind it on. And I feel that this is this is the future of where these kind of Softwares airheaded. 11. Updated Interaction: All right. So here is the unplanned video based around the new feature called Page. Now they have got a few other a basin as well, and I've literally just had to go through. Look at it. So it's frame x four now, like, said, we were running the free makes three. Ah, and yeah, the biggest one they've added is the new interactive page. Till now, they had announced this and mentioned it. There was just no on the software. And honestly, I completely forgot about it. I love it. You know, looking through the email they sent as well gonna have to brush up on what was going on. You know, you look at the examples of what you can create. I mean, look at that. Really impressive. And yeah, just quickly put together an example dog. Yeah, that we can look through. So here you have three frames and you've got a page in canvas on iPhone X. What you do, she'll go to page, so it's we'll do the full width. So 375 This is essentially, you know, the page component now within the spaces where these elements will be able to be swiped through your dude. You're use to connect so you can use, like, 23 I think it's there. Good. Uh, Moses Let the last one it's not. What's happened is it's not connected. All of these together. And when you select this component will bring up a bunch of different options as well. So you can essentially select the gap between the stations are just to make it a little clearer at the movement. I'm gonna give us 30 pixel padding C or large, and on the side of padding in the senseless inside this mask here, you can see there's no gap here. So what we're gonna do is we're gonna set that to 15. So it's exactly half intensity. Listen, desire just looks nice. Ah, and yet we're gonna know that you can customize any of these things. This year is currently set to the default, which is slide has momentum off, which means that you have to physically cycle three. Well, you'll see I preview it so you make sure it's refreshed and yet you can actually go through like a subway. Momentum is this A, like essentially allows you to just swipe once and have a good away. Three. Where's because it's off? You kind of have to manually go through so we'll do. It will play around with those who will turn momentum on. Sure. Well, you'll see there's over fresh that you can go straight through in one swipe, which probably handy or a little too quick again. You can't control the speed of these. And then what we'll do is you know, we're gonna do you gonna do cube, because you know what? Your favorite one refresh that you can see instead of having to use after effects now to create these kind of affects, you can go straight into here and do that. 12. Wrapping it Up: and that is a wrap sorry by the unconventional outrage. And I would love to have actually done a talking head video using the camera. Unfortunately, circumstances changed. I wasn't able to get hold of one. So I'm starting to regret not filming that on the same days, the interest in our really puts give this little little camera. She's to say, Thanks for watching. There's a little picture of me, like to his home, but it doesn't really matter. Ah, and yeah, honestly, just I want to encourage you to reach out to me and actually engage with the course, you know, ask questions and also give feedback. I mean, this is the first ever course I've done. I have no experience in online teaching. That kind of reached out to me and said, Look, do you want to make videos? I was like, Yeah, yeah, I know something different And, yeah, reach out to me elsewhere as well. Like I said, dribble pre active on there, always publishing stuff and mostly tryingto, I think getting more of a network on LinkedIn already of the user. But yeah, 57 connections winning so honestly, if you wanted, like, network in a more professional level. Hit me upon hearing message. Me honorable, I could find me on. Well, I got the links here, so yeah, use the ground. It's where I did a bit of code. Be hands and yeah, So I hope you enjoyed this course. I tried to be as informative as possible and break everything down in the best way possible , So yeah. Offer any feedback on? Yes. Stay tuned. Hopefully I'm gonna include some more stuff in the near future. See you soon.