Sketch3 has pretty much established itself as the greatest app for designing web interfaces since…ever. It offers tools that support a solid design workflow and has tailored itself to the needs of web and app creators since day one. But you and Photoshop have been together for a long time, and, more importantly, your clients still deliver or expect PSDs when you’re in the design phase of a project.
I’ve known for awhile that I wanted to make Sketch3 part of my toolkit, but also that I will have to deliver PSDs for the foreseeable future. Creating a Sketch file concurrently with a PSD makes me hunch my shoulders in despair – I hate duplicating work (who doesn’t?). And I don’t really have a lot of time to spend on training myself on yet another product (who does?). Yet here are a few ways I’ve found that Sketch makes my life easier while also saving me time when I’m working with Photoshop.
START WITH PLUGINS
When I first tried Sketch I was dubious about using another vector program when I already had Illustrator available. Thanks to the work of designers before me, I quickly learned that the power of Sketch lies in its extensibility, and through the magic of plugins I created my own Sketch3 app that works the way I need it to – and is much more than a vector drawing app.
The master list of Sketch3 plugins available on GitHub.
The thing I like best about Sketch is that it doesn’t get in my way when I want to…sketch. Part of why I have clung to Photoshop for so long instead of moving to Illustrator or using another vector program for my interface sketches is that I have a lot of muscle memory invested in that old clunky PS interface and when I want to jot an idea down quickly, I do it in a random PSD file. It’s a bad habit, but it’s still a habit, and I wanted Sketch to replace it.
Now when I have an idea, I can draw shapes that pre-fill with random images. I can create a style guide artboard for typography and color palettes. I can export my color palettes and typography styles as Sass variables that plug right into my theme stylesheets. I can import text data from an existing WordPress-based site using JSON (so handy for redesigns!). I can group symbols so that editing one button modifies all of them, and I can create buttons that dynamically resize based on the amount of text they contain.
This has the power of turning my quick sketches into living designs that I can use as the foundation for a web or app interface project.
CREATE IN SKETCH, ASSEMBLE IN PHOTOSHOP
Sketch can export layers to EPS or SVG format, and Photoshop can link to EPS files as Smart Objects, so when I’m sketching, I try to think in terms of creating objects in Sketch that I can link to as Smart Objects in Photoshop.
If I’m drawing shapes and icons, I export SVG versions for immediate use in a theme, and export EPS versions for immediate use in a PSD.
My Sketch files look pretty close to the final Photoshop version, and the only work I duplicate is copy/pasting text from Sketch into editable Photoshop layers, using my Sketch style guide to quickly set up text styles in PS. I create icons, buttons, and gradients in Sketch and export them for final layout and alignment in Photoshop.
CHANGE YOUR THINKING
Instead of opening up Sketch with the goal of creating a final deliverable design, I use Sketch as my style guide creator with an eye toward quickly developing layouts, color palettes, typography styles and symbols that can be used to create a beautiful Photoshop file quickly, with the amazing benefit of having color and typography data immediately available for use in my theme stylesheet. Sketch becomes the glue between my PSD deliverable and the final product, and I’m saving time instead of spending hours in Photoshop creating bitmap data that I have to recreate in a stylesheet later.
If you want to use Sketch (or are already using Sketch!) but are required to deliver designs in PSD format, I hope this glimpse into my workflow helps you tailor Sketch with plugins to be the design tool you’ve always wanted.