Design + Sketch
Published in

Design + Sketch

Artboards and Symbols are not enough

States of the artboard — Sketch Plugin

Don’t get me wrong… When I started using Sketch I was fascinated by artboards and symbols, they made a lot of sense and went great with my design process and it still does. Everything is controllable, I can reuse elements, design for different screen sizes, or design the entire flow of an app and make prototypes out of it. While I felt that I didn’t need layer comps anymore, I had the feeling that something was missing, maybe I overrated artboards and symbols?

Wait a minute…

What do artboards and symbols have to do with layer comps at all? Are they conflicting with each other? It’s a totally different function, right? I couldn’t really understand why layer comps felt redundant in the first place. Well… It wasn’t very easy to control in Photoshop and not everyone loved it, yet it could be awesome to have it in Sketch as a core feature with a little bit of new UX approach.

I sometimes find it easier to create different states for visibility and position of the layers instead of creating new artboards.

Why?

It’s much closer to the real thing as it forces you to keep the layers panel clean and logical in only ONE place (not 7). Yes. limitation is a good thing sometimes — having a framework which forces you to make things right. and anyway, it’s not really limitation — it’s a tool, same as grid.

So I looked for it on Google, found some solutions and some worked, but they weren’t even close to the real thing, and I wasn’t the only one…

“Is there an equivalent to Layer Comps in Sketch?”

“Unfortunately there is nothing quite like Layer Comps for Sketch”

“I guess the only way is to use artboards…”

Create different states and switch between them easily. Just like layer comps for Sketch.

Install the plugin

Open it from the “Plugins” menu and this panel will appear.

Select artboard

You’ll see the initial state. It’s the one that can never be deleted. Create new State.

Change positions and toggle visibility of layers

Create new states and update changes, don’t just leave to another state before committing changes. Stay in control.

Yo where you going? No changes?

Here comes the fun part

Use the states as new artboards on a new page.

You can export them now.

Since symbols are artboards, you can create states for them too.

And yes — The states are saved on your file. Boom.

What’s next?

Download States

Please tell me if it works for you and how — feedback, ideas, and report bugs.

Created by Eden Vidal.

Github // Update — Didn’t update it recently.

--

--

--

A collection of articles, tips, tutorials, and stories on UI, UX and web design and prototyping with Sketch and beyond

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Eden Vidal

Eden Vidal

Designer & Maker @ relate.app / weareunder.design / edenvidal.com

More from Medium

Inclusive Design in a Mobile-First World: An Interview with Robin Christopherson

Robin Christopherson giving a talk at the beyond tellerrand conference in Berlin in 2017

The only design brief example you’ll ever need

Is there a case for uppercase?

Photograph of a large letter A next to a small letter A.

Experience Mapping between the design tool and transformation driver.