We will now add a temporary transition from the Launch screen to the Home screen. I like to use the Preview function (Cmd + P), and only then launch the iOS app. Click on the Preview icon in the toolbar or use the hotkey (Cmd + P).Īlso, if you haven't already, download the Flinto app from the iOS App Store. So far, there is not much to see, but you should be able to see changes as you implement. Tip: Now it would be nice to activate the preview window. With the screen highlighted, check the Home Screen checkbox under Screen Properties in the Inspector. The Launch screen is the first screen of our application, and Flinto needs to know this. Tip: If (in the layers panel) the screen names are not in the same order as in Sketch, you can easily drag and drop them in the correct order. Select the Center Canvas menu item and using the hotkeys (Cmd +) and (Cmd -), make sure that all screens are previewed and centered on the canvas. Return to Flinto, you will see that all screens have been imported into the application, and from the Layers panel, you will also verify that the hierarchy of layers and groups has been imported from the Sketch file. In the next window, check that the previously saved Flinto file is selected and click Merge. In the window that appears, set the Scale to 200%, Device Size to iPhone 7, and make sure the Export only selected artboards option is selected, then click Send. Select Plugins> Send to Flinto from the menu bar or use the hotkeys (Shift + Ctrl + Cmd + F). Now you need to export the screens of the application (not Symbols), so select the four screens of the application (Launch, Home, Videos and Profile) with Shift + click. Go to Sketch, and open the previously downloaded Sketch file. Is the plugin installed? Let's move on to import. From the menu bar select Flinto> Install Sketch Plugin. īefore going to Sketch, you need to install the plugin for Sketch. Leave all the document options as default except for the Background Color and change it to white #FFFFFF. įrom the inspector panel, select the iPhone 7 screen size. So delete it by pressing the Delete key or by double-clicking on the screen and selecting the Delete option. We won't need the screen we just created, as we are importing screens from Sketch. Something like 'Movie App' will do just fine. You can close it, then save the new document, name it for a quick login via Sketch plugins. When you open Flinto, you will see a splash screen. In this short 2-part tutorial, I'll show you how invaluable this new feature is and how it has lifted Flinto's position in the prototyping tool ecosystem.īefore starting, install the applications and download the required sources:Īre all applications and sources in place? Excellent! Let's generate a nice behavior in Flinto. Now that has changed.Īnd the name of this add-on is Designer. But, until recently, and in comparison with other alternatives like Principle, it lacked certain functionality that would put it on an equal footing with the aforementioned tool. It's relatively easy to learn from scratch, a pleasure to use, and allows you to get really great results by bringing Sketch files to life. I've been the advocate of this Sketch companion for a while now. Learning to work with a Behavior Designer in Flintoįlinto has just taken to the next level with its Behavior DesignerĪs you probably already know, I'm leaning towards a particular prototyping tool.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |