Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. 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. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Moving From Photoshop And Illustrator To Sketch: A Few Tips For UI Designers

I’ve been a long time Photoshop and Illustrator user. Both programs are really useful and powerful, and they’ll remain a key part of any digital artist’s or designer’s toolset, including mine. However, for all user interface, web and icon design workflows, I recently converted to Sketch1. Here is why.

While Photoshop is awesome at what it does, defining what it is might not be so easy anymore. I remember watching a storyboarding tutorial2 by Massive Black3’s El Coro4 (unfortunately, it doesn’t seem to be available for sale anymore). In it, he says that 17 or so years ago, Adobe had no idea that digital artists were using Photoshop to digitally paint pictures! So, it had to catch up with its own user base by adding more — you guessed it — painting features.

I feel that the same kind of thing happened a bit later with Photoshop and user interface design. It was the only robust graphics tool that people knew or had access to some years ago, so they started using it for UI design, as well as for illustration and photo editing5.

6
Photoshop is still widely used7 as a tool for UI design, even if Sketch has taken the lead. (Poll source8: @smashingmag9.)

Then, as a result, Adobe started adding more and more features targeted at interface designers, even though the program was initially intended and designed for a completely different purpose.

Switching To Illustrator: The Annoyances Link

From Photoshop to Illustrator Link

Because using Photoshop for user interface design is, in my view, a needlessly painful experience (and I am not alone10 in this view), I first tried switching to Illustrator. Illustrator made things much better for me for a few reasons: Dealing with a lot of artboards is easier; I can select any object on any layer or any artboard with a single click, without ever having to hunt down layer names in the Layers panel; also, exporting assets in the latest Creative Cloud versions has been greatly improved; and so on.

Illustrator’s vector nature has a lot of advantages for designing icons and scalable interfaces, and using it I find it much easier and quicker to draw, modify and expand shapes. It can export my assets to SVG, and it gives me control over the SVG output code. Illustrator also feels more appropriate for this type of work because the paradigm of working with vector graphics is very similar to working with web technologies (containers, CSS styles, document structure, vector fonts). After all, web browsers are essentially vector-rendering engines.

Problems With Illustrator Link

However, I hit some silly problems every now and again. For example, previewing a design on a mobile device — there is simply no software that allows me to do this directly. Photoshop has Device Preview11, but it’s for iOS only, and there is no such tool for Illustrator. So, I had to use a third-party tool named The Preview12. And every time I wanted to device-preview a screen, I had to copy my Illustrator artboard into Photoshop, scale it up (I always work in mdpi13, and my devices are xhdpi or xxhdpi), and then run The Preview on my device — which sometimes refused to work and which doesn’t support scrolling.

Also, even with the addition of CC libraries14 and with Illustrator’s dynamic symbols feature, some tasks remained kind of annoying or tedious, like using a large set of icons. In Illustrator, there is no simple and straightforward way to quickly add a premade icon and to quickly override its size or color (without creating a bunch of duplicates).

Specifying My Files Link

Specifying my files15 was a problem for me, too. It is, of course, my job to provide developers with a well-specified design. This helps to prevent questions such as “What is the distance between this element and that element?” and “What font size is this text object?”

Photoshop has a whole bunch of specification tools, but I’ve never used them. There aren’t that many for Illustrator, and all have their drawbacks. Arguably, the most feature-full is Specctr16, but I had technical difficulties running it (also, it has no dp as a measuring unit). So, I ended up using a slightly modified version of the Illustrator Specify script17 to measure the sizes of and distances between objects for design specifications. However, as great as that script is, specifying my designs with it was still rather tedious and time-consuming.

My Deal-Breaker Link

While these problems are arguably annoying and slow down my work, they aren’t things that I couldn’t get used to and overcome. However, the two Android projects I’m currently working on are a file manager and an email client — which means that a lot of my high-fidelity mockups are full of lists, avatars, file icons, file sizes and other types of data.

To further complicate the situation, both projects come with a light and a dark UI theme. Also, a lot of my designs need to be tailored to both phones and tablets in both landscape and portrait modes. This means a lot of copying and pasting, symbol-editing, typing, selecting and deselecting, and so on.

Illustrator’s Dynamic Symbols Link

Admittedly, Illustrator’s symbols and libraries features can be handy and save me some manual labor. But they can be quite limited — for example, one can’t have multiple iterations of the same symbol or of the same library graphic. For me, this meant that I couldn’t use the same symbol (say, an icon or a button) in both my dark and light theme mockups because I couldn’t change its color without modifying the symbol graphic itself. The same goes for the library feature.

Problems With Data-Driven Design in Illustrator Link

Now, the most efficient way for me to avoid having to copy and paste is to have all text entries — see “Subject,” “From,” “Content Preview” and “Time” in the example below — as variables and to dynamically load predefined strings of data for each entry.

18
These are the four strings of data for my email app’s Inbox mockup.

This is, in fact, possible in Illustrator19. I could create my spreadsheet with data, import it in Illustrator with the help of a plugin20 and be ready… with one huge caveat, however: There can be only one variable entry per iteration of the file!

This makes the feature perfect for something like a business-card project, where you’d want to keep the design the same and only change some text (such as the name and phone number). When you export the final PDF files, you’d simply iterate a hundred times through a spreadsheet of data to get a hundred different names and phone numbers. This would produce a hundred nice, corporate business cards for a hundred happy employees.

However, this behavior renders Illustrator’s data features pretty much useless to me, because I need to populate a lot of of text entries simultaneously, each with a different string, on multiple artboards, and so on.

A Potential Creative Cloud Solution? Link

If you must stay in the Adobe Creative Cloud realm, or if switching to a Mac is not an option, there still might be a solution. Adobe’s new tool, Adobe XD21, handles working with dynamic data22 fairly well. However, because it’s a new tool, it can feel limited in other ways. Also, Adobe XD’s Windows version currently lags behind the Mac one.

The Solution: Switching To Mac And Sketch Link

Because of all of the little (and big) issues mentioned, I started to search for a better solution. So, I thought about the Sketch app.

I hadn’t had a Mac for the previous three years, and when I did have one I’d never used Sketch on it. However, I missed the operating system, and it always bothered me that Mac users always get the best software gadgets! I did plenty of research on Sketch and on other tools such as Origami, and I got tired of hacking my way through Framer6223 on Windows.

So, a couple of months ago, I decided to switch back to a Mac — both at home and at work.

Enter Sketch! Link

Sketch cures a lot of my pains — and not just by itself, but also with the help of its vast plugin ecosystem. Compared to Illustrator and Photoshop, Sketch is focused on the needs of the UI and icon designer. And, unlike Photoshop, Sketch was made for UI design24 right from the start; UI wasn’t an afterthought.

Of course, it’s not perfect. I miss things, such as Illustrator’s Knife tool when I draw illustrations; it lacks some handy filters; there is no basic Photoshop Layer Styles alternative; and so on. But that’s kind of beside the point. Sketch doesn’t seem to be aimed at artists doing complex vector illustrations, and it only covers the very basics of raster editing.

At first, if you’ve been using Photoshop for all of your design tasks so far, you’ll be in awe when you see how you’re able to directly select any piece of graphic on any layer with just a couple of clicks or less. And if you (like me) have been also using Illustrator, then you’ll be impressed by Sketch’s more powerful Symbols feature, better artboard organization and more intuitive interface.

Measuring distances and objects is so much fun in Sketch! I just hold the Alt key, mouse over the objects on the canvas, and I’m able to see all margins, paddings and sizes. I can adjust them on the fly and just have fun, while keeping my designs really neat.

25
All margins, paddings and sizes seen at a glance

The little things are also important! One example is the ability to do simple math in an object property’s input field in the Inspector panel26. I can scale a rectangle object by typing something like 12 / 3 or 2 + 2. Very helpful sometimes.

InVision’s Craft Plugins Link

I’ve already mentioned Sketch’s plugins. And InVision’s Craft plugins27 are probably among the most powerful and useful.

Craft actually solved my aforementioned problem of loading data into my designs. For the email app I’m working on, I can now create a list of (actual or fictitious) email addresses, subjects, content strings and more in a spreadsheet. I only need to make sure that every spreadsheet column’s first entry serves as the title (for example, “Content”).

28
The first row of my document (View large version29)

Unfortunately, the Craft plugin doesn’t support importing data in XLS, CSV or ODS format. It only supports JSON (a file format specifically for exchanging data). I use Google Spreadsheets, and because it doesn’t support direct exporting to JSON, I have to first save to a CSV file, then use an online CSV-to-JSON converter to get the format I need.

30
Download your spreadsheet as a comma-separated values (CSV) document. (View large version31)
Here’s how CSV looks like, compared to JSON32
Here’s how CSV looks compared to JSON. (View large version33)

Now, I only have to save the JSON file on my computer and drag it into Craft’s Data panel.

34
Importing my JSON file

The entire conversion process might sound complicated, but it only takes a couple of minutes.

Now, I only need to tell Craft which Sketch text field corresponds to which JSON string. Then, I use the duplicate functionality to make as many duplicate entries as I want:

35
Assigning and duplicating data strings

As for those avatars with letters inside, I don’t need to bother with a spreadsheet. Here’s what I did instead: I used a nested symbol36 to tint each avatar with a different color. And Sketch’s overrides feature does the job of dynamically replacing each letter!

37
Sketch’s native overrides feature is what makes its dynamic symbols so powerful38.

This approach works well for expanding phone designs into tablet designs because I only need to adjust Sketch’s text fields.

39
Your data is there! Simply adjust the width of the text fields according to your needs.

My Other Favorite Sketch Plugins Link

It’s not only about the Craft plugin, of course. I rely on quite a few plugins in my daily work, and all of them help me to be more efficient.

Sketch Style Inventory Plugin Link

As mentioned, the projects I’m currently involved in come with a light and a dark theme. Having to provide designs for both themes and for each screen can be tedious and time-consuming. However, using Sketch’s Style Inventory40 plugin, I can select all items in all of my artboards by name or by current color or by another property, and then batch-adjust them as I like.

41
Batch-selecting design elements is super-easy with the Sketch Style Inventory plugin. (View large version42)
43
The dark theme mockup with the exact same data.

Thus, I can recreate my designs for different themes in just a minute!

Sketch Icon Font Plugin Link

Adding a Material icon (or an icon from another font icon set) is a no-brainer with the Sketch Icon Font plugin44. It takes only seconds! I don’t have to leave Sketch, and the icon can be scaled, colored and edited in any way I like.

45
The entire Material icon set is at my disposal with just a couple of clicks. (View large version46)

Skala Preview Plugin Link

Sketch includes previewing functionality called Mirror47. However, it works only with iOS devices and web browsers (for web design mockups). Skala Preview48, on the other hand, provides excellent device-previewing functionality and (what is most important to me at the moment) support for Android devices.

Skala by itself does not support Sketch directly, but there is the Sketch Preview49 plugin to help with that. It’s reliable and has never crashed for me, but every now and again I have connection issues. What I love about it is the simple scrolling functionality that The Preview and Photoshop combination lacks.

Swatches Plugin Link

Sketch has functionality similar to Photoshop’s and Illustrator’s swatches. It’s called global and document colors, but it has some minor limitations. For example, the palette colors can’t have names; they can’t be organized in subfolders; and no commonly used palettes come preloaded in Sketch. Also, I think the margins around the color squares are a bit too wide, so a large palette might not fit comfortably in there.

50
Sketch’s native palette isn’t that comfy for some use cases.

The Swatches51 plugin improves the situation. It comes preloaded with plenty of standard palettes, such as the Material palette, Pantone and others. I can mouse over a color to see its name, and I can apply it as a fill or stroke color or copy its HEX value with just a click.

52
The Swatches plugin with the Material design palette

Zeplin Plugin Link

Last, but not least, I need plugins to create design specifications. One of them is Zeplin.

Zeplin53 is a cloud-based toolset for creating automated design specifications and for designer-developer collaboration. Its main feature is that it reads and parses all of your Sketch artboards in a file, uploads them to a web server, and provides a web interface for other collaborators to view them. Once your artboards have been crunched and uploaded, anyone who checks them out on a computer can click and hover about and see all margins, paddings, fonts, HEX codes and other properties of all objects in the design.

54
Zeplin plugin in action

This approach to design specifications is quite helpful because it saves the designer from the time-consuming task of doing specifications manually. It could also reduce confusion and misunderstanding with the development team.

Other features of Zeplin that I find quite helpful are: organization for multiple projects, screen versioning (kind of like Git55 but designed for screen mockups), project style guidelines, and optimized asset exporting.

A potential downside of Zeplin is that some companies may have concerns over its cloud-based nature.

Sketch Measure Plugin Link

Zeplin is good for managing and working on entire projects that contain many screens. However, if you’re looking for a simpler (and free) solution, you may want to choose something else: Sketch Measure56.

Using this plugin, you can specify your own design document or let the plugin do the dirty work. Like Zeplin, it will export a web page with your design on it, together with an interactive specification overlay! Unlike Zeplin, everything is done locally, but you won’t have the extra project-management tools at your disposal.

57
Sketch Measure plugin in action

Compress the generated files to ZIP, give them to your developer, and you might save yourself quite a few hours of work!

Managing My Sketch Plugins Link

With so many plugins, one needs a reliable way to find, install, manage and update them. Sketch’s built-in manager only lists the plugins that are already available, allowing the user to enable and disable each one. This can be useful when you want to debug a plugin that’s acting up, but having to manually search for and install new plugins can be a hassle.

The best solution to this problem is probably the Sketch Toolbox58 app, a simple yet very useful tool. It allows you to install (and uninstall) almost any Sketch plugin out there with a single click. Highly recommended!

Sketch Toolbox’s long list of available plugins.59
Sketch Toolbox’s long list of available plugins (View large version60)

Prototyping And Framer Integration Link

Sometimes, static mockups don’t quite cut it if you need to communicate a more complex idea to developers, particularly for motion design and microinteractions. Some very good tools for interactive prototyping61 are out there, and each takes a different approach to the task.

My prototyping tool of choice is Framer6223.

Framer Link

Framer takes the programming approach: The designer is required to program their prototype in CoffeeScript63. The prototype is immediately previewable in Framer Studio and can also be viewed on actual devices or in the browser.

I personally like the coding approach to creating prototypes, despite the steep learning curve. It will pay off eventually, because programming gives me a lot of control, and it also forces me to think a bit like a developer, which can be an advantage.

64
Meet Framer. On the left side is the code editor; on the right is my preview; and in the middle is the layer structure of the prototype (or of the imported Sketch file). (View large version65)

Using Framer and Sketch Link

Including Framer in my Sketch workflow was fairly easy because it integrates by default. I only need to import the Sketch design file I’m working on, and I can immediately start to animate or otherwise manipulate any group of layers. The Framer-Sketch integration supports multiple artboards, but you can only import a single page at a time.

I’m still figuring out the most efficient way to work with Sketch and Framer. Currently, I think it’s best to have large per-project Sketch files, with separate pages for each screen of the app (or website) I’m working on. This enables me to easily reuse and organize all project assets, such as icons and buttons, into dynamic symbols. However, this approach produces larger files and slows down the Framer importing process. So, usually I’ll copy and paste the elements or screens that I want to prototype into a new file and then import them from there.

How Photoshop And Illustrator Fit My Workflow Now Link

I’ve moved to Sketch, but Photoshop and Illustrator are still part of my toolbox.

Because Sketch is a tool for UI design, it’s not the best-suited for creating very complex illustrations, and it doesn’t easily replace a solid vector application for illustration (nor does it attempt to).

66
While Sketch can be used to create complex illustrations, that is not its main purpose. (Source: illustration made in Sketch by Mirko Santangelo67) (View large version68)

I currently use Illustrator when I want to use my Wacom tablet for freehand drawing work, or if I’m doing something that requires complex artistic brushes and filters, or if I need to trace a raster image and convert it vectors. And, though nowadays I rarely do vector work for print (posters, leaflets, etc.), if I have to, I would again choose to use Illustrator.

Now I exclusively use Sketch for all interface and icon design tasks, but I continue to use Photoshop when I need to edit or refine product imagery, when I’m in the mood for some digital painting or drawing, or when I want to enhance a few photos. It has also happened a few times that I’ve opened Photoshop to quickly stitch together a few UI design mockups, so that I could send design previews for approval.

Conclusion Link

Sketch has solved many of my problems and has made my day-to-day life as a user interface designer a lot better. Mundane little things such as measuring distances and sizes are now much easier and quicker for me. I can now automate parts of my workflow and use real data in my Sketch designs. I can also organize my files more optimally (with the help of pages, artboards, states and symbols); I can reuse assets (through the dynamic symbols feature); and more.

Sketch also has a vibrant community. All of the open-source (and mostly free) plugins that completely transform the app and add some excellent functionality make Sketch a very versatile tool for UI design!

I really like Sketch’s focused approach, and hopefully I’ll continue to discover tiny features, tricks and plugins that make me go, “Whoa, that is so cool!”

If you’re a UI designer and are still using mostly Photoshop or Illustrator, I highly recommend you try Sketch. You might never want to look back!

(mb, al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/tag/sketch/
  2. 2 https://www.youtube.com/watch?v=uXg2reSswpA
  3. 3 https://massiveblack.com/
  4. 4 http://coro36ink.com/
  5. 5 https://www.google.com/search?q=photoshop+tutorials+for+editing+photos
  6. 6 https://twitter.com/smashingmag/status/839750650233749505
  7. 7 https://twitter.com/smashingmag/status/839750650233749505
  8. 8 https://twitter.com/smashingmag/status/839750650233749505
  9. 9 https://twitter.com/smashingmag
  10. 10 http://hackingui.com/sketch-design/a-year-using-sketch/
  11. 11 https://helpx.adobe.com/photoshop/how-to/live-preview-mobile-device.html
  12. 12 https://play.google.com/store/apps/details?id=com.spreadsong.pspreview&hl=en
  13. 13 http://sebastien-gabriel.com/designers-guide-to-dpi/
  14. 14 https://helpx.adobe.com/creative-cloud/how-to/creative-cloud-libraries.html
  15. 15 https://www.smashingmagazine.com/2014/10/front-end-development-ode-to-specifications/
  16. 16 https://www.smashingmagazine.com/2013/11/specctr-an-adobe-illustrator-plugin-freebie/
  17. 17 https://github.com/adamdehaven/Specify
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/03/strings-preview-opt.png
  19. 19 https://www.youtube.com/watch?v=eCBrK8tZAXQ&feature=youtu.be
  20. 20 https://github.com/Silly-V/Adobe-Illustrator/blob/master/Variable%20Importer/VariableImporter.jsx
  21. 21 https://www.adobe.com/products/experience-design.html
  22. 22 https://medium.com/@anirudhs/project-comet-designing-with-real-data-959beccb5c1a
  23. 23 https://framer.com/
  24. 24 http://blog.mengto.com/sketch-vs-photoshop/
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/03/hovering-animated.gif
  26. 26 https://sketchapp.com/learn/documentation/the-interface/inspector/
  27. 27 https://www.smashingmagazine.com/2017/02/design-with-real-data-sketch-using-craft-plugin/
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/03/spreadsheet_titles-large-opt.png
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/03/spreadsheet_titles-large-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/03/spreadsheet_save_as-large-opt.png
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/03/spreadsheet_save_as-large-opt.png
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/03/csv_json-large-opt.png
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/03/csv_json-large-opt.png
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/03/import_json-animated.gif
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/03/populate-animated.gif
  36. 36 https://www.youtube.com/watch?v=uXg2reSswpA
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/03/overrides-animated.gif
  38. 38 https://medium.com/ux-power-tools/designing-a-top-nav-in-one-symbol-295b8b0a05a5
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/03/resizing-animated.gif
  40. 40 https://github.com/getflourish/Sketch-Style-Inventory
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_inventory_menu-large-opt.png
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_inventory_menu-large-opt.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/03/dark_theme-preview-opt.png
  44. 44 https://github.com/keremciu/sketch-iconfont
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_icon_plugin-large-opt.png
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_icon_plugin-large-opt.png
  47. 47 https://www.sketchapp.com/learn/documentation/mirror/mirror/
  48. 48 https://bjango.com/mac/skalapreview/
  49. 49 https://github.com/marcisme/sketch-preview
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_palette-preview-opt.png
  51. 51 https://github.com/Ashung/Sketch_Swatches
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2017/03/swatches_plugin-preview-opt.png
  53. 53 https://zeplin.io/
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2017/03/zeplin-animated.gif
  55. 55 https://www.atlassian.com/git/tutorials/what-is-git
  56. 56 https://github.com/utom/sketch-measure
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_measure-animated.gif
  58. 58 http://sketchtoolbox.com/
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_toolbox-large-opt.png
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_toolbox-large-opt.png
  61. 61 https://www.smashingmagazine.com/2016/09/choosing-the-right-prototyping-tool/
  62. 62 https://framer.com/
  63. 63 http://coffeescript.org/
  64. 64 https://www.smashingmagazine.com/wp-content/uploads/2017/03/framer-large-opt.png
  65. 65 https://www.smashingmagazine.com/wp-content/uploads/2017/03/framer-large-opt.png
  66. 66 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_app_dream_car_by_mirko_santangelo-large-opt.jpg
  67. 67 https://dribbble.com/shots/1303723--Sketch-app-Dream-Car
  68. 68 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_app_dream_car_by_mirko_santangelo-large-opt.jpg

↑ Back to top Tweet itShare on Facebook

Lachezar Petkov has been involved in digital art and design one way or another for about ten years. He started as a icon designer and a contributor to an open source project, and currently works at Mobisystems as an User Interface Designer.

You can reach him on Twitter: @lpetkov

Lachezar' portfolio is currently under construction.

  1. 1

    Simon Gidney

    April 27, 2017 4:05 pm

    Sketch looks great! But for anyone else looking for direct replacements for PS and AI, I strongly recommend you take a look at Affinity Photo and Affinity Designer. For 99% of what I do these are perfect, despite only being v1.5 so far. The keyboard shortcuts and UI layout are similar enough and when things are dramatically different, it’s generally for a good reason. The transition from AI to being comfortable in Affinity Designer has taken a few weeks, but it was far less painful than going from Freehand to AI about 10 years ago. In fact I still get frustrated that AI can’t do many things as well as Freehand did.

    9
  2. 2

    I’m always concerned about this type of article, it seems to be a bit biased and, even though it has a balanced tone, it definitely overlooks the flaws of the advertised software. Being proficient in both PS and Sketch, this seems to me more like a fake news article. Sketch is definitely a good competitor for PS and it’s probably a good choice if you want to design some simple flat mockups like the ones that were presented in the article. If you want to do complex designs and then showcase their behaviour by animating them in After Effects, then you can just forget about Sketch. However, Sketch does a perfect job of paying for these articles. It is definitely a great marketing strategy.

    4
    • 3

      Lachezar Petkov

      April 27, 2017 8:24 pm

      (Story author)

      Sure – if you want integration with After Effects, Photoshop or Illustrator would be the way to go. But as I mentioned in the article, I use Framer to bring motion *and* interactivity to my mockups (something AE of course, can’t do).

      3
    • 4

      Jonatan Grönkvist

      April 27, 2017 9:12 pm

      Well said Mihai. I have been working at two big major corps for over a decade now (Sony and Microsoft). A lot of my fellow designers always complained about having to use a PC instead of a MAC. Once the rules about platform choice softened up a bit, a lot of designers moved over to Sketch.

      I totally agree that Sketch is an amazing tool if you only work alone or in a small or mid company, where everyone is on the same platform, but after a while at my workplace, when people started to use Sketch hell break loose. Some people were away (being sick, left the company etc) and all the Windows users were left out and basically had to redo a lot design files. And YES converted Sketch files are horrible.

      Seriously, it’s 2017! Stop thinking mono platform, there is a whole world outside the little MacOS elitist bubble. Once Adobe or Affinity really gets in to the game, I cannot see Sketch being Mac only…I hope :)

      Jonatan, Senior Designer @ Microsoft

      3
      • 5

        Michel Bozgounov

        April 29, 2017 12:04 am

        Seriously, it’s 2017! Stop thinking mono platform, there is a whole world outside the little MacOS elitist bubble. Once Adobe or Affinity really gets in to the game, I cannot see Sketch being Mac only…I hope :)

        — Good points, Jonatan! I also hope Sketch won’t remain Mac-only forever. :-)

        Just a couple of quick notes:

        – Affinity Designer is promising. However, it is not focused on UI design — it’s a tool more like Adobe Illustrator. And what many designers like about Sketch is exactly the fact that it’s focused on UI design, almost in the same way like Adobe Fireworks was.

        – Adobe. Ah, Adobe! Adobe had almost the perfect tool for UI designers: Fireworks! Fireworks was running on Mac and Windows, it was focused on UI design, it had a ton of amazing extensions (and a great community around it), it was easy to learn and master… but it had only one flaw: it wasn’t called Photoshop. So Adobe suddenly stopped developing it… for no apparent reason (except the last argument). A few years later, Adobe started to develop Adobe XD but it’s far away from Sketch or Fireworks, in terms of features. So yes, I am waiting too for Adobe to get into the (UI design tools) game — a game that they almost lost when they discontinued Fireworks in 2013… :-/ Time will tell!

        7
    • 6

      Michel Bozgounov

      April 28, 2017 10:19 pm

      (story editor)

      Hello Mihai! I think I need to chime in here:

      this seems to me more like a fake news article

      — No, this is not a “fake news” article.

      At Smashing Magazine we publish only two types of articles:

      1. Articles written by authors who share their own experience with design and development workflows, design tools, software, etc. These articles are *never* paid/sponsored by any third parties! Instead, we always pay authors for their work. Also, please note that all articles are being reviewed at least twice by independent experts before they are ready for publishing. (More about the whole process you will find in this extensive write-up by our editor-in-chief, Vitaly.)

      2. Recently we started to publish also sponsored articles. However, such articles are *clearly* marked as sponsored, like this one for example.

      The article you just read — about moving from Photoshop and Illustrator to Sketch — falls into the first category, and it is not sponsored (by Sketch team) as you suggested.

      Feel free to disagree with the author’s views — however, these are his own personal views, and if you disagree with them does not mean the article is “fake”! Labeling it as “fake” would be rude.

      Articles are biased because we (humans) are — we love and hate, we like and dislike — and then we share our experiences they way we see them. Nothing wrong with that.

      Sketch is definitely a good competitor for PS and it’s probably a good choice if you want to design some simple flat mockups like the ones that were presented in the article. If you want to do complex designs and then showcase their behaviour by animating them in After Effects, then you can just forget about Sketch.

      — Sketch can do much more than “flat design” files!

      Example: https://dribbble.com/shots/1218993 — this looks like “flat” to you? Or maybe not?

      But the article’s main point is not about that.

      However, Sketch does a perfect job of paying for these articles. It is definitely a great marketing strategy.

      — Sketch never sponsored even a single article in our magazine. Sorry to disappoint you! :-)

      Oh, and one final argument — if you said Photoshop and After Effects are a better combo than Sketch and the tools that Lachezar mentioned in his article, does it mean Adobe paid you to write this comment of yours? Think about it…

      18
  3. 7

    “Because using Photoshop for user interface design is, in my view, a needlessly painful experience…” – so true.

    Before it was dropped, Fireworks was my go-to for web design. In the day it had enough features and was incredibly simple to use. I no longer do much designing, but I still have an old copy I pull out of the dust bin occasionally.

    However, designing in today’s world requires more sophisticated tools, and should I ever jump back into the UI design world, Sketch will be near the top of my list.

    6
  4. 8

    Adobe had an excellent solution with Fireworks.

    It handled both bitmap and vector images. It was easy to apply styles to objects and add objects to the library.

    Unfortunately they quit developing it since so many people moved to photoshop.

    They could have continued to make it more functional and powerful.

    RIP Fireworks

    9
    • 9

      It’s kind of weird many went for Photoshop as their main tool. Illustrator would have been a more logical choice.

      3
  5. 10

    When I started reading the article, I thought this must be a repost. It starts with what has been said a trillion times already. However, I’m glad I kept reading to get a feel of your workflow which gave me some new perspectives. Thank you. –

    3
  6. 12

    Kevin McGuire

    April 28, 2017 4:15 am

    The Runner plugin for Sketch is a real time saver and can install and update your other plugins as well.

    3
  7. 13

    Thanks for this helpful information !!!

    1
  8. 14

    Vishnu Price

    April 28, 2017 7:50 am

    Hi, you helped me a lot describing the differences between Photoshop and Illustrator and the pros and cons of both!
    thanks so much for this help!

    0
  9. 15

    I´m using Affinity Designer every day and as I see it, its the perfect mix between Sketch, Illustrator and Photoshop. Yeah it got its bugs and some additions would be nice for UI-work but theres a great asset manager, symbols, constraints and great grid-toptions. Its cheap, flexible and got a great support behind it + its multi-platform. Most things that can be done in Sketch can just as easily be done in AD.´And no I’m not paid by Affinity to write this ;)

    2
  10. 16

    There’s one missinformation in article (well it suggests illustrator doesn’t have that issue).

    You can also do simple math operations on objects in illustrator.

    0
  11. 17

    You can also select batch style in illustrator (by color, properties, apperance etc.)

    0
  12. 18

    I’m surprised I stepped away from Photoshop for designing websites so easily … Sketch is really a great AND enjoyable tool to work with. I was waiting curiously for Adobe XD, but actually realised they don’t listen to their customers like they should do, it’s still in BETA !!! Dissappointed in Adobe…

    1
  13. 19

    Like some of the other comments, I’m a UX Designer / Developer and I would highly encourage people to consider Affinity Designer for UI layouts and Affinity Photo for photo manipulation. I’ve used Photoshop and Illustrator for over 20 years and Affinity has done a great job matching and even surpassing Adobes features. I’ve also used Sketch and it is very cumbersome. I use Affinity Desginer now for UI mockups. The latest version introduces constraints for responsive layouts and powerful symbol features. I’m very impressed with Affinty, I’m just surprised Smashing Magazine has not talked about them very much. The best part is Affinity Designer is only $49 US one time fee. Sorry, but in my experience Sketch doesn’t even come close.

    -2
  14. 20

    Sketch looks great and I hear good things from others. I am however tied to PC for work and can’t incorporate it.

    @Lachezar – I’m a bit confused; were you saying it’s difficult to select objects in PS? What about ‘Alt + right-click’ ?

    0
  15. 21

    Great article – this is super useful for folks like me that are very deeply ingrained in the Adobe ecosystem, and have yet to dip into Sketch. One tiny point: like Sketch, Illustrator (and even Flash!) has long supported being able to do math inside input fields, which is a huge time-saver. I wish Photoshop supported that feature as well.

    Definitely going to share this with some of the rest of our team, who are just getting started with Sketch.

    1
  16. 22

    VASILY HALL

    May 2, 2017 1:07 am

    For those interested in doing multiple data iterations per file inside Adobe Illustrator, please see John Garrett’s well-explained technique here at this YouTube video: https://youtu.be/083kc84aSIc

    0
  17. 23

    You basically lost me when you indicated that Photoshop was not good for web layouts and implied that it made the same mistake that it made with it’s photo-retouching lag.
    I understand if you have only been working in the web for 10 years or so how you would have that perspective, but it’s inaccurate. As was the title of the article.
    An article laying out pitfalls to avoid and functions to emulate for someone converting from Adobe to Sketch – that would be helpful – as the title suggested. Not more Sales pitching for a program that may offer a Lot of help and power for UI layouts and prototyping – but falls short if you work at a company that has OS or software restrictions, as well as works with others that do as well. seemingly why Axure, iRise, and Adobe still lead the space.

    I have avoided Sketch until recently due to it’s OS restrictions – and the number of people I work with and collaborate with tend to stay as agnostic as possible.

    It’s a powerful tool, Ill grant you that, but ever since Smashing started selling a “How To” book (which I bought) you can set your Watch as to how often you will see an ad disguised as an article promoting the great and powerful Sketch.

    As in all things, the tools we used to communicate our ideas are simply that. Tools. The open belittlement you have placed on the Adobe suite honestly makes sick.
    If your only using photoshop to process product images and illustrator for the occasional “artsy” project – you are missing the whole point of the applications.

    I think Sketch is great – and if you come from a vector based background, Im sure it’s pretty intuitive to switch. If you come from an object or pxl based background, it can prove frustrating. And if you use a PC, it can be impossible.

    Im glad you have found a tool you want to evangelize and a platform on which to orate from – but maybe show some respect to the applications that got you here in the first place.
    IOW – as you enjoy the view, remember upon who’s shoulders you stand.

    2

↑ Back to top