In this video, Emmanuel Henri demonstrates how to import assets into framer and shows multiple options for doing so.
- [Narrator] When importing assets to Framer from a Sketch project, there are multiple ways to do so. Now I'll quickly demonstrate the options you have. Also, when building your project in Sketch, you need to be aware of the canvas sizes. For example in this project, we purposely chose to use MacBook Pro's resolution. So when we import, we don't spend time resizing everything. So when you start working in Sketch, make sure the resolution you work in, is the same as in Framer. Let's go ahead and import our assets. So first thing, open Framer and then create a new project by clicking on the plus here, and we'll maximize our screen, and then I'm gonna save this in my documents and I'm gonna call this the same as what we call our Sketch project, so it_management.
You can call this anything you want. So let me show you the three ways we can actually import into Framer. So the first method, and you need to make sure that Sketch is opened, so I have sketch open here and then I can go into Framer here and then what I need to do is literally go to the Code side and then in Code here, you have an Import feature, and then you can import from Sketch and then it will import all of your groups as assets in here and that's why I paid extra attention on how I name my things into Sketch.
So that's the first method and that's easiest and fastest way if you want, for example, to do a quick prototype which is a simple transition from one screen to the other. So that's the fastest way to get to a prototype. So let's close this dialog here. So the second way to import from Sketch is something that designers are used to. So you can go back to Sketch and simply export your assets like this. So you can select an asset and make it exportable and so on and so forth and decide which size you want and then inside of Framer here, create in the Design side new frames and then add your assets and that's a manual, longer way, but what you can do with this method is to literally control what you do in Framer and what you import from Sketch.
This way if you want to do a text in Framer as opposed to import a text from Sketch, then you can do that, but this is not the method that we're gonna use. The method that we're gonna use is a simple copy and paste from Sketch into Framer. So let's go back to Sketch and what we're gonna do is basically copy all of our assets in here. So the way to do that, you simply select all of your artboards and then do Command + C to copy and then switch back to Framer and then paste with Command + V and then all your artboards are going to be imported here with their assets with whatever they are.
So if it's a text, it's gonna be basically imported as a text and so on and so forth. All of your groups are now frames, so when you see the hashtag, that's basically a frame and then everything else is just the assets that you imported. Once you have that, you can literally go inside of Framer and start working with your designs. And the last step we need to do here is to select the device for each artboard. Because we're now working with a MacBook Pro here, wanna make sure that we select the device for all these assets and while we're here, let's just, going to reorganize these in the right orders.
So Network management should be last, so let's select the users first here and then put Assets management here and then at the top here. So you may need to do a couple of things like that because sometimes it doesn't put this one last and you're going to play with this for a while, so. So we have users, assets, and network in the right order and this is what we're seeing on the screen. So now let's select the artboard for users and click on the device dialog here and then select MacBook Pro, then do the same for the other two.
And you should see the right sizes and this is pretty much the same sizes as what we've designed these assets in. So if you wanna take a look at what it looks like in the actual preview, then you can go here and then select the right canvas. So again, select the Apple MacBook Pro and then you're gonna get the right screen size for your designs and if you wanna make it even cuter, you can actually come here and then click on Toggle Device, and you'll see your design inside of the actual device.
Alright, so let's make sure that we save our Framer file and then we can move on.
- Defining your objectives and UX stories
- Designing the user management tool
- Importing assets into Framer
- Creating flow between screens
- Adding interactions, micro-interactions, and animations