Feb 13 2013

The Best Hidden Features In Sketch

It’s hard to learn a new design application. And especially when you’ve already invested many years in Photoshop, Illustrator or Fireworks. Luckily, Sketch isn’t hard to learn as explained in my previous articles Sketch VS Photoshop. But I’ve failed to explain all the intricate features that make this gem a lot more than meets the eyes. Simplicity can be deceiving. It is my aim with this article to show you that behind the curtains lies indispensable and brilliant features unique to Sketch that make this application a real beast.

Distribute Spacing

When you design a bunch of elements and want to make the spacing evenly between them, you no longer have to do it manually. Sketch will do it for you. You can either distribute those elements on the fly or by setting the spacing, number of rows and columns.

hidden-spacing

hidden-distribute

Linked Styles

Sketch doesn’t have a Master pages feature like Illustrator has but while some of us wait for that feature, you may find the ability to create linked styles for text pretty useful. After you link a style to a text, any future change to that style will automatically apply to all the texts that also share that style. Sketch obviously need to apply the same to their Pages feature so we can have a shared header or footer, and to all other design elements such as shapes.

hidden-link

Drag And Drop Export

Exporting anything on any application usually require a massive amount of clicks. Not anymore. Just click Export, select the slice and drag and drop the thumbnail. It’s super useful once you start using it.

hidden-export

Rounded Corners Control

If you remember years ago in Photoshop, one of the most common actions was to create a rounded rectangle. It was tough because we didn’t have the rounded rectangle preset. Thankfully, we now have the rounded rectangle as a shape, but what happens if you want just 2 of the corners to be rounded? Well, in Photoshop, you’d have to go to the Convert Point Tool, then select one of the point, place it correctly and delete the extra point. Repeat for the other corners. In Sketch, all you have to do is click Edit, select the points you want to be pointy and click the pointy icon. As simple as that.

hidden-pointy

CSS Styles

This may not a well-polished feature, and the codes will be messy as you’d expect from any application that promises a design-to-CSS conversion, but at least, it gets the gradients and color codes right should you need them. Honestly, especially for gradients, it’s a bit of a pain to code the positions, rgba and HEX codes manually. That’s when the Copy CSS feature comes in handy. In Sketch 2.2.1, you can get the CSS from texts as well. I already made suggestions to the team at Sketch that they shouldn’t duplicate the multiple box-shadow properties and have them separated by commas. Also, they should forget about adding additional codes for multiple browsers and have options for LESS/SASS. It would make the codes a lot cleaner.

hidden-css1

hidden-css2

New From Template

Not having to set the size of your canvas when you start a new document is so liberating. I could go on forever about how amazing the infinite canvas and Artboard features are but they’re also commonly available elsewhere. However, the New From Template feature is pretty unique. You can set any document you design as a Template for future uses. Think of the possibilities.

hidden-template

Final Thought

This article only covers the hidden, unique features of Sketch. You should read my previous articles for more common features such as 100% vector, 2x export, SVG support, etc. Have fun designing! Oh and don’t forget to try Sketch.

0 tweets

65 Responses to “The Best Hidden Features In Sketch”

  1. @LeBinoclard says:

    The Best Hidden Features In Sketch by @MengTo: http://t.co/gKNZGcds

  2. @leviflair says:

    The Best Hidden Features In Sketch by @MengTo: http://t.co/X79SuJFG

  3. @pixeliris says:

    The Best Hidden Features In Sketch by @MengTo: http://t.co/FEJEPR4J

  4. @SeifSallam says:

    The Best Hidden Features In Sketch by @MengTo: http://t.co/vrmu1qqJ

  5. The Best Hidden Features In Sketch: http://t.co/T84wnc7X. Very interesting stuff.

  6. @Felasquez says:

    The Best Hidden Features In Sketch by @MengTo: http://t.co/q9Ap6dwf

  7. @davey says:

    ‘The best hidden features in Sketch’… If you do any kind of web/app design, Sketch is a ~great~ tool… http://t.co/4N2wBhxT

  8. @grtner_ says:

    The Best Hidden Features In Sketch by @MengTo: http://t.co/XwBV7zZW

  9. @phillapier says:

    Sketching is looking more and more appealing: “@MengTo: The Best Hidden Features In Sketch: http://t.co/tNiONNHT”

  10. @iestynw says:

    Pretty awesome hidden feature roundup in Sketch by @MengTo: http://t.co/YHxiIjyk

  11. @jcsizmadi says:

    The Best Hidden Features In Sketch http://t.co/uitnHSqK

  12. The Best Hidden Features In Sketch
    http://t.co/WPDy5XCw

  13. @saismo says:

    Nice to see other designers use it as well: “The Best Hidden Features In Sketch” by @MengTo http://t.co/eExtIWpW

  14. @bsabaric says:

    The Best Hidden Features In Sketch http://t.co/SzY8y2cY As simple as that… #sketch

  15. The Best Hidden Features In Sketch by @MengTo: http://t.co/3S5nx6Or

  16. @ream88 says:

    The Best Hidden Features In Sketch by @MengTo: http://t.co/ONToYvWe

  17. @ericdfields says:

    The Best Hidden Features In Sketch by @MengTo: http://t.co/wxJiZdvV

  18. Eoin Murphy says:

    Really good post, Meng! I’m really enjoying this blog so far.

  19. @noclat says:

    The Best Hidden Features In Sketch by @MengTo: http://t.co/3v3vBJRK

  20. Artayr says:

    It’s a little bit hard to think about stop to use Photoshop after so many years of learn but this article and the previous one (sketch VS psd) make me want to take the plunge.

    An interesting thing to compete with Adobe and expand the community would be open and push the participation of users through an API and a unified center of downloads for templates and plugins (More resolution templates, RWD multi-files, wireframe’s sheets, etc.).

  21. @711px says:

    “The best hidden features in Sketch” http://t.co/ABYPaH20

  22. @raoulw says:

    The Best Hidden Features In Sketch by @MengTo: http://t.co/hbEo0sZ4

  23. @an_star5 says:

    The Best Hidden Features In Sketch by @MengTo: http://t.co/K1laH55f

  24. Teddy says:

    Found this blog a couple of days ago and now I’ve got at least three tabs with articles still open because I have to save them somewhere for reference.

    Personally I’d love to see some design posts by you, you’ve already sold in Sketch – now I just have to learn how to use it to create all these beautiful elements and designs.

  25. Liam says:

    really great choices!
    thanks for share!

  26. Ben says:

    How does this stick up against the features available in fireworks? I think many of them are found there as well.

    I have found Fireworks to be the best go to tool for mobile and web development – and am not sure if switching is worth it yet.

    The single rounded corner feature is pretty cool though!

  27. @cardeoart says:

    The Best Hidden Features In Sketch | Meng To – UI/UX Designer http://t.co/da9HgGFIJX

  28. @kotki_says says:

    The Best Hidden Features In Sketch by @MengTo: http://t.co/YVXwxlNMMI

  29. Luca Bertaiola says:

    Gonna buy Sketch ASAP !

  30. @gcollazo says:

    The Best Hidden Features In Sketch by @MengTo: http://t.co/y5p9lofbZm

  31. [...] is a follow-up post to The Best Hidden Features In Sketch. After 5 months, I still find myself learning new design techniques in Sketch. It’s a very [...]

  32. The Best Hidden Features In Sketch, part 1: http://t.co/gXxjmiyX8a part 2: http://t.co/KfcoMBRk2N

  33. [...] The Best Hidden Features In Sketch be Meng To. There are quite a few tips in here I had not yet discovered. Well worth the read. [...]

  34. @jcoudriet says:

    The Best Hidden Features In Sketch by @MengTo: http://t.co/FXuu2oU71p

  35. @rickigregersen @iksi Start here: http://t.co/FNKwv74Nj7

  36. Much agreed. Anytime I go on %source_url&%, I find a website that is useful and challenging.
    . It’s always helpful to examine content from other authors and implement items from other sites.

  37. [...] Si quieres saber más: 20 plantillas gratuitas para sketch Mengto-Las mejores características secretas de Sketch. [...]

  38. I have recently started a website, the information you provide on this website has helped me greatly. Thanks for all of your time & work.

  39. Hello there, I just wanted to ask if you ever have any trouble with hackers?
    My last wordpress blog at http://blog.mengto.com/the-best-hidden-features-in-sketch/ was hacked and I wound up losing two days of hard work due to
    no back up. Do you have any tips to stop
    May I just say what a comfort it is to find someone
    that truly has expertise in what they are speaking about over the internet.
    I have to say: you genuinely know the simplest way
    to bring this problem to light and make it relevant You really should
    put yourself out there more so that more individuals can see your perspective.
    . I can’t believe you aren’t more well-known since you
    definitely have what it takes. Oh yeah, is your theme custom made
    or did you acquire it from somewhere? A template like
    yours with a handful of quick changes would truly
    make my page stand out. Kindly let me know the
    place where you found your layout.

  40. You may notice that the concept of compensation plan may seem to be common in the networking industry.
    Wouldn’t it be easier if we could be able to save changes ourselves whenever we want. Decide now because if you are a weight lifter, you will not build the chest that you are looking for.

  41. All they need to do is to enroll with their name, email,
    contact number and country and vemmabuilder will cater to the particular country
    of the person. ) and installation used are correct for your situation and the location of your wine cellar.
    You wont get a true imitation of your signature with this Android app, unless you can cleverly manipulate the mechanics behind its operation,
    but that is highly unlikely.

  42. Horizontal Siding and Vertical Sliding refers to the outer layer of a wall,
    with shingles or boards or gaps subtly angled to shed water.
    You might get one or more benefits of outline designer along with it is the ideal means to unleash the capacities.
    If a picture is worth a thousand words then you can just image how much you will absorb by browsing this site.

  43. [...] The Best Hidden Features In Sketch — http://blog.mengto.com/the-best-hidden-features-in-sketch/ Sketch Resource List — http://mattreich.net/journal/sketch-resource-list Sketch [...]

  44. You’ve got a good weblog here! would you like to produce some invite posts on my blog?

  45. Abhishek Gupta says:

    How do you create multi-page/screen designs in Sketch that demonstrates various interactions on a screen, screen states, UI element states etc. Do you maintain separate files for these and if a change has to be made in a re-used element you make it in each of the files.

    I’m just curious to know your workflow for app (android/iOS) design i.e. file management, applying edits across re-used elements, communicating interaction, behavior and user action context through Sketch mockups.

    I’ve been using Fireworks and it is much better than Photoshop for web or app design, but it still lacks at places when I think about better way of product development not just the screen designs!

    Any sort of comment from you will be a sure help on my decision to switch to Sketch. I like Sketch for screen design but not from the perspective of better product development workflows.

    Thank you, Meng To.

    - Abhishek

  46. [...] The Best Hidden Features In Sketch [...]

  47. [...] The Best Hidden Features in Sketch by Meng To. [...]

  48. Hello Dear, are you really visiting this site regularly,
    if so after that you will without doubt get pleasant
    know-how.

  49. website says:

    certainly such as your website but you must check out the punctuational on some of the articles you write. A number of choices filled having transliteration troubles we in discovering them incredibly problematic to inform the reality even so I most certainly will unquestionably arrive again once more.

  50. kredyt says:

    Hi there, I found your blog via Google even as looking for a related subject,
    your web site got here up, it appears great.

    I have bookmarked it in my google bookmarks.
    Hi there, just turned into aware of your weblog through Google, and found that it’s truly informative.
    I am gonna watch out for brussels. I will be grateful iif you proceed this in future.

    Many people will be benefited from your writing.
    Cheers!

  51. [...] Mengto Design Blog ,尤其推荐The Best Hidden Features In Sketch和The Best Hidden Features In Sketch Part 2 这两篇文章。 [...]

  52. [...] Mengto Design Blog ,尤其推荐The Best Hidden Features In Sketch和The Best Hidden Features In Sketch Part 2 这两篇文章。 [...]

  53. Hey there, I think your blog might be having browser compatibility issues.
    When I look at your blog site in Safari, it looks fine but when opening in Internet Explorer,
    it has some overlapping. I just wanted to give you a quick heads up!
    Other then that, superb blog!

  54. woodworking says:

    Why viewers still make use of to read news papers when in
    this technological world everything is available on web?

  55. Sad to see so many spam comments on your posts, Meng.

    I bought Sketch yesterday after I found and read your excellent posts. They really should consider making you an evangelist, although unbiased posts are more appreciated.

    Do you (or anyone else reading this) by chance know of any good Sketch courses? I can’t seem to find any. Working with vector is new to me, so I am looking for good intro courses that can get me going.

    Thanks and please keep writing!

    Cheers, Lasse

  56. Quality content is the crucial to attract the visitors to pay a quick visit the website,
    that’s what this site is providing.

  57. Hi Meng, nice posts and nice finding, I just got sketch on my mac and will try it out. cheers!

  58. Woah this specific weblog is fantastic i love studying your content. Keep on the fantastic perform! You realize, lots of people are researching close to just for this information, it is possible to encourage them to significantly.

  59. I do not know whether it’s just me or if everyone else encountering problems with your site.
    It appears like some of the text in your content are running off the screen. Can somebody else please provide feedback and let me know if
    this is happening to them as well? This might be a issue with my web browser because I’ve
    had this happen previously. Kudos

Leave a Reply