Sketch: Our Go-To Design Program for UX

I was introduced to Sketch a few years ago by Austin Drummond, Reusser Design’s iOS Developer. He heard about Sketch and wanted me to give the program a try on a mobile app project we were going to be working on together. After a few hours, I was sold on this program—now I use Sketch for every Reusser Design project I work on.

 

1200x630

If you are a UX, UI, or a product designer working on a Mac, you should be using Sketch.

Here are a few features I use to help make my work flow and designs at Reusser Design more efficient.

 

Symbols

With Sketch, I am able to turn any element into a symbol. This makes updating headers, footers, and UI elements easy to update in one place. When you update any symbol, the change gets applied across every single page and art board—a huge time saver.

Symbols

Layout Settings

No matter what program you use, if you’re a designer, you should be using this feature on every design project if you’re a web developer. The layout setting gives you full control of your grid at any dimension. If you are used to designing from a set grid system, this is the perfect tool for you use all the time.

Layout Settings

 

Copy CSS

On any given element in your design file, you are able to copy your CSS into a separate file for the developer to reference. Gradients can be tricky for a developer to reference natively from a design file for many reason, but within a few clicks, the developer can have the exact gradient CSS to add to their file.

Copy CSS

 

Folders and Asset Names

I am able to name folders based on the position of the block element for any given website project. This helps the developer know exactly what is needed in each section of the website. The naming convention works well when turning vector graphics into SVG files and does not default to the parent element’s name once it has been exported. This feature works well when you have to animate the SVG and the developer can name each CSS function based on the ID tag of the area you want to animate.

Folders and asset names

 

Mirror

This mirror functionality benefits my workflow when I am creating mobile applications for tablet and mobile-sized project. I am able to copy the URL and be able to view my live design in a browser in a few clicks.

Mirror

 

Open Source Community Plugins

The active SketchApp community is what makes this program great to use. I have benefited from user-developed plugins that help improve my workflow greatly. There are too many to list but you can view them all at sketchapp.com/extensions/plugins.

Plugins

 

In the design world, as with most things in life, it’s important to find a program or system that works for you. For the reasons listed above (and many more), I choose to use Sketch as my go-to for all design projects. This isn’t to say other design programs aren’t worthwhile—it’s just a personal preference for me and the kind of work I do. If you’re interested in learning more about Sketch, feel free to reach out. Our team would be happy to talk you through some more of our favorite features.