Get an overview of Framer's interface and a brief introduction of a few functions of the application. Get introduced to the insert tool, import tool, docs, snippets tool, share function, present and the canvas option tools.
- [Instructor] In this video we'll walk you through the Framer's interface and some of its tools. So launch Framer and let's dig right in. So the first thing you'll see is the welcome screen. And I want you to pay attention to the version of Framer, you may be at a higher version, it's okay, all the examples that we're going to do today you'll be able to do. The next thing to take a look at is this search bar here. This is basically giving you access to thousands of posts or questions that people have already asked on Framer and believe me the Framer's community is strong and there's a lot of people that have probably gone through the same challenges that you'll have as you learn and work with Framer.
So an example, if you search for function, it's going to give you all the results that are related to function and these are actual Facebook or Framer group posts and questions that people have asked and with examples and even sometimes you actually have the prototype that they're mentioning and you can actually open it in Framer. And it's going to open the example that this person used with code example and so on and so forth.
So that's another really cool tool with Framer. The next thing I want you to take a look at is these four examples and we're going to use one of them to actually go through the UI so click on any of them it doesn't matter we're not going to use this for the prototype, it's just for showing you the UI. So I'm going to use this one and just expand that so you can see everything. So you have three big areas at the bottom. First you have the code area, you have the properties area in the middle and then on the right you have the actual canvas with the rendered prototype.
Let me expand a little bit on this one. At the top you have the bar with all the tools that you're going to use a lot in the beginning especially on this course, so first let's take a look at the Insert tool. The Insert tool basically allows you to add a layer, layer animations, an image, and even state and events, things that we're going to go through in future videos so basically everything is a layer in Framer. So you start at the layer and then you add properties to that layer and then you can add functions, events, interactions, a whole bunch of stuff to that particular layer.
The next thing is the Import tool and basically the Import tool allows you to import visual assets that you may have designed in Sketch or Photoshop or Figma. We're going to go through the exercise of importing assets from these applications in a future video but I want you to know where that particular tool is. The next button is actually the docs so this is very important, this is probably the first place you're going to go through.
This is not the same as the committee search bar that I showed you earlier, this is basically going through all the documentation that are included in Framer. So for example, if you are looking for a function, it's going to go through all this stuff that are related to function, highlight it, for example, let's go into layer. Something that I've mentioned just now, so if you want to know more about layers, then you can search and read on the layer, how to create a layer, how to add properties to the layer, and so on and so forth.
So if you've developed in the past, this is familiar and you can do a lot of things with Framer having access to that. So the next button is Snippets, so basically Snippets are blocks of code that someone has built and allows you to do specific things or add specific layers inside of your code area. So for example if we click on Device, Canvas Color, you can see at the top there's this block of code that's been added into the code editor.
And later on we're actually going to add more Snippets so we have access to more stuff and to show you how to import your own Snippets, but we'll go through that in a future video. The next button here is Mirror, if you haven't saved your project yet you can't really use it, so let's just save so I can show you what it is. Mirror basically is a tool that allows you to mirror your prototype into an application on IOS and on Android as well so you need to get the application on the Apple Store or on Google Play in order to do that and once you install the application, you're going to need to do the Access Code, but I want to mention that this is not something that we're going to do in this course so if you want to mirror it with the IOS or Android application, install the application and there's documentation on that as well on Framer.
The next one is Device, so right now we're on just a simple canvas but if you want to switch to Watch specifically you can basically select any of the devices that you have in here. So for example let's select Aluminum Sports in blue and there you go you have the Apple Watch. Any of the devices in here can be used for prototyping so if are someone that does a lot of web development, you want to do an application for the web, you can use one of the iMac like so and then take advantage of the full screen with your prototype.
So the next two buttons only show up when you have a device that you can rotate and can hold in your hands. For example if you look at a phone, then that would fit that kind of device. So basically this tool here allows you to rotate the iPhone so if you're building a prototype that you want to see what it's going to look like sideways, then yes, you can do that with that particular tool. Basically the Hand is a marketing or aesthetic tool that comes with Framer so basically you can add a hand behind the iPhone and you can actually change the color of the hand if you want to a different color by clicking it again.
Reload is the one button that we're going to use a lot on this project and the reason being is if I Reload right now it's not going to do much because that prototype is fairly simple, doesn't have any transitions to another screen, doesn't have anything else than the scroll feature. But the prototype that we're going to work on has multiple screens, has multiple interactions that leads you to another screen and therefore if we're at the end of the application and want to go back to the beginning then Reload does that trick for you so yes, we're going to use that a lot.
Fit is basically the tool that allows you to fit your prototype into any size that you want. So for example, if I put my hand in front of a screen right now 25% is probably more around the size of my hand and if you want to make it look more lifelike then you can use that tool to zoom in and out of your prototype, you can basically zoom all the way in or simply use Fit to have it fit inside of your canvas. So in the next video we'll walk you through the canvas and how autocode reacts while you make changes to your prototype.
See you in a bit.
- Importing designs from Sketch and Photoshop
- Inserting and styling screens
- Adding animation with auto-code
- Working with general syntax
- Programming with variables and objects
- Using functions and code snippets
- Creating assets
- Making interactions
- Animating screens
- Adding a scrolling component
Skill Level Intermediate
Q: This course was updated on 08/28/2017. What changed?
A: A new video was added that covers recent changes to the interface.