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. 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. Google Fonts Grab the following fonts that I will be using in the tutorial.One of the now, essential plugins for using with Sketch. 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. Flinto Learning Solutions Private Limited is a 9 years 8 months old, private Indian Company, registered at Chennai with a paid-up capital. Import from Sketch and Figma Flinto integrates with the most popular design software Sketch and Figma, which lets you easily move your work into Flinto. 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. Flinto is a great tool for communicating your app design concepts and testing them on-device and in-context. 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. Sharing and installing Android prototypes on-device is the same easy process as with iOS. The share page shows your prototype with the appropriate device frame for the device you chose. 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. In the editor, you can add a custom icon, and choose from a new set of Android-specific transitions. Then increase it’s size to 70 x 70px, add a 2px white border, and remove the Fill Color.
0 Comments
Leave a Reply. |