Sketch was created specifically for designing screens for digital products whereas photoshop and illustrator are essentially photo editing and print graphics tools.
Sketch is a high performance vector design tool that understands the workflow and challenges the modern ui/ux designer and although is vector the art board comes with a pixel grid to make deigns precise while and the time makes export a breezy for different device resolutions. Speed, It’s expected for your documents to be big and have many screens with shared designs consistencies, shared styles, symbols and responsive group resizing are just a few of the features in sketch that will completely revolutionize your workflow
Shared styles in Sketch
Layer style in photoshop are a great way to save time when you plan on applying the same style a bunch of layers the problem is that layers do not become connected to the style or to one another in case the style changes in the future. Have a 100 layers with the same fill and drop shadow and then twick the style 3 times and in photoshop you are looking in applying the style 300 times. Yes, I’m crying too…
St much like a paragraph style for example shared styles in sketch save the style stick attributes of a layer and keep every layer connected to the style in case it changes. If you change one layer, the ones liked to it will automatically change too.
Prototyping Directly on Canvas
So you have your beautiful design is sketch and you are ready to throw together an initial prototype the past we would sink to envision from either sketch or photoshop, open our browser and head to build mode, using craft we can now prototype for desktop and mobile directly within sketch and sync the finished result to envision to tack share and collaborate, it’s just a matter of downloading and installing craft, selecting a layer, pressing the c key and clicking the artboard to link to. Then i’ts one click to the button “sync” to “inVision” and to create your fully interactive prototype.
On the surface symbols in sketch seem to work similarly to smart objects in photoshop, they do serve a nearly identical purpose, use multiple instances on the same graphic that sync with the master copy of that graphic. When designing digital products we end up with a lot of little graphics that get reused in tones of screens, making symbols or smart objects a must. Where sketch really pulls ahead is when you need to switch out one icon for another line normal icon state and an active icon state for example. In sketch, you can select in any instance a symbol and swap it for another in the inspector.
Smart objects in photoshop are a double edge sward. The good news is that every instance of the smart object is the same and the ban news is the same thing.
So what do we do when we have multiple instances of the same symbol that each need unic content? in Sketch every text layer, symbol and image within a symbol is considered a valuable that can be overwritten on the inspector, this means that we can design one button, use it as many times as we want and always be in control of the content of each individual instance.
Photoshop allows you to resize groups and smart objects but with one only physical mechanic, stretching all the contents together, this creates distorted layouts. In sketch de contents of a group or symbol can be assigned to behave more responsibly by preserving margins of fixing dimensions in place.