Later in this tutorial I’ll show you how to set a back link that will take into account that you may have entered a certain screen from different access points. Quick Note: In this instance we wanted the back button to go back to the Viewfinder screen, and that screen only. Let me show you how to do that:įirstly click D to draw out a Link Hotspot around the back button, and then simply drag the Link Thread back across to the Viewfinder screen, and choose a Gesture, and Transition. So, firstly, we have the Navigation Bar at the top of the screen with the Back button that we created in Sketch, and we want to easily navigate back to our Viewfinder screen. Test it out in Preview, or on your iOS device!ĭecide a certain transition is not really rocking your kasbah? No problem, just jump over to the Inspector Panel, and edit the transition from there. Tap would be the sensible option for this type of link. Drag out the orange thread across to the Image Gallery screen, and click to bring up the Gesture/Transition window.įrom here choose the Gesture that you require. So, select the folder icon, and click F to create a new link. We’ll be sticking with the default transitions, but please feel free to go wild, and click on New Transition to add one of your own if you so desire. Viewfinder Screenįrom the Viewfinder screen, we’re going to do a simple transition (via the folder icon) to our Image Gallery screen. Quick Note: If you haven’t already, you can also grab the Flinto App from the iOS App Store. Click on the Preview icon in the Toolbar, or use the simple shortcut Cmd + P. I know there’s not much to see just yet, but from here on in you have the ability to view your changes as they happen. Now would be a good time to fire up the Preview window. So select Timer Link in the Inspector, and enter the following settings (or whatever you choose): Now, we’re going to add a timed transition from the Welcome screen, to the Viewfinder screen. You will now see a little Home icon appear on both your screen, and in the Layers Panel. So with that screen selected, select the Home Screen option from Screen Properties in the Inspector Panel. With the Welcome screen being, of course, our Home screen, we need to let Flinto know that. Flinto does make the transition between the two applications feel very familiar, which I love! Welcome Screen You will find there is a lot of similar actions, and keyboard shortcuts to those that you use in Sketch. Quick Note: If (in the Layers Panel) your screen names are not in the same sequence as they were in Sketch, you can easily click, and drag to re-order them correctly. From the Layers Panel you will see that all your Layers/Groups have been imported, just as they were in Sketch, and that any Vectors have been converted to Bitmaps to increase the speed of your prototypes. In the next window, check that the Flinto file you saved earlier is selected, and click Merge.īack in Flinto, you will see all your screens have been imported into the application. Jump back to Sketch, and with all your Artboards (screens) selected, choose Plugins > Send to Flinto from the Menu bar, or use the Keyboard Shortcut Shift + Ctrl + Cmd + F.įrom the popup window, the plugin knows to scale the artwork up (to 2x) for the iPhone 6 Retina screen, so you can leave all the settings as they are, and click Send. Remember to quickly save the new document, and give it a name, for the Sketch plugin to reference very shortly. So delete that screen either by pressing Delete, or right-clicking on the screen, and choosing Delete. We of course, won’t be needing the screen that has just been created, as we’re importing the screens from Sketch. Quick Note: Again, the same as Sketch, you can move around the canvas by holding Space, and clicking and dragging. …to easily zoom in, and out on your screen until it’s displayed suitably for your setup. Once you have your New Screen displayed, you can use the same Keyboard Shortcuts as Sketch… This, in turn opens up the New Document window (Yes, I know, the obvious has well, and truly been stated).įrom there, set the Device Type to iPhone 6, and click Create. Firing up FlintoĪfter opening up Flinto, you’ll be presented with the splash screen, where you can go ahead and click on New Document. Install Flinto, and the Sketch plugin, and then we’ll be ready to create some proto-goodness. If you haven’t already, go ahead and grab the Free Trial of Flinto (for Mac) and don’t forget to download the Sketch plugin too. Explore 11,000+ Sketch Templates Installing & Setting up Flinto
0 Comments
Leave a Reply. |