Join Emmanuel Henri for an in-depth discussion in this video Recent changes to the interface, part of Framer for UX Design.
- [Instructor] Framer is in constant evolution, and the team there are really working hard to add new features and improve upon the current ones. So that means the UI and feature set may be a bit different from the one in this course. There's been an update since I first recorded the course, and I wanted to go over the new features and the UI change. The great thing is all the features we are using in this course are still relevant, and I will point out the differences where needed. Let's explore the new features and changes. So just an FYI, I already logged in and skipped the tutorial.
And I'm going to use the Loading Example. And just do full-screen on that. So when you first get in Framer, and the major difference between what we're going through in this course and the actual version is the design aspect. So, recently Framer added a Design area where you can actually create your prototypes in here and then go to Code to continue working on the prototypes. So this is very similar to Sketch, so if you want to create an artboard, you can go ahead and create one.
And this looks like it's an Android, so let's go ahead and do Nexus 4, for example. And then we can go ahead and use our rectangle to create a border, like so. And then you can actually use a text. This is the top. You can zoom in on your actual prototype, like so. Zoom out. You can also use icons.
So, if you wanted to add an icon, so let's say do a search, you can actually click and add the icon, like so. And you can do as many icons as you want and use any of these design tools to help you create a prototype. On the right is, again, something that looks very similar, so you can align your items, you can actually position them with pixel perfect precision. You can use a lot of the tools that look familiar if you've done any design in Sketch and Photoshop.
So one thing, for example, if we were to select an oval, and then I'm shift resizing and then option clicking to add another one and then another one. And then they're not really evenly distributed, so you can select them all and then click on distribution here. So these are very familiar tools if you've worked with Sketch in the past. So this comes with Framer now. So once you're done designing your prototype, you can move on to Code, and this is what we had before, but it looks a little bit different.
Things are not in the right places. So, for example, we still have our code editor in the middle, so this is good. It hasn't changed. We have now the layers on the left. We used to have them on the right. And in this course you'll see them on the right, so just be mindful that they are now on the left. So you can click on your layers right here, like so. And also, before and on this course, there's a plus button at the top left. It's no longer there, but it has been replaced with a menu on the left here where you can actually click on Snippet directly, as opposed to click plus, then Snippet, and then select the snippet of code that you want to insert, like so.
So, if I were to insert flow here, I would click it, and then it would show flow directly on the code editor, and then you can manually code what you want in here. So, that's what has changed as well. Now, the import used to be at the top. Now it's at the bottom left here. So you can import Sketch files, Photoshop, and Figma files directly from here. The Docs are here. So if you click on it, you're going to get an external menu where you can browse through all the documentation.
And then the Inspect tool is the one where you can actually check the render code and even use the console. So if you click on it, it will open another window where you can use the console or actually inspect the rendered, the final products from Framer. So the next thing I want to show you is at the top right where you can save your Framer prototype by clicking the icon right here. You can also send your Framer to the cloud by clicking here and then upload it to the Cloud.
So with that, you're going to get an actual link that you can share with people. And then this is where you can chat and ask questions to the Framer team directly. Now, Framer comes with a subscription, so you need to log in. And this is where you would need to log in, log out, and access your dashboard if you need to. So the final piece that I want to show you is the actual preview. Let me make sure there's something that shows up, so let me remove the flow here so we can see our prototype.
The only thing that I need to warn you, if you click on the plus, usually you would get into another screen and get a preview full-screen of your prototype. It's not going to work if you're already in full-screen with Framer, so let's go ahead and minimize that and then click full-screen for the preview. And then you're going to get your prototype in full-screen here. So you can actually also change the actual device that we're watching. So if we want to switch to an iPhone, then the prototype is going to show in an iPhone, and so on and so forth.
So let's close that. And your preview always sits on Framer, so if you don't want it in full preview, it always sits on the right side of Framer. Okay, so armed with this new information, you should be ready to start building the project in this course with the new framer. In fact, I would recommend you explore and use some of those new features so you get some experience with it.
- 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.