Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Sketch With Material Design

In the past year, adoption of Sketch at Google, where I work at, has taken off and is now a widely preferred tool. The more tools in our belts, the better, so here’s my take on why Sketch and the new material design1 system are a great match.

Tools are an extension of our hands, and as such, they should be versatile, quick and intuitive. A lot has changed between the print era of offset presses and the digital era of cross-platform screens. Developers have attempted to adapt our tools, but Sketch is perhaps the most successful app in this regard — its creators have removed the bloat, started afresh and presented a smaller, fit-for-purpose feature set. What may seem on the surface to be a simple drawing tool in fact nails the core workflows of digital design.

Sketch 3.2 comes ready with a material design sticker sheet to give you a jumpstart on new projects.2
Sketch 3.2 comes ready with a material design sticker sheet to give you a jumpstart on new projects. (View large version3)

The latest version of Sketch (3.2) ships with something special for those interested in Google’s latest visual design language: the material design sticker sheet. In this tutorial, we’ll design a test app with the help of Sketch and the material design sticker sheet.

Let’s Create a Notes App! Link

In this article, we’re going to make a very simple app — a notes app. Luckily for us, all of the components we need are already available in the latest Sketch app. These are the screens we’ll create:

The exported screens4
The exported screens.(View large version5)

You can also download the Sketch file6 (ZIP) that was used to make this notes app prototype; it could help you along in the tutorial.

The Template Link

In our template — File → New from Template → Material Design — you’ll see a wide set of components, icons and layouts. The sheet itself was designed by the hardworking material design team at Google and has been ported with the love and care of Amar Sagoo and myself. The groups and objects are named, styled and organized in a truly Sketch-friendly way.

It All Starts With an Artboard Link

With your new document open — File → New (or Command + N) — press the A key (which is a shortcut for the Artboard tool). You can draw an artboard just as you would draw a shape, a slice or any other object. That’s because Sketch has a simple set of objects that all work the same way (more on that later). When the Artboard tool is selected, you can see on the right side a list of artboard sizes, including — you guessed it — all of the material design sizes. Click on the “Mobile Portrait” size and a white box should appear.

Sketch 3.2 provides the material design sizes within the new Artboard tool.7
Sketch 3.2 provides the material design sizes within the new Artboard tool. (View large version8)

Sketch’s Killer Feature #1: Scale-Independent Exports Link

Note: Material design is defined using density-independent pixels9. As the Android Developers page explains10, a density-independent pixel (DP) unit corresponds to the physical size of a pixel at 160 DPI. Though we’ll be using pixel units11 (px) in this Sketch tutorial, these are really density-independent pixels because you can scale them up or down upon exporting.

In today’s world, you can’t depend on the same pixel density, so DP units allow us to talk the same language when dealing with different device layouts. Sometimes you may be compelled to work at double or triple pixel size because you want to match the pixel size of your surface — don’t go down that route.

Stay at 1x pixels and then just export at the upscaled sizes. Sketch makes that as easy as a simple drag and drop. You’ll see a panel in the bottom left showing you the sizes slotted for exports, and you can even add your own suffix conventions for file names. When you do an “Export All” operation (Command + Shift + E), you’ll see that artboard, and Sketch will export all versions of the bitmap.

Always work at 1× pixels. You can easily scale up or down in the “Export” panel.12
Always work at 1× pixels. You can easily scale up or down in the “Export” panel. (View large version13)

Now, head to the sticker sheet template and select the “mobile global elements” artboard. Only the important stuff there is selectable, so just click on that artboard and copy and paste into your document. You now have the basic layout of a mobile material design app. As you can see in the Layers panel, you have a group named “screen”. You’ll only need the contents of that group, so just go ahead and ungroup (Command + Shift + G) the “screen” group. You’ll now see four layers:

In the sticker sheet, you’ll find some ready-made artboards that you can copy and paste directly into your sketch file.14
In the sticker sheet, you’ll find some ready-made artboards that you can copy and paste directly into your sketch file. (View large version15)
  • navbar
    This is a symbol (symbols in the Layers panel are marked with purple color), which means it will be the same everywhere, and if you change the contents of the symbol, it will change everywhere in the file.
  • status bar
    This is the top bar on the screen with Wi-Fi, time and status information.
  • app bar
    This is your main navigation header, which displays the name of the current page and a button to go up or open the drawer.
  • screen bg
    This is a background color, but it’s also a mask. You can delete this because your artboard will act as the mask for your screen.

Masks in Sketch Work… Upward! Link

In Sketch, masks work upward, meaning that layers above a masking object are cropped by that object. In Adobe Illustrator, however, you would place a shape on top of other layers to create a clipping mask; this threw me off at first. For more on masks, check Bohemian Coding’s documentation16.

If you move these layers around within an artboard, you’ll see that they are masked by that artboard. That’s the only case when an object that is higher in the Layers panel masks the objects below. Artboards always mask their contents and also house the coordinate space; so, an x value of 0 and a y value of 0 would mean the top-left corner.

Cards are a standard pattern and work well for heterogenous information.17
Cards are a standard pattern and work well for heterogenous information. (View large version18)

Let’s go back to the sticker sheet. Let’s grab the half-width card components19 and paste them in our composition. The suggested margins for these cards is 8 pixels, so go ahead and space them out.

Sketch’s Killer Feature #2: Hover Guides Link

One of Sketch’s most useful features has to do with spacing: Select an object, hold down Alt, and then mouse around to see distances from your selection to other objects. And holding down Command + Alt and mousing around will measure objects that are deep within the hierarchy relative to other objects contained in groups.

The floating action button is a unique component in material design.20
The floating action button is a unique component in material design. (View large version21)

Finally, let’s get the floating action button from our buttons components and put that in. It should be 16 pixels from the navbar and 16 pixels from the right side.

Great! So, we’ve got the composition for our first Material app. It’s a scrolling card view.

The Navigation Drawer Link

Navigation drawers provide navigation to primary sections within the app and global functions such as account switching and configuration.22
Navigation drawers provide navigation to primary sections within the app and global functions such as account switching and configuration. (View large version23)

To get around the various areas of our app, we’ll make use of the navigation drawer component. Let’s duplicate our original artboard: Click on the artboard in the Layers panel list or on the title of the artboard on the page, then press Command + D. This will duplicate the artboard and move the new artboard 100 pixels to the right. You can continue your flow simply by duplicating and modifying, which is what we’ll do now.

Grab the navigation drawer from the mobile artboard — the layer is called “side nav.” Paste it onto your new artboard. You can change the categories in the navigation, but the top area is reserved for switching user accounts.

Material Forms Link

Forms in material design morph. Depending on their state, placeholder text becomes labels.24
Forms in material design morph. Depending on their state, placeholder text becomes labels. (View large version25)

What happens when you tap that big plus button? Well, you should probably be able to make a note. Let’s grab some of the form’s components in the sticker sheet and make a new artboard for them. Here, we can make use of the keyboard, which is a symbol that can be placed whenever we need it. We’ll use the dark one to fit our dark app.

Reusing Artboards Link

Of course, after you’ve created a note, you should see it added to the card view. Let’s duplicate the first screen and add in our new note. Just click on the name of the artboard right above the artboard itself. Now that the artboard is selected, press Command + D. That will duplicate the artboard and move it 100 pixels to the right, perfect for quickly mocking up a flow.

You can duplicate artboards and they’ll move to the right side of your flow.26
You can duplicate artboards and they’ll move to the right side of your flow. (View large version27)

Sketch’s Killer Feature #3: The Color Picker Link

Sketch provides a powerful color picker. Just press Control + C to select a color anywhere on the screen. Combining this with Command + click to click through to any element, you can easily recolor any object in no time.

The color picker is quick and accurate and can be used on anything on the screen.28
The color picker is quick and accurate and can be used on anything on the screen. (View large version29)

Covering The Tabs Link

Tabs are a great way to show different sets of content. In our app, we will have notes of importance and notes shared with others. Let’s make some tabs for “saved” and “shared” notes, with our current view being “all” notes. Jump back to the sticker sheet and click on the “tabs” component. Copy and paste that and position it next to the app bar. If you’ve grabbed the whole “app bar” tab from the sticker sheet, you’ll notice that it’s the wrong color. So, change the background color: Click through (Command + click) to the background of the tabs, and change the color to our main color. Move the tabs to the top, and you’re set.

Tabs allow for multiple views of the same content types.30
Tabs allow for multiple views of the same content types. (View large version31)

When copying components from the sticker sheet, you can take any level of elements. This means you can take a whole screen, just the components within or even just the icons. The tabs, as well as other components, have been prepared with a transparent background. Move within the “app bar” group and you’ll be able to copy the “tabs” group and paste onto any existing background. The advantage of a transparent background is that you will get the proper spacing around the component, but you can quickly place it on top of an existing background or toolbar.

Making A List Link

You’ll use lists a lot. They’re a fundamental component to any app, and material design gives us a number of options. We’ll have our “shared” tab contain a list view.

Copy the “three-line item” list from the sticker sheet and paste it in a new artboard. Ungroup the list and then just Alt + drag to duplicate an item, a set of items or a group. Do this until you have a full page of rows.

Lists are a common way to display collections of data.32
Lists are a common way to display collections of data. (View large version33)

Secondary Actions Are Shortcuts Link

You’ll notice a box on the right side of the list. This box is a secondary action. Tapping anywhere to the right of this action would open up that list item; but for quick actions (such as calling a contact or opening information about a document) you can use the secondary action. We’ll replace this placeholder box with a heart so that the user can quickly save notes.

In the sticker sheet you’ll find a small set of icons in the top left under “typography.” Grab the heart icon and paste it where the gray box is located. The icon should be in a group containing the heart icon and a transparent 24 × 24 box. This box helps with spacing, so make sure to grab the whole group.

Symbols allow us to quickly manipulate many instances of the same icon, component or even layout.34
Symbols allow us to quickly manipulate many instances of the same icon, component or even layout. (View large version35)

Sketch’s Killer Feature #4: Shared Symbols And Styles Link

Now, let’s make the row group into a symbol. This will allow us to edit its contents in many places at once. When you select a group, you’ll see a field in the toolbar that says “No symbol.” Click on this field and select “Create new symbol.” The name will default to the selected group’s name: “row.” Now you’ve got a symbol!

Symbols allow us to quickly manipulate many instances of the same icon, component or even layout.36
Symbols allow us to quickly manipulate many instances of the same icon, component or even layout. (View large version37)

Select each of the other row groups you’ve positioned on the artboard and, once again, click on the area that says “No symbol.” This time you’ll see your row symbol available for use; select it. Now that you’ve got a bunch of rows using the row symbol, when you change one, they will all change. Just like that, you have an interconnected set of elements.

Using our newfound power, let’s replace the heart with an overflow icon. The overflow icon is a set of three vertically stacked dots and indicates that more than one action is available. All you have to do is copy the “overflow icon” group (along with the padding) from the sticker sheet and paste it right beside the existing heart icon. Line it up with the heart icon, and then delete the heart icon. As you’re doing this, you should see the other rows automatically update. Yay for symbols!

With Sketch’s symbols, there is no editing mode. Symbols act just like groups and update immediately. This makes it easy to change symbols. Watch out, though: You may be editing a symbol in one place only to find that it has also changed in many other places across the canvas!

Symbols allows us to quickly switch out icons or whole compositions. But be careful: A change in one place will be reflected everywhere, even on other pages.38
Symbols allows us to quickly switch out icons or whole compositions. But be careful: A change in one place will be reflected everywhere, even on other pages. (View large version39)

Bottom Sheets Link

In material design, bottom sheets display a set of actions without covering the screen. These sheets emerge from the bottom of the screen, then drop back down when dismissed.40
In material design, bottom sheets display a set of actions without covering the screen. These sheets emerge from the bottom of the screen, then drop back down when dismissed. (View large version41)

In material design, bottom sheets are a great way for the user to take action without leaving the current context. These enter from the bottom of the screen and display a set of actions. In our app, the bottom sheet will be invoked when the user taps the forward icon in the top right.

Let’s grab the bottom sheet from the sticker sheet and paste it in a new artboard. Also, grab the scrim (semitransparent background) from the previous navigation drawer artboard and paste it behind the bottom sheet.

Dialogs When Needed Link

Dialogs can be used for stopping actions, but use them sparingly because they could be unnecessary roadblocks for repeated flows.42
Dialogs can be used for stopping actions, but use them sparingly because they could be unnecessary roadblocks for repeated flows. (View large version43)

As a last step, we’ll add in a dialog. This will be invoked when the user selects the delete action from the bottom sheet. In this case, we want to be really really sure that they want to delete this note. And finally, speaking of deleting, I encourage you to start fresh with your own designs. Sketch is such a quick program and material design is such an enabling guide that you can think big and different about how to delight users in your app. So, happy sketching!

Quick Start With Sketch Resources Link

Here’s a list of material design resources built for Sketch to get you up and running quickly:

Conclusion: Keep The Principle In Mind With The Tool In Hand Link

Thanks for walking through material design in Sketch with me and making an awesome notes app. We have not only learned a new tool, but also started on our way to a new design system.

One final note of caution: Sometime we focus on existing components and miss an opportunity to address our users’ needs in a new way. You can always check your designs against material design’s principles49:

  • Material is the metaphor
    A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
  • Bold, graphic, intentional
    The foundational elements of print-based design — typography, grids, space, scale, color, and use of imagery — guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus.
  • Motion provides meaning
    Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.

Remember, no matter how good it looks, the greater focus is not on the pixels, but on the user. If your sight is true, all else will follow.

(mb, al, ml)

Footnotes Link

  1. 1 http://www.google.com/design/spec/material-design/introduction.html
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2015/05/01-stickersheet-opt.png
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2015/05/01-stickersheet-opt.png
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2015/05/02-allscreens-opt.png
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2015/05/02-allscreens-opt.png
  6. 6 http://provide.smashingmagazine.com/sketch-material-design.sketch.zip
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2015/05/03-artboards-opt.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2015/05/03-artboards-opt.png
  9. 9 http://developer.android.com/training/multiscreen/screendensities.html#TaskUseDP
  10. 10 http://developer.android.com/training/multiscreen/screendensities.html
  11. 11 http://en.wikipedia.org/wiki/Pixel
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2015/05/04-sizes-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2015/05/04-sizes-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2015/05/05-globalelements-opt.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2015/05/05-globalelements-opt.png
  16. 16 http://bohemiancoding.com/sketch/learn/
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2015/05/06-cards-opt.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2015/05/06-cards-opt.png
  19. 19 http://www.google.com/design/spec/components/cards.html
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2015/05/07-FAB-opt.png
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2015/05/07-FAB-opt.png
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2015/05/08-navdrawer-opt.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2015/05/08-navdrawer-opt.png
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2015/05/09-forms-opt.png
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2015/05/09-forms-opt.png
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2015/05/10-noteadded-opt.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2015/05/10-noteadded-opt.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2015/05/11-colopicker-opt.png
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2015/05/11-colopicker-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2015/05/12-tabs-opt.png
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2015/05/12-tabs-opt.png
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2015/05/13-rows-opt.png
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2015/05/13-rows-opt.png
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2015/05/14-rowsSymbol-opt.png
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2015/05/14-rowsSymbol-opt.png
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2015/05/15-switchsymbol-opt.png
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2015/05/15-switchsymbol-opt.png
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2015/05/16-rowsSymbol-opt.png
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2015/05/16-rowsSymbol-opt.png
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2015/05/17-bottomsheet-opt.png
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2015/05/17-bottomsheet-opt.png
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2015/05/18-dialog-opt.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2015/05/18-dialog-opt.png
  44. 44 https://github.com/BohemianCoding/SketchTemplates/blob/master/Material%20Design.sketch
  45. 45 https://github.com/patrickkeenan/SketchTemplates/blob/master/Material%20Design%20Icons.sketch
  46. 46 https://github.com/google/material-design-icons
  47. 47 https://github.com/patrickkeenan/SketchTemplates/blob/master/Material%20Design%20Whiteframes.sketch
  48. 48 https://github.com/google/material-design-icons
  49. 49 http://www.google.com/design/spec/material-design/introduction.html#introduction-goals
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Patrick Keenan spends his days at Google working on ways to amplify humanity's productivity, through things like notes. He spends his weekends locking willing participants in rooms and designing clever ways to escape. In the time that's left over he's delves into front-end frameworks, prototyping tools, and enjoys seeing science fiction become reality.

  1. 1

    Alberto Restifo

    May 15, 2015 8:36 am

    Can we have more generous sized screens?

    8
    • 2

      What do you mean? Each smaller screenshot or illustration in the article (these are 500px width) is linked to a much larger version. Aren’t the larger variants big enough for you? :-)

      3
      • 3

        gameplace123

        May 25, 2015 1:46 pm

        No, for me the text is still blurry in the “larger” version.

        4
  2. 4

    Adonis Raduca

    May 15, 2015 11:24 am

    Great article,

    Also I would like to share, with the community, a better layouting tool (at least in my opinion), which I’m using about a while.

    Is called Antetype, and is a really efficient tool to lay-out complex UIs (tens / hundreds information-dense screens). You can easily build responsive / interactive layouts, which lively adapts as you resize (with the mouse) the art-boards (they are using the screen concept instead).

    In my opinion, Atetype provides a better (more flexible – UI Toolkits like) component-model than Sketch. Also a better layouting model based on constraints, similar whith what we have on the software side, but is really productive and easy of use. I’m also using Sketch, for creating graphic artefacts like icons, but not for UI layouting.

    You can find more here:
    http://www.antetype.com/

    3
    • 5

      Robin Stice

      May 16, 2015 10:47 pm

      I’d like to also add, since it’s only for a Mac OS, my problem has been that my developers use PCs and can’t access the files as easily as a PSD. I’ve found that Avocode is a great way to get around the accessibility part-at least for my developers. Not sure if that helps anyone, but Sketch has definitely been a game changer for me. Also, take note that because it’s fairly new to the scene, the community for it is growing constantly and the switch over with designers is becoming more frequently. Even if you’re opposed to the program, it would probably be beneficial to understand it. If you know photoshop or illustrator, you’ll pick up this program in a day-it’s really that simple.

      2
      • 6

        @Robin Stice
        You’re problem is your developers need to access the design files, that would imply your developers are not being given what they need to build with. There should never be a reason for a developer to access a design file.

        It is a pain that Sketch is not cross-platform, then again, Windows still does a dreadful job of rendering anything regardless of whether it is raster or vector.

        -12
      • 7

        Cristina Robinson

        May 18, 2015 2:44 pm

        @Robin Stice, I too had the same thinking at first, but part of the reason I started using it was its ability to quickly export all the assets for my developers. I already export the design as a whole for my clients, so as long as I export the assets as well, technically my developers should never have to open the Sketch file.

        0
    • 8

      Yes! I’m a huge advocate of Antetype. It is hands-down the best tool for building layouts out there.

      1
  3. 10

    Is Sketch really Mac OS X only? I can’t see myself using a tool with no Windows or Linux support, unfortunately. That’s too bad as I’d like to do some UI design with Material.

    7
    • 11

      Armando Sotoca

      May 15, 2015 1:26 pm

      Yes. Sadly, Sketch is MAC only. But I think there are good freebies for non-Sketch users too! For example:

      Android 5.0 / Material Design: https://www.behance.net/gallery/18067893/Android-50Material-Design.

      0
    • 12

      Tadd Mencer

      May 15, 2015 2:09 pm

      Agreed. We only have two Apple systems in a company of 30. It’s not something we’re looking at changing because price doesn’t match reasoning. While Sketch looks fantastic, we’ll have to skip it because of this lack of cross support.

      4
    • 13

      You might mention or tag that it is a Mac only app early on in the article so that us less fortunate don’t waste so much time reading on.

      4
  4. 14

    Patrick Keenan

    May 15, 2015 12:50 pm

    Hey Wes, yes, its true, sketch is only Mac OS, in fact its a very Mac oriented program, so porting it over wouldn’t really make sense. However, most of the Material resources are actually in illustrator, so you shouldn’t have any trouble getting started there.

    http://www.google.com/design/spec/resources/layout-templates.html

    6
  5. 16

    You’re aware that “Sketch” is a product exclusively available for Mac?
    This means that 90% of schools around the world are excluded from your wonderful little world.
    Material you said… uuh, uh.
    Congratulations.

    -13
    • 17

      Andrew Saturn

      May 15, 2015 5:26 pm

      most serious design schools (at least in the USA) use Apple products. not saying they should or that this is better, just that this is fact.

      1
      • 18

        around the world is not US then ;)

        5
        • 19

          This tutorial is geared toward designers who use Sketch. For a different tutorial that focuses on your tools and system of choice, consult Google and see if anything comes up.

          0
    • 20

      How is this helpful?
      This is clearly a tutorial that is about using a specific application – it’s not telling you that you have to use this to create interface MOCKUP’s (you still have to code it) in order to design based on Google Materials design framework.

      0
  6. 21

    I didn’t realize there was a shortcut for duplicating an art-board and pasting to the right! So handy! Do you know if there is a way to do the same with an object within on artboard? Like if I’m using a lot of the same group for something? I know alt will copy and past in place, but a part of me really wants that same sort of functionality that was available in omnigraffle.

    0
  7. 23

    Marc Hedlund

    May 15, 2015 11:33 pm

    As an Email Designer and developer, this is my software of choice. The simple export images alone after I slice up a design, is just fantastic, and ultra smooth.

    0
  8. 24

    thanks for the artcile man.

    0
  9. 25

    Really good article. Thanks.

    Small tip about “#1: Scale-Independent Exports”. I highly recommend getting a plugin called ‘Sketch Android Assets’ https://github.com/zmalltalker/sketch-android-assets. It allows you to export pngs at mdpi, hdpi etc and saves them all in separate folders with no suffixes.

    0
  10. 26

    Troy Mcilvena

    May 17, 2015 9:43 am

    What’s your process for dealing with Sketch’s inability to specify Android friendly folder names or prefixes in the export config? It’s convenient to export for iOS with @2x et. el, but how do you get from there to drawable-/.png? Cheers.

    0
    • 27

      Troy – give the plugin a go, you’ll see it makes all the folders.

      0
  11. 28

    hossaingoni

    May 17, 2015 12:24 pm

    very grateful to you for writing such kind of article. It will be very effective for me.i never realize that kind of shortcuts.Many Many thank to you and continue to write.

    1
  12. 29

    Jus a note, I used Sketch for about 3 month and really love it and planning leaving photoshop as my primary tool.

    Everything is great as you mention above, clearly left Photoshop or Illustrator behind… but the all the greatness suddenly stop for me as I find out that Sketch have problem handling complex element, I also not really sure if this Sketch side or my computer need higher spec. Sketch starting render many objects wrongly like fonts, shape etc when you have many object (actually I just working on dashboard of some app) on a page. all the smoothness are gone. pretty sad about this, go back to the boring day using Photoshop (but hey they make photoshop more interesting now like guide, export, rounded rectangle etc)

    -2
  13. 30

    I don’t understand why webdesigners and UI/UX designer use Photoshop instead of Fireworks, wich has most of Scketch features since…. years… And the thing is that it uses png as source files, wich is pretty clever. I don’t understand why no other designer software uses png source files, as it’s lighter than almost any other source files. I don’t understand how someone can tell to use Sketch knowing that it’s OSX only. My developers work on windows and/or linux and need to open those files. I’m pretty sad that adobe gave up on Fireworks. But i still use it as it’s still the only tool that does everyone needs in my company.

    If you have good answers feel free to enlight me.

    Regards.

    9
  14. 31

    @Ben nice thought Fireworks is much better tool for web Designers I myself uses the Fireworks but I think as per the user handiness designers mostly try to use photoshop and also for graphic design work they don’t need to switch it to the other software.
    On the other hand Sketch is only for Mac OS so it has no use for developers who worked on windows or Linux.
    Thanks for sharing the knowledge. It is definitely helpful when I will create any application on Mac.

    -1
    • 32

      @Ben nice thought Fireworks is much better tool for web Designers I myself uses the Fireworks but I think as per the user handiness designers mostly try to use photoshop and also for graphic design work they don’t need to switch it to the other software.

      — That’s a shame —

      On the other hand Sketch is only for Mac OS so it has no use for developers who worked on windows or Linux.

      — It should have o be used by devs, this has no sense —

      Thanks for sharing the knowledge. It is definitely helpful when I will create any application on Mac.

      — Think multi-platform —

      1
  15. 33

    I don’t agree with this post at all. I’ve seen some terrible work first hand with people using sketch. The main problem with sketch is that it’s unrefined and playing catch-up. Good UX UI studios should be looking at moving towards Cloud Based Applications. Adobe’s Cloud coupled with Photoshop hands down destroys Sketch…but lets not get into that…This lets you multitask UI production 10 fold. Multiple users, cloud based asset management and smart asset objects embedded into grouped UI project PSD’s far out ways any competitor. Sketch works well if you’re a sole user working on a small concept job. Being an app, it’s buggy as all hell and can crash without notice, objects within objects within objects and not being able to have the simple options you’d expect in a good design package. Photoshop has all the features listed above and they work more efficiently. I work with some of the best guys in the industry and they won’t touch it again.. Software Design Apps Yeesh!

    -2
    • 34

      Using Adobe Photoshop and other Adobe apps will cost you thousands of dollars in the long run and with the new CC licensing system (you rent the software, but never own it), things look even worse. Why pay thousands of dollars to a big corporation just to be able to create nice UI designs or some vector artwork?

      Also, Photoshop is not a UI design tool. Never was, and likely never will — it carries too much bloat from the past. When you work on your UI or mobile app design, do you really need 3D or CMYK or the ability to edit 8000×5000 px RAW photos?

      And… the Adobe cloud? Really? There’s Dropbox and it’s free and pretty good — you can easily sync your designs and fonts and various assets using it.

      Sketch, on the other hand, is a focused app (screen design only, no print or 3D bloat), and pretty cheap. It is also actively developed, bugs are constantly taken care of and new features are being added. And there are hundreds of free plugins for it.

      If you are a UI or web designer and want to throw away a few thousands of dollars, then you’re more than welcome to rent your software from Adobe. But if you want a cheap and focused app, with a great community to support it, try Sketch instead.

      (Note: My UI design app of choice is Adobe Fireworks; however, since it’s no longer actively developed by Adobe, I am no longer interested in paying exorbitant amounts of money to a corporation which killed the only proper UI design app it ever owned! And if you’re on a Mac, I think Sketch might be a much better choice than BloatShop.)

      2
  16. 35

    Yogesh Mankani

    July 23, 2015 7:15 am

    Very useful tutorial, we have featured it in one of our article. Here’s the link : http://designimag.com/latest-sketch-app-tutorials-2015/

    0

↑ Back to top