Category: Sketch

Consistent Design Systems in Sketch With Atomic Design and the Auto-Layout Plugin

Do you design digital products (or websites) and hand design files off to developers for implementation? If you answered yes, settle in! While the should-designers-code debate rages on, we’re going to look at how adding a methodology to your design workflow can make you faster, more consistent, and loved by all d...

Designing A Realistic Chronograph Watch In Sketch

    If you’re into wristwatches, like me, and are also a fan of the Sketch app (or just want to get better at it), then this is the tutorial for you. In it, you will learn how to create a very realistic and detailed vector illustra...

My Ideal Sketch Setup For UI Design

    User interface (UI) design has changed dramatically in the last few years, as traditional computers have ceded dominance to smaller screens, including tablets, mobile phones, smartwatches and more. As the craft has evolved, so h...

How To Create A Sketch Plugin With Front-End Technologies

    UX design hasn’t been the same since Sketch arrived on the scene. The app has delivered a robust design platform with a refreshing, simple user interface. A good product on its own, it achieved critical success by being ext...

One Illustration, Three SVG outputs

Let’s say we draw the same vector graphic in different design applications and export each one as SVG for use on the web. Should we expect the same SVG file from each application? On the one hand, we might expect each file to be the same because of our past history with exporting images. Applications have typica...

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 interf...

React Sketch.app

The “normal” workflow I’m sure we’ve all lived is that design happens, then coding happens. A healthy workflow has back-and-forth between everyone involved in a project, including designers and developers, but still: The code is the final product. You design your way to code, you don’t cod...

Unleashing The Full Potential Of Symbols In Sketch

    No matter whether you are designing a whole design system or just a couple of screens, symbols in Sketch will help you keep your file organized and will save you a lot of time in the long run. In this article, I’ll share with ...

Sketch Now Replicates Inside & Outside Stroke Alignment

I was just bemoaning strokes the other week: And that’s the trouble with text-stroke in CSS: you have no choice. It’s center-aligned stroke only. Either of the other options [outside-aligned or inside-aligned], arguably, would have been more useful. There still is no solution for text-stroke, but SVG has t...

Papercons

Bobby Grace, on the Dropbox Paper team: On the engineering side, we use inline SVGs. These have many advantages. One advantage is that SVG is a well-structured format that we can manipulate with code. Paper is also using React and has a component for inserting icons. They: Use a single Sketch file, checked into the r...