Is a vector based design tool helps in designing user interfaces. Because of its simplicity, anyone can learn it very easily unlike Photoshop or Illustrator. It offers option to design interfaces for multiple platforms such as Android, iOS and Web. The good thing about Sketch is, all the assets can be generated in required dimensions as per the platform thus making designers and developers life easier. Today I am going to share my insights about Sketch and how it can be used to design your android app UI. Converting the design into working android app will be covered in a separate article.

Design is inspired from 1. Installing Sketch App (Mac OS) a. The sketch app from website. Initially you can go ahead with Trail Version. You will have to buy the if you want the full version. Once installed, you can open the app and get started. Note: Currently Sketch is available for Mac OS only.

If you are Windows or Linux user, you need to look for alternatives like Adobe Photoshop, Illustrator or Adobe XD. Installing Zeplin is a collaboration tool between Designers and Developers.

Designer can upload the designs directly on to Zeplin and it generate style-guides and assets, automatically. Usually, developer requests the designer for resources in multiple resolutions for multiple drawable dimensions.

This process can be made automatic as Zeplin can generate the drawables for you. Download and Install. Alternatively you can use Zeplin’s web interface by signing into their website. Once installed, login with your Zeplin credentials.

Sketch App – Basic Tool Guide Before starting the design part, we need to know the basic tools sketch provides. Below is the essential knowledge needed to get started with Sketch. 3.1 Creating New Artboard / Screen You can consider an artboard as single mobile screen.

To get started, you have to create an artboard first. You can create as many as artboards depending on number of screens your app will have. Once the new project is created, you can get started by pressing A key.

Upon pressing, you can see the Artboard dropdown on the right sidebar. Select Material Design from the dropdown and select the Mobile in Portrait mode. You can also select Tablet if you are designing for tablet devices. Once selected, you can see new artboard created in your workspace. 3.2 Inserting Elements from a Material Template Sketch provides an option to import the material elements from Material Design templates avoiding creating components from scratch.

All the material elements like Toolbars, Tabs, Lists, Dialogs and lot more can be inserted very easily. Go to File ⇒ New from Template ⇒ Material Design. You can see another document opened with all pre-designed material components. Select the desired material element and press Command + C to copy.

Switch back to your document and paste the element by pressing Command + V on the art board. Move the pasted element to desired position. 3.7 Making Icon / Assets Exportable using Slice Tool Slice tool helps in converting images into exportable images. You need to make all the icons exportable before importing the project into Zeplin.

Select the icon on the art-board. Press S to open the slice tool. You can notice the cursor turn into a Knife when slice tool is opened. Click on the image with slice tool to make it exportable. Once sliced, you can see new layer inserted on top of the image.

Select the slice layer, on the right sidebar, check Export group contents only to remove the background color making it transparent png. Importing the Project into Zeplin Once you are done with design part, you can start exporting the project into Zeplin and check if everything is properly done. Create a new project in Zeplin by navigating to Project ⇒ New Project, select Android as we have designed the android app. Give your project a name on the right sidebar.

Open Sketch app and Select the Artboard folder on the left sidebar. Goto Plugins ⇒ Zeplin ⇒ Export Selected Artboards. This will open Zeplin again. On Zeplin, select the project you want the screen to be imported.

It will start uploading the assets. Once done, you can see the screen on Zeplin’s dashboard.

Exporting App Assets from Zeplin to Android Studio Zeplin has the intelligence to detect the elements on the document and provide styles-guides like font size, family, color and even gives you code suggestions needed for Android. It also generates the images into multiple dimensions required for Android development. All the images will be organized into drawable-xx folders, so you can directly add them to your android project. In order to download the assets, you need to make them exportable using Slice tool in Sketch. To export the drawable, select the image and click on download button next to png assets on the right sidebar. Select the path to your Android Project’s res folder and click on Export.

This will place all the images into proper drawable-xx dimensions. If you select labels, you can see the style-guides like font size, family, color and Android code suggestions on the right sidebar. You can directly add the code to your xml layouts.

Best Icon Maker

By on in Image2icon — The Free Icon Maker for Mac Our thanks to our friends at Shiny Frog for sponsoring us again this week with — the Free Icon Maker for Mac. Image2icon makes it impressively easy to drag and drop any of your images onto the app and get a usable icon out of it. The devs at Shiny Frog have been polishing the app since its release back in 2005 and since then, the app really has come a long way.

Icon Maker Download

If you’re looking for an hassle-free way to make icons on your Mac, you owe it to yourself to. Share.