In this prototype, we will create a welcome tour, importing designs made with Sketch. So, the first thing you need to do in order to follow this tutorial is to download the Sketch file that will be used in the prototype from the Asset_A6462_A08_A20_Welcome_Tour_Prototype_Designs.zip code bundle. You can also download this tutorial in Framer from the Asset_A6462_A08_A21_Welcome_Tour_Prototype.framer.zip code bundle.
As you can see in the following screenshot, the design consists of four screens that we have designed in four different artboards. When working with Sketch, remember to use easily recognizable names, since you will refer to them when you are codifying your prototype:
Once you have the Welcome_Tour_Prototype_Designs.sketch file open in Sketch, you must import it into Framer. To do so, you will find the option to Import in the Framer Studio toolbar. When you click on Import, a dialog will appear where you can select the Sketch file that we previously had open in Sketch, select the option to import at @3x, and then click on Import. Remember that our Sketch file will only be available in Framer if we have it open in Sketch. The artboards will now measure 1080x1920 px in Framer, as we have chosen the @3x option, a size that corresponds to three times the size they were designed in Sketch, which was 360x640 px:
The following lines of code will appear in your project:
# Import file "Welcome_Tour_Prototype_Designs" (sizes and positions are scaled 1:3)
sketch = Framer.Importer.load("imported/Welcome_Tour_Prototype_Designs@3x")
Framer will import your groups of layers from Sketch and will create a layer for each of them in Framer. Framer will ignore ungrouped layers in Sketch and will use the positions defined in Sketch to define the values of the x and y properties of the new layers.
Framer also allows you to ignore a Sketch group using the - symbol at the end of the group name, and you can also flatten a group by adding * to the group name; this group will be imported as a single layer without children.
Now that we have imported our design assets with which we will work, we have to adjust the preview so that it does not look oversized. For this, we will select a device in which to preview our prototype as we build it. The different devices that Framer offers us to preview our project can be found in the Devices menu:
For this tutorial, we will preview our prototype on a mobile device, so open the phone Google Nexus 5X in the selection menu. To see the prototype presented with a skin of the mobile, you may need to activate it with the Toggle Device option:
As a result, you should see the first artboard of the Sketch file, called Step 1 Artboard, presented in the selected mobile in the preview area of Framer Studio, the code to import it in the code editor, and the layer inspector with the groups of the Sketch file that will be our layers in Framer:
