android app ui designing using sketch and zeplin

Sketch 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.

We are going to design the below layout that has AppBar , Tabs , ViewPager and a List .

1. Installing Sketch App (Mac OS)

a. Download the sketch app from Sketch website. Initially you can go ahead withTrail Version. You will have to buy the license if you want the full version.

b. 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 likeAdobe Photoshop,Illustrator orAdobe XD.

2. Installing Zeplin

Zeplin is a collaboration tool between Designers and Developers. Designer can upload the designs directly on to Zeplin and it generatestyle-guides andassets, 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.

a. Download and Install Zeplin. Alternatively you can use Zeplin'sweb interface by signing into their website.

b. Once installed, login with your Zeplin credentials.

3. 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.

a. Create a new project in Zeplin by navigating toProject ⇒ New Project, selectAndroid as we have designed the android app. Give your project a name on the right sidebar.

b. Open Sketch app andSelect the Artboard folder on the left sidebar.

c. GotoPlugins ⇒ Zeplin ⇒ Export Selected Artboards. This will open Zeplin again.

d. 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.

4.Exporting App Assets from Zeplin to Android Studio

Zeplin has the intelligence to detect the elements on the document and provide styles-guides likefont size, family, color and even gives youcode 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.

a. In order to download the assets, you need to make themexportable 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.

b. Select the path to your Android Project'sres folder and click onExport. This will place all the images into proper drawable-xx dimensions.

c. If you select labels, you can see the style-guides likefont size, family, color andAndroid code suggestionson the right sidebar. You can directly add the code to your xml layouts.