Sketch has a plethora of companion applications to share the top table with, and there is, especially, no shortage of Prototyping applications out there to wine, and dine our favourite design application. One of my favourites from the menu is Flinto (for Mac). Let’s put these two apps to the test shall we, as we design, and prototype an app for iOS…ĭon’t have a copy to hand? Go grab the Free Trial from here Ī few things that you may want to grab (if you haven’t already)… An application which has grown in strength in recent times. Iconjar I have raved about this app before. It’s perfect for storing, and referencing your icons. Marvel es una excelente herramienta online que nos va a permitir crear prototipos de aplicaciones móviles y proyectos web. Drag icons into your Sketch projects with ease. Craft plugin by InVision LABS The perfect plugin to enable the use of real-data in your projects, and more.A must have, and one that we can put to good use with the icon set below. Download Flinto 30.2 for Mac - Create app prototypes for your Apple device, preview them in real-time and share them, with this straightforward and. On this page, I’ve highlighted some of my favorite Flinto features. From the file browser, click on your profile icon in the upper right. Flinto has become a widely used Mac app capable of creating high-fidelity prototypes with smooth animated transitions, scrolling, micro-interactions, live on-device preview and more. Google Fonts Grab the following fonts that I will be using in the tutorial.One of the now, essential plugins for using with Sketch. For any questions regarding Flinto or the integration, please contact the Flinto. Zeiss (Lite) Icon Set Feel free to download the icon set that I will be using in this tutorial.Īll cool? Everything installed? Sweet! Let’s get to it… Designing our Screens in Sketch. Quick Note: You can pull in any random photo from the Unsplash site, but for the next few screens, and just to keep a little uniformity, you will see I have chosen one of the categories (‘Nature’) this time. Now onto the Control Bar for our Viewfinder screen.ĭraw a Rectangle (R) 375 x 120px and place this at the bottom of the screen. Give it a Fill Color of #303030 and reduce the Opacity to 95%.įirstly, drop in the folder icon from IconJar, and give it the colour #FFFFFF. Then, for the shutter button, select the Oval tool (O), draw out a circle 58 x 58px, change the Fill Color to #FFFFFF, and remove the border.ĭuplicate that shape by holding down Alt, and dragging it to duplicate. Then increase it’s size to 70 x 70px, add a 2px white border, and remove the Fill Color.
0 Comments
Leave a Reply. |