The Sketch Manual Part 1: How & why I moved to Sketch (story, resources and insights)

I bet most of you are like me.

You have a demanding full time job, maybe a family, maybe other side projects going on. No free time on your hands, not to talk about switching your main design tool.

But on the other hand – let’s agree that opportunities need to be taken up on if you think that you could benefit from them in the future.

I think there are still a lot of designers out there afraid to make the big move, but are curious as to how to carry it out. That’s why I wrote this post.

I’ll share my own story, features that made me move, how I did it and how to let go of excuses. Ready? Here we go!

*Update (15 Sep 2014): I made a Sketchcast out of this post. So to all of you that would like to see this as a video – Here’s the link to Part1, and Part2. Enjoy!

Ah, and yeah – this is another ‘Sketch VS Photoshop ’or if you will – ‘Sketch VS Any other design program’  article. If you’re already a Sketch user, feel free to write what YOU like about Sketch the most in the comments.

* This is only the first part of the series. Sign up for the HackingUI newsletter if you want to receive the next articles directly to your inbox.

Why and how I made the decision

A few months ago I was going to write a post called “How I made Photoshop my bitch”. Actually the draft of this post still exists on our admin panel.

I was a true Photoshop geek. I had all the best scripts and plugins for what I wanted, knew every shortcut and had very advanced workflows I used in UI designs.

But PS was too much hustle (to say the least) and I read some great stuff about the new Sketch 3 that just came out back then.

When I decided I would like to give Sketch a try, before I even clicked the “download trial” button, I had 2 things in mind:

1. My time was limited to decide if I want to buy it. 15 days is not a lot, and I have a goal of reaching a decision in that 15 days time period. Its also a good thing, because it kept me focused on the goal of reaching a decision in that short time period.

2. I was full of tasks in my work, so I never have time for playing around. Plus in my case running two blogs and being a father+husband doesn’t leave one with too much time for experiments outside of the full-time work curriculum.

So I decided to really take this seriously. I jumped head-first right into Sketch.

The first move I made was to prepare a resources bookmarklets folder. I also signed up to Sketchcasts by Rafael Conde to learn by video tutorials about Sketch.

Sketch Resources

Meng To’s Design+Code – http://designcode.io/sketch and I advise you read our interview with Meng To where you’ll find more great inputs and resources.
Sketchmine  - http://sketchmine.co
SketchAppSources - http://www.sketchappsources.com
Sketch Tips – http://www.sketchtips.info
Sketch Tricks - http://sketchtricks.com (and also you can follow their Medium collection)
BrilliantSketch - http://brilliantsketch.com

I also made a list and started following relevant people on twitter to get updates. You can follow the Sketch related list on our HackingUI twitter account.

Features in Sketch that make me feel I can’t never go back to Photoshop

The Color picker

The Color picker in Sketch is a magnifying glass that helps you pick the color with the upmost of accuracy. You’ll always be a ctrl+C away from the color you wanted.

Color Picker

Color Picker

The Color panel

The Color panel makes colors way easier to keep consistent. In photoshop I used to have the color panel with a swatches.aco file. It was convenient to keep consistent that way, but every time having to click the layer panel – on the specific layer – and then moving my mouse to the colors panel, then clicking enter. Really?? come on!
Call me lazy, but in sketch I don’t need to click the layer to change its color. Any layer’s fill and border attributes are at the side window, even with your existing file’s color palette so you can stay consistent with your brand colors while you’re working.

Styling Attributes

Styling Attributes

 

Even better – with a sketch plugin (that has a keyboard shortcut) I can switch between fill and border color. There are also plugins to clear fill color of a shape and to fill the entire background of your artboard. In the same side panel you also have attributes to shadows and other effects. Same window! Not like in photoshop where you have some in the action menu, in an upper panel, in the layers panel and so on. In Sketch its all accessible from one place.

Last but not least, You can save any style of a shape with the “Shared Styles” dropdown right above the fill and border colors. This keeps certain shapes consistent throughout your design process. Change a shape with a shared style – and this will effect all your shapes with that same style on any page or artboard in your Sketch document.

Sketch Shared styles

Sketch Shared styles

 

And talking about consistency, this brings me to my next loved feature.

Text Styles that actually work

In Sketch the text styles are so light and work like a charm. When you’re working with text, the “Shared Styles” dropdown turns into a “Text Style” panel. Makes it easy to manage H1,2,3 etc and also paragraph texts. Like in the shared styles feature – if you change one text styled word – the rest of the characters with that text style across your whole document will change accordingly. It makes it dangerous sometimes – but keeps you super consistent. I even created a typography styleguide in my document as a seperate page (and I’ll get to talk about pages later on this post).

Sketch Text Styles

Sketch Text Styles

 

Resizing complex shapes with rounded corners and tooltips

Every time I resize a complex shape in Sketch I have one of those ”Oh Sketch – you’re so fuckin’ brilliant!” moments.

When you have a rounded corner shape in Sketch or a shape like a tooltip that is made up of two shapes – you can stretch the shape and amazingly find that Sketch will not distort your rounded corners or mess up your tooltip like in Photoshop. And also if you want to edit a specific shape inside a shape – its easily accessible. Just select the complex shape, press enter, then tab to move between the shapes inside it.

Sketch - Resizing shapes

Sketch – Resizing shapes

 

Background blur

Maybe its just a beautiful trend, but still. When I wanted to create a blurred BG in Photoshop, I needed to create a group ontop of all other layers, select all, copy merged, paste into the group, then go to effects –> blur –> gaussian blur. The real bummer would be when I change something in the BG then I would have to take another screenshot and blur it.

In Sketch, all you need is to create a rectangle shape and give it a “background blur” effect. This will blur the background of whatever is behind it.

Background Blur

Background Blur

 

Symbols – for any UI element

In every Sketch file you have a library of symbols (like in Flash). You can use it for icons, for UI elements such as labels, modules and more. Its just amazing, and you can categorize your symbols in folders by putting a slash (/) in their name. For instance calling you dropdown ‘UI elements / Dropdown open’ and your profile icon ‘icons / profile-icon’.

Symbols

Symbols

 

Export slices easily

Sketch supports export to JPG, PNG, PDF, EPS, SVG and more. The SVG support is awesome and you can export even complex shapes in a matter of seconds. On any layer, layers group, or Artboard you can simply click the “Make Exportable” at the bottom right and export it in a second.

There is also a slices tool if you’re like to export a certain specific area around a shape.

Exporting in Sketch

Exporting in Sketch

Save time when exporting screens

In Sketch you can easily drag any exports from Sketch into any folder or even to your browser (email message/Invision/etc) making it extremely easy and fast to share designs.

drag any exports from Sketch into any folder or even to your browser

Drag any exports from Sketch into any folder or even to your browser

Screens as Pages, States & iterations as Artboards

In sketch you can manage a whole project in one file! No more 1GB PSDs or a dozen different PSDs for every screen of your app/site. Sketch files are extremely light-weight.

In Sketch you have Pages (similar to Indesign). Its super simple to create more and with a simple keyboard shourtcut (fn+arrow up/down) or by using the pages popup you can navigate between them.

I use Pages for each screen of SimilarWebPRO, and I have a second Sketch file for the free SimilarWeb site. Just 2 files for a HUGE app with dozens of screens and states.

When I work on a screen and want to try a different variation I simply duplicate the Artboard and continue to work. If I have an iteration that I decided not to use, I have an overlay (that I made as a symbol) that I put on it to remember.

Artboards in Sketch can be also used to show different states of a screen (i.e. open state of a dropdown). I use it by creating a symbol out of every page I have. That way I can duplicate pages on different artboards to and overlay them with the different states.

Pages and Artboards in Sketch

Pages and Artboards in Sketch

UI templates make it easy to start a project

You can quickly start an iPhone app template with ready made UI elements made by teehan & lax, or open a new RWD template that comes with predefined Artboards and web elements.

The best of both worlds – vector work but with layers

Sketch keeps that easy vector Illustrator-like environment with the freedom to move shapes around and manipulate them, but like Photoshop – you’re still obliged to keeping an organized layers panel. So layers and groups have a lot of meaning inside Sketch (unlike illustrator where no one really uses the layers panel).

Sketch gives you that feeling by its big layer panel on the left, and also with the fact that you have to use layer groups to export and create symbols. So groups and layers get the emphasis they need, but you still feel a lot like the freedom of the illustrator canvas.

Sketch is beginning to get more mainstream.

As Sketch popularity grows you can see more and more resources appear and the community around it is of quality and a will to help each other to grow.

A company that listens to its users and actually releases versions quickly

Unlike Adobe, the crew of Bohemian Coding listen to their users and respond quickly. They work in a very agile manner and release new versions of the app way quicker than Adobe would ever do.

Sketch has a couple of support routes. One is by its twitter, the other in a Facebook group, and the third by email “mail[at]bohemiancoding.com”.

Plugins

Apparently Sketch makes it very easy to write plugins to enrich experience and productivity in design. Its based on JSTalk, which is a scripting language for Mac OS X built on top of JavaScript, with a bridge to Apple’s Cocoa libraries.

There are plugins to create user generated content, to create measurement styleguides, to batch-rename layers, and many more (I’ll write about my favorite plugins in a seperate post).

Btw, if you’re designing for mobile there are plugins to sync designs to your mobile device and for framework.js integration.

“But.. But….” – no buts!

“But now I’ll have to convert all my PSDs to Sketch files?”

You’re right, Sketch does not read PSDs. Its part of the price you pay when doing the move, but (and its a serious fucking ‘but’):

1. There are techniques to recreate designs out of existing HTML files. So if you’re working out of  have your site You can actually drag-n-drop screenshots from Paparazzi onto a

2. Sketch takes any copy paste from Illustrator, so any vector awesomeness you might have on your PSD can be copied by a PS copy –> AI paste –> AI copy –> Sketch Paste.

3. Its a chance to recreate and rethink your designs in a good way. Hey – If you get lemons you’d better make some lemonade.

“But the developers that I work with only use photoshop”

Its a pain, but Sketch is super easy on devs and also cheap to buy (unlike Adobe products). Plus, send them this and you’ll see them automatically loving Sketch and doing their best to learn it. I actually usually do all the slicing myself. Sketch makes this super easy for me.

“But I heard its still buggy”

Yeah, Sketch is not perfect. Its less than 2 years old (!!!). It crashes every once in a while, but you never lose too much as it autosaves. The team at Bohemian Coding is doing a terrific job of fixing all the bugs and releasing new versions constantly. I’d take Sketch’s bugs and crashes any given day when comparing to the lack of productivity I had with Photoshop.

Last words

Sketch is a combination of all thats good in Indesign, Illustrator, and Photoshop.

If there’s one thing I can recommend you – is to make the move. Join us in the Sketch community, we’re all enjoying it like hell.

This is only the first part of the series. In the next articles I’ll cover advanced workflows to design with Sketch. Sign up for the HackingUI newsletter if you want to receive the next articles directly to your inbox.

*Update (15 Sep 2014): I made a Sketchcast out of this post. So to all of you that would like to see this as a video – Here’s the link to Part1, and Part2. Enjoy!

Discuss on Designer News

Published on 13 Aug 2014

Comments

  1. Ryan

    Couldn’t agree more with your entire review of Sketch. I’ve been using it for freelance and loving it, however, I’ve been unable to convince the organization I work for to migrate over to it. Especially since most of the designers are not UI designers and therefore don’t fully understand the beauty of this product.

    Reply
    1. Sagi Shrieber Post author

      In my company we have one more designer, and when I told him about it I just found out he moved to Sketch about a day before. It must be hard to convince many designers at once, but send then this article so they can visually see the amazing features of Sketch, maybe you’ll be able to convince them to at least try it :)

      Reply
  2. Sasha-Shae

    I’m still very very new to Sketch, but I am really loving it’s simplicity. I don’t do UI/UX design alot, but I want to get to a place where I can maybe utilize Sketch more frequently for say stuff like blog design (articles, the photos in the articles and etc), or as you’ve done, by replacing photoshop for certain skills/tasks.

    Thanks for sharing Sagi!

    Reply
  3. Davina

    After using Sketch exclusively for the past 3 months, I recently hopped back into Photoshop CC to hack together a fast UI concept from several screenshots. Why? I dunno, it seemed like the comfortable place to be for pasting and manipulating multiple bitmap images. But man, it was kinda painful. I *wanted* all my shiny, new, fast, easy Sketch tools and interfaces. I couldn’t wait to get my work refactored into Sketch and leave what now felt like a bloated, convoluted PS UI behind.

    Out of curiosity, what would you continue to use PS for, outside of pure image manipulation?

    Reply
    1. Sagi Shrieber Post author

      Hey Davina,
      I can relate, I had the same experience and the next time it came I just fought the erge to open PS, then opened Sketch and today I can say that its so much better to manipulate web pages and already-made images there. You can even drag-n-drop a screenshot from Paparazzi and it will automatically drop it in Sketch as an SVG (!!!) you can then edit the text and everything! ITs plain amazing.
      Plus if that dont work for you try this HTML to SVG converter. I’m going to write all about it in my next posts about Sketch.
      Cheers!

      Reply
  4. Benny

    Great to see more and more people moving to Sketch. I switched to Sketch about a year ago and haven’t looked back since! A few times I’ve had to manually convert my designs to PSD when it was done because the client doesn’t want to switch to Sketch. This sucks of course. I wish there is a Sketch PSD exporter, I would pay a big sum of money for it. Even now I’m working on a project which in the end the client expects PSD files. I’m willing to do it in Sketch and in a later phase hand rebuild it in Photoshop. Sketch saves me more time than the time spent on reproducing the assets, frees me of the Photoshop frustration during the design process. Sketch FTW!

    Reply
    1. Sagi Shrieber Post author

      Wow sounds like an awesome idea for a Sketch extension! btw the Sketch Tool to export assets via terminal is awesome for devs.
      Hopefully someone will come up with a tool to export and import PSDs in a way.

      Reply
    2. Syntetyc

      Hi!
      If your design is not too complex (a lot of shadow effects or gaussian blurs), you can try to export it to .svg, then, you have to open with illustrator. From illustrator is much more easy to export to psd, and you have to make a minimum modifications on the exported file.

      Is the system that I found to convert .sketch projects to Adobe apps. Especially the .svg format, properly exports the texts. In other formats (PDF) some fonts are converted to outlines.

      Reply
  5. Brad

    This article feels like it was written by a Photoshop user that never upgraded to CC or, more recently, CC 2014.

    Some of the points or moot, like rounded corners that distort or scale incorrectly. That is no longer an issue in Photoshop as rounded corners are preserved on smart objects and the object can be scaled while maintaining the original radius. The corners can also be independently rounded and edited at any time.

    I kind of chuckled at the point about applying colours and having to click on the layer panel. Why not just click on the object you want to colour instead? I mean, you’re going to have to click something to select it, otherwise how else are you going to colour it? You don’t have to click on the layers panel to do this.

    Beyond that, I’m in agreement about type styles and object styles, I really wish Photoshop would improve in this department, especially object styles. I would really love to be able to update a style and have those changes reflected on every object that style is applied to. As far as type goes, I have no idea why anyone would want to typeset a lot of text in Photoshop, or any image editor for that matter. None accurately renders text like a web browser does, and creating typographical styles is better left to CSS. I just make an HTML type specimen for this sort of thing.

    To be honest, I’ve moved beyond designing web pages in an image editor and just get cracking with HTML/CSS. If I really must work out the fine tuning of multiple wireframes, I turn to Illustrator, which is what Sketch sounds more like than Photoshop anyway.

    Besides, it’s Mac only, which excludes a good portion of the developers I know and work with. It’s a fallacy that creative studios are all Mac based and are often a combination of the two or entirely PC.

    Reply
    1. Ben

      “I would really love to be able to update a style and have those changes reflected on every object that style is applied to.”

      Linked smart objects have been a thing for a while.

      Reply
      1. Sagi Shrieber Post author

        Maybe so, but they are heavy on memory and plus dont work as seamless as in Sketch. For me an automatically updated symbol across one doc with pages is way better than a linked smart object across multiple PSDs that i have to make sure it updates. And we’re talking what, 10+ years it took adobe to get there? Thats the feature that people hang on to when they dont want to ditch PS?

        Reply
        1. Stdk

          Most features present here are doable in illustrator: character styles, lightweight files, indestructible edition, symbols, symbols combos, easily assets exporting, global colors, you name it… and it even works win both mac and windows, exports to psd and many other filetypes.
          people who are amazed with sketch were using the “wrong” tool, photoshop, in the first place. ;)
          cheers

          Reply
    1. Nick

      This is my problem, sure I’d love to use Sketch but the 3 developers I work with are all on Windows machines so we either need to upgrade everyone to Macs or wait for a Windows version which may never come.

      I think this will be a problem in a lot of places.

      Reply
      1. Dave

        Would absolutely love it if they made a Windows version, as Sketch looks ace and I’m a tired of how bloated Photoshop is. Not buying a Mac for just one app though.

        Reply
    2. Jt

      No kidding. I’m a Mac user but this is still a complete and total deal killer. The software not being on Wondows means it will never be fully adopted, and that I can’t do work from a random Laptop in a crunch. 0% chance to try unless/until there’s a windows version.

      Reply
  6. Khurram butt

    It’s a Nice tool to have!!! i have almost done more than 3 (iOS)Apps Designed in it and now i’m designing icons aswell.Yeah at First you have to Understand the basic tools to get started and above links(most of it) that you mentioned help me alot in back when i start learning.
    Give Some time to it!

    Reply
  7. Mith

    As some have commented, unfortunately Sketch has not been widely used (or known) on the clients/developers’ side. On some projects that I used Sketch, I ultimately had to manually re-create everything in PS (which is not fun at all, after the breezy and fun experience designing in Sketch!) Until Sketch adoption improves among clients/developers, hopefully there will be some way to export to psd from Sketch soon.

    Reply
    1. Sagi Shrieber Post author

      Hopefully yes, but as many move to Sketch its only a matter of time before Sketch files will be legitimate deliverables. As we’re seeing already, some of the greatest companies in the world are already working with Sketch

      Reply
  8. Sebastian Selling

    Fell in love with Sketch 3 big time when I jumped over to it back in April this year, having only done personal projects on it before. Amazing software, light-weight too. I do hope they fix the performance though, it’s horrendous sometimes – especially on bigger projects. I haven’t dropped Photoshop completely though as I work a lot with Motion graphics, Print, Ads etc so Sketch hasn’t replaced the whole process but the majority, for sure.

    Glad to see the software spread :) the more the merrier!

    Reply
  9. Bionik6

    Nice post!

    I’ve bought a Macbook Pro especially for this app. I use it since a couple of months now and it change completely my workflow. I work even faster, and manage my assets easier.

    As a UI/UX designer and Front-end Developer, I focus heavily on Pixel Perfection and Sketch provides such a nice way to tackle this. Even it’s a vector program, you can switch to pixel mode by pressing Ctrl+P, really useful when dealing with pixel perfection and the combo I love the most is Cmd+G to group and Cmd+R to rename the group.

    The community is growing fast and ressources provided such as plugins can really speed up your workflow.

    A must for every Designer.

    Reply
  10. Tim

    While you’ve written a great article, and I can definitely agree going to a vector application for web design is better than using a photo manipulation app.

    However I get the feeling you haven’t mastered Illustrator to the same extent as Photoshop? Every single feature you mentioned, except perhaps the background blur, is available in Illustrator. They even just sorted out resizing rounded corners in CC 2014.

    I personally use layers all the time in Illustrator!

    I would suggest Illustrator is more complicated to use and learn, but can do a lot more, while Sketch does look like it’s focusing on the right things for web design. The important point is to realise Illustrator will also give the same benefits over Photoshop. Especially if you need compatibility with Windows as well as Mac.

    Keep up the good work.

    Reply
    1. Sagi Shrieber Post author

      Thanks a lot Tim, really appriciate it! And you’re right, I have not mastered illustrator like I did Photoshop (but i have used it a lot in the past 7 years and had a 6 month course on it), and if there’s something I can agree is that for designing icons – illustrator is stilll better. But I have also had a period of a couple months where i tried using Illustrator as my main UI design tool, and if i compare the workflows and my own personal experience – managing projects with pages, exporting and sharing so easily, iterating with artboards+symbols, and others make Sketch just feel like the right tool for me :) but ofcourse its just for me.

      Reply
    2. Tal Wachsmann

      Great job in comparing and analyzing! Its always hard changing work habits, and there’s never time to experiment.
      A small thing in Photoshop though, is using smart objects, which give you the ability to make many changes later, like Background blur…(there are smart filters for that) It comes in handy working with both Photoshop and Illustrator.
      Anyway, you got my attention – gonna try this!

      Reply
      1. Sagi Shrieber Post author

        Hey, thanks a lot Tal! In photoshop there are smart objects, and in sketch its called symbols. In Sketch its way lighter on the CPU so you can have tons of them. Plus the BG blur is a small thing, really, but you cant really have full compositions inside smart objects and then put a filter on them. Your computer will basically collapse. In sketch all you need is a rectangle with the BG blur effect. Makes way more sense to design blurs like this. Let me know what you think after you try!

        Reply
    1. Sagi Shrieber Post author

      In no way is this article affiliated with bohemian coding or Sketch. Its my own experience and initiative. Sorry to disappoint :)

      Reply
  11. guy cohen

    Thanks for a great article.

    Which device are you using by the way,i’m using MBP late 2013 and i find that the 16mb ram is sometimes a bit less than what i need,i wonder if for this example you’re using something stronger or maybe your method is different than mine,for example i’m using allot of artboards in the same page,maybe i need to go to more pages with less artboards.

    Thanks again.

    Reply
    1. Sagi Shrieber Post author

      Hey Guy, using the same model mbp 2013 16gb. I use many artboards and many pages, there are times when it seems a lot for Sketch to handle, but performance is way better than PS with a big PSD.

      Reply
  12. paul

    I haven’t used just photoshop for web web design in ages. Adobe illustrator + photoshop was always the better choice.
    Sketch is good, I’ve used it on and off for about a year now. It has LOTS of bugs and things start to slow down with more complex designs.
    Lots of small UI niggles, like a selected layer always scrolling the layer list to the top of the stack (one of many small issues) has seen me move back to adobe illustrator + photoshop.
    If you have the money and the skills, an illustrator + photoshop combo is very hard to beat and CC 2014 has now cherry picked many of the cool sketch ideas.

    Sketch is too expensive for where the software is. Awesome potential, but still too rough around the edges for me to use under a tight deadline with a large project. It’s still beta software AFAIK and should be priced about $29

    That being said, i salute any and all opportunities for competition in this space. Adobe are lazy and inconsistent. Their apps haven’t innovated in a long time.

    Reply
  13. Pingback: The Sketch Manual Part 1: How & why I moved to Sketch (story, resources and insights) | Hacking UI Magazine | The WordPress C(h)ronicle

  14. Bushwazi

    I’m super excited about Sketch.
    1) I’m sure there will be a PC version soon enough
    2) I’m also sure Adobe is paying attention to Sketch (and Macaw as well) and the competition is good for all of us
    3) I’m a developer, and if you can’t convince your devs to get on board, show them how they can copy the css and that there are no “multiplied” layers. The fact the the styles are limited to how CSS works is awesome in my book.
    4) Check out Sketch Toolbox. You can install packages similar to Sublime Text. I found one for exporting HTML, the HTML is garbage, but it does organize the copy into one file, which I haven’t found a good solution for in PS. And if you organize the layers, the HTML gets a lot better and closer to what you would actually use. *We don’t use copy decks at my company so I end up pulling the copy out of a psd by selecting one element at a time.
    5) Has anyone worked in Adobe Edge Reflow as well? Isn’t that a closer comparison to Sketch?

    Reply
  15. Stephanie Hider

    I agree with everything you said here. I moved to sketch in it’s initial offering and it has improved greatly with each version. Just being able to have the progress of a project in pages versus four million saved psd versions with dates and file name conventions alone made it worth the switch for me. One thing I would like to point out that those arguing against the switch that might be a big deal to some, I know it was for me, was the price point. This application is less than a 100 bucks and does very well what in my opinion PS was failing at for years but designers had no alternatives. I love sketch and I doubt I go back to PS for the bulk of my work any time soon.

    Reply
  16. nah

    sketch = mac.

    good luck convincing developers to use mac software.

    most of the things you lament are in photoshop cc 2014.

    your response of linked objects “using more memory” seems like the lewd argument…

    sketch has nice features, but workflow across multiple platforms is not one of them.

    also, the statement of how it is “cheaper than the creative cloud” is irrelevant since i don’t know of any designer or developer who won’t have the cc anyway… sketch is additional cost on top of any agencies CC subscription.

    which, at the current version and cost rates of sketch, i have paid less for the entire adobe suite over 3 years than i have for 3 years of sketch.

    Reply
  17. Caleb

    Thanks for sharing Sagi. I started using Sketch a while back and it has been amazing! I am so much more productive in it than Photoshop! One of my favorite parts about it is the speed it allows when you need to quickly wireframe or mockup a site.

    Reply
  18. Adam

    I love Sketch and I wish I could use it as a part of my workflow but alas I cannot….

    I work in a big agency, filled with designers and developers who still use PC’s, on top of that they’re all with the industry standard – which is Photoshop.

    Now, I wish I could just use Sketch… but sometimes we have to amend/change other peoples designs, so this wouldn’t be feasible for me.
    I think if I ever went freelance, I could start to adopt Sketch as my main design tool.

    Sketch needs an Export to PSD function,
    It’s the only way me and many people like me in the same situation can really use it as part of a company process.

    Reply
  19. Bob Rockefeller

    Did you look into iDraw? I have it and I like it. But it seems most of the design community has embraced Sketch (an undeniably fine program) instead. Is Sketch that much better than iDraw, or just that much better known?

    Bob

    Reply
  20. Pieter

    Just for your interest guys, there is also Pixelmator, which can open PSD’s and export to PSD.
    Also pixels and vectors. But Mac-only I’m affraid for you PC folks.
    Anyone used that?

    Reply
  21. Rowan

    Picked up sketch on the fly for a project under time pressure..

    Found it super intuitive and even having never used it before was able to use it smoothly after reading just the basic overview on their website..

    Does crash and hang occasionally on my macbook air, wish they would prioritise making that side of things smoother over new features.. but still love it and have never looked back to photoshop (which caused its own issues.. sometimes chewing up multiple GB on my scratch disk for a site mockup..)

    Reply
  22. Joel V.

    Awesome story! Definitely going to give it a try! But seriously, what did you use to make those animated gifs?

    Reply
  23. Drew

    Not one comment mentioning Adobe Fireworks, which is being killed off by Adobe, and which Sketch is an excellent replacement for.

    I have used Fireworks for digital design layouts for nearly 10 years and after trying Sketch I am seriously considering pushing it as the software I now use.

    I will never completely stop using Illustrator and Photoshop, as they are perfect for their specific purpose, but think Sketch is great for the jobs I require it for.

    Reply
  24. RandolphK

    As veteran user (and always looking for a better solution, thus hating the bloatness of PS) I have come to just “accept” PS for what it has become (unwillingly of course). I have found creating any web / app type of UI or UX and digital material for that matter is better done in a vector based app. That only leaves me with Illustrator or Fireworks and now Sketch.

    I am happy to have discovered Sketch but my downside is its is only a Mac app…and the majority of my (pay the bills) work takes place on a (YUCK!) Windows based PC :( There is nothing I can do about that unfortunately. BUT…when it comes to my own work and personal clients I use a Mac…hence Sketch is attractive.

    SOOOO…long story short I have found some useful tools that if they were available to the Sketch app and community it would be pretty awesome!

    First off…cutting and slicing (unless it is food) really BLOWS :(

    I am using this plugin called Webbsy (http://webbsy.com) to quickly use PS to create stunning layouts and turn them into HTML web pages FAST! And if I need to make them responsive there is a small investment of time to accomplish that as well (via the plugin and coding, yes hand coding is possible). It allows for conversion of vector shapes into CSS (which is absolutely the number one reason I am using it!) among a few other nifty features.

    If this plugin can be a part of the Sketch tools…I can easily switch over. Its the one thing I can see so far that its missing, a good, fast and clean way to mockup a HTML document with CSS that is USEFUL (the key thing here is BOTH HTML AND CSS).

    Also if it could have a feature set like the WebZap plugin (http://webzap.uiparade.com/) to create layouts already set to a grid, would be a bonus hit!

    Another one is Tych tool (http://lumens.se/tychpanel/) that takes multiple shape objects/imgs and creates a nice grid arrangement of them in your layout.

    These are my 3 cents I wanted to share with everyone today!

    Cheers!

    Reply
  25. Tim

    Alas for us Windows users no Sketch 3. For Windows users Fireworks CS6 gets pretty close to everything mentioned in this article and to some extent Sketch 3 is imitating or paying homage to it’s features and improving on them, since Adobe has now abandoned one of their best acquisitions from Macromedia. If Sketch was on Windows I’d use it no question as I really enjoy Fireworks as a screen design tool.

    You need to add a few plugins (extensions) to Fireworks but after that it is very close feature for feature to everything mentioned here for Sketch 3. It’s also pretty stable on Windows 7 unlike Mac. And you can open PSD and AI files and cut and paste objects into it to some degree (depends on layer masks and blending modes). If you are on Windows and want something functionally very like Sketch 3 try Fireworks CS6 if you haven’t done so.

    Reply
  26. Cam Macduff

    Yah. Thanks for the insight. I’ve been looking for a Fireworks replacement since Adobe killed off the last remnants of Macromedia. This looks brilliant and we’ll definitely consider it a replacement to PS bloatware. Adobe are just trying to cram so much crap into PS I don’t know what it is anymore.
    Does Sketch work well with tools like Macaw and WebFlow?

    Reply
  27. Murray Chapman

    Great article and it has really helped me to understand the benefits of sketch.
    I think it would have been good to make clear right from the word go is that you were using Photoshop for UI design. Sketch is fantastic at Vector UI but editing photos??? Also, based on the illustrations in this tutorial, wanting to create vector based UI, wouldn’t Illustrator or a tool like that be a better option, It kills Photoshop which is not really a tool meant for that kind of design. Having said that, I know a lot of designers use it.
    Anyway, I did not mean what I have said to criticise your article and appreciate your insight into Sketch. I am going to go and get the trial version. You are right in saying that it is worth taking the time to learn something new even if you have little free time but knowing it will free you up more in the long run.

    Reply
    1. Sagi Shrieber Post author

      Thanks a lot Murray, appreciate your comment. About Illustrator, I have a lot of experience with Illustrator although it was not my main tool for the job. But I think Illustrator is not as good as Sketch for UI design, since Sketch also has the pixel integration to it. In terms of print works and complex icons though – Illustrator is still better. Sketch for instance does not have all the Pantone libraries for Print materials and such, and also its perfect for Illustrating (well duh). But it still is not a tool that was made in order to design UI. Sketch is made exactly for that, and all of its current, and future, features are oriented in that direction.

      Reply
  28. Abdallah Ali

    Well I used to be a windows user, Then I started working on a big project with a lot of wireframes needed. When I started looking for wireframing tools I found Sketch to be the most recommended and already has the best resources. I took the step, switched to mac, bought Sketch and here I’m have never been happier with my workflow and already thinking of moving from Photoshop to it starting from this project.

    Reply
  29. Lewis

    Great article and links, I’ve joined your mailing list, thanks.

    To me the biggest problem with Sketch for designers is that it’s so easy to use that developers can pick it up a little too easily! As a developer now I no longer feel like I need a designer to produce decent results on my own, especially with th trend for flat design :)

    Reply
  30. Pingback: Sketch—An Adobe Alternative - Code Flowed

  31. Pingback: TOOLBOX

  32. Pingback: Weekend Reader Woche 35 - fime.ch

  33. Eric Salama

    Well covered article Sagi. I’m almost making the shift to Sketch 3 and i already love the features just by messing around. I’m the sole UI designer on my company, doing all slicing and exporting, and my Dev team is always on the search for new tools and workflows which is perfect to start using another design tool full time.

    The only thing that still holds me back and confuses me is how to manage symbols for each project. Starting from the default Iphone template gives always the same symbols, but if I want to start a new project and create new symbols for that project it takes some time. Is that just because I’m used to PS and have a better workflow and probably using the symbols in the wrong way or the “prep work” takes a little bit of time? How would you handle symbol libraries working on multiple iOS UI projects for example?

    Reply
  34. Javier

    I love the way you can select layers and move them. Much easier than picking layer by layer in photoshop.

    Reply
  35. Pingback: Styling And Animating SVGs With CSS | Smashing Magazine

  36. Pingback: Styling And Animating SVGs With CSS | Linkbuilderz

  37. Pingback: Дайджест продуктового дизайна, август-октябрь 2014 | Юрий Ветров об интерфейсах

  38. Pingback: Passare da Photoshop a Sketch!

  39. Pingback: Moving from Photoshop to sketch!

  40. Pingback: Moving from Photoshop to sketch 3!

  41. Bonero

    Great Article.
    I haven’t yet made the move from Photoshop to Sketch. I think Sketch looks really nice and it feels like the right way to go, even if I still also like Photoshop. Especially the latest updates Adobe have made this autumn/winter.

    There is one thing with Sketch I can’t get a satisfying answer to. It’s about working in a team of designers. Sometimes in our company we are at least two designers working tight together in the same project and we are now both using Photoshop. We need to work at the same time but in different screens (views/pages/sections) of the projects and the latest Photoshop functionality with externally linked files has really created a nice workflow. All the assets stored outside of the composition psd’s and then linked in and reused in various places in the projects. Can you accomplish something similar with Sketch? The symbols are great but if I am not wrong you can’t link them from another sketch file similar to the “new” Photoshop linked layers?

    I would like to set it up like this… Several Sketch files. One for each screen, so we as designers can work on those separately. Because of most of these Sketch files will have many assets in common I would like to have all the assets outside of the screen Sketch files. Every screen Sketch file could of course include different responsive breakpoint designs and states to use the great art board functionality.

    I understand that the best way of using Sketch pages and art board functionality is to have everything in one single project file… but not when you are a team and need to work in different parts of the projekt at the same time.

    Please, say that there is an obvious solution and that i am just ignorant because I haven’t yet dived deeper into the world of Sketch :-)

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *