In this video, Emmanuel Henri explores Framer X and its user interface, introducing the sections we'll be working with.
- [Instructor] Let's do a quick overview of the interface so you can get situated around it when we start working with each sections. So, let's start at the top. So, when you first open up Framers. This is maximized right now so that's why you don't see the top bar. So, when you see at the top, is basically the name of the file. And then on the right, this is when you want to play your prototype. So, once you have your prototype, we're going to use this one quite a bit. Then if you want to test it on your mobile devices, there's an actual application that you can install and actually see your prototype on your device. So you can actually do a live preview and then get started with this once you have the application or some work here. Next, if you have any issues or bugs in the application, you can actually contact support for any of that. Now, let's move to the next. The one thing that I really love about Framers is how it's organized. So, right now we're in the layout section. But you also have the layers so once we start working on their items, we're going to create this in layers so each layer will be a screen or something or even components inside of a particular screen. So, these are the layers section then you have a component section. So, once we start creating new components, we're going to create them here. So, you can create new components and reuse them across all your layers so this is very useful when you start building components inside of your application. Then you have the Store so this is where you can find a lot of components and things that we're going to leverage to build our prototypes and there's thousands of them so this is pretty cool when you don't want to reinvent the wheel like I was saying earlier. You can leverage a lot of the stuff that's already been made by going on the Store. So, there's a search feature if you want to search for anything specific. If you want to add a component related to Facebook, you can actually find items related to Facebook. Then, like I mentioned, there's a Team Store. So if you want to be part of a team and then publish your own components that can be reused and create design systems, you can do this through the Team Store. This is very useful for when you're building prototypes for the Teams and with collaboration inside of your company. So, these are the major sections and we're going to work primarily on this three here. So, components, layers, and then tools. And we're going to leverage a lot of components from the Store. So, we're going to spend a lot of time in here. So, in the next video what we're going to start doing is exploring the layout and then start building our prototype. So, let's move on.
- What is Framer X?
- Navigating the user interface
- Designing with Framer X
- Working with the layout and drawing tools
- Building interactions
- Creating simple and complex components
- Implementing overrides
- Exporting your prototype