Skip Navigation
Inside Sketch

Inside Sketch: An introduction to semantic design

Take a peek at what it’s like to design for Sketch — in Sketch

At Sketch, designers from different teams regularly catch up to share and discuss new ideas. In one of our sessions, former Sketch product designer André Gonçalves and I kicked off a conversation about prototyping and designing with meaning. Our discussion quickly turned into a fully formed concept that we now use to design new features at Sketch. We call it semantic design.

In this post, I’ll be talking about our initial approach to semantic design and how it’s influenced some of our new features.

What is semantic design?

Semantic design is an approach that focuses on adding a layer of meaning to the tools and features we use for crafting user interfaces. For us, it means building our design platform with a comprehensive understanding of what the designer needs.

For example, what if we gave meaning to what’s on the Canvas? What if Sketch could understand that a rectangle is actually a button or that the image in a group is actually a profile picture?

The goal of asking this question is to make Sketch easier to use by improving communication between the platform and the designer — in both directions. While it’s important that the tools are intuitive to use, we also wanted to start designing features that were better at anticipating the user’s needs.

Our discussion quickly turned into a fully formed concept that we now use to design new features at Sketch. We call it semantic design.

Semantic design influences

To help paint the picture, let’s talk about inspiration. We first got the idea for semantic design from the use of semantics in language and technology.

HTML and markdown, for example, are great at translating abstract concepts from code into titles, paragraphs, and inputs that browsers can then turn into documents or websites.

By applying semantics to code, screen readers can interpret what’s on a page and make it accessible for people with functional diversity.

Semantic design layers

While the payoff is worth it, understanding and applying semantic design can be complex. You have to work against preexisting logic and strike a balance between doing and overdoing.

For example, while we all know a red hexagon sign means we need to stop our car, accidents still happen. But would swapping the stop sign for a flashier visual cue be more effective — or would it lead to confusion?

There are also multiple layers to how we understand and inform meaning. When we bring semantics into design, the process itself turns into a system. Because I’m a product designer, I like to call this three-layered system the design stack.

Illustration made in Sketch of the three layers of semantic design stack

You can also think of the stack as the building blocks of semantic meaning.

To give you a better understanding before we move on, let’s break down each of these design stack layers, starting from the bottom.

You have to work against preexisting logic and strike a balance between doing and overdoing.

Data

Data is made up of every written or variable content that is part of the Artboard. This includes Images like avatars and headers, and text, such as titles, paragraphs and labels.

Visual

Visuals add context, rhythm and structure to your data. They are the most essential elements of the design stack. Visuals can be Components, shapes, colors, and icons — essentially all sorts of individual layers or complex groups of layers such as Symbols.

Prototyping

The prototyping layer connects visuals and Artboards to create a narrative through interactions. It does this by linking components, text and Artboards to communicate with the user.

Next, let’s take a look at some applications of semantic design.

Examples of semantic design in Sketch

Semantic design is still in its early days at Sketch, but there are already a few features making use of it. Let’s look at two examples.

Overlays

In semantic design, elements on an Artboard should be aware of their purpose. A good example of applied semantic design inside Sketch is the ability to turn Artboards into overlays.

Overlay: An umbrella term for any type of interaction or message that appears on top of the existing UI — such as pop-ups and modals.

When toggling from Screen to Overlay, Sketch shows you a new set of options to help you design more realistic prototypes. This dynamism is also great for handoff since developers can fully visualize and understand interactions before coding.

Screenshot of Sketch interface showing Overlay settings.

You can easily toggle between Screen and Overlay to customize different behaviors depending on the Artboard type you choose.

Color Tokens

Color Tokens translate your document’s Color Variables into JSON or CSS formats so you can use them directly in your codebase. By enabling communication between design and code, there’s already a layer of semantics involved.

Color Variables: Solid colors that synchronize across your document. When you make a change to a Color Variable, every layer that uses it will update to reflect your edit — including your Color Tokens.

We took it a step further by allowing you to give Color Tokens descriptive titles. For example, say you’re using the color black in your design. You can go from a #000000 hex or 0, 0, 0, 1 RGBA code to something like ‘foreground.primary.1’.

When you add this Color Token to your code, it’ll be clear to developers, browsers and screen readers that your page’s foreground is meant to be black. On the design side, it’s also easier to make changes once you’ve properly identified your colors.

Screenshot of Sketch web app showing Color Tokens.

With Color Tokens, you can use any descriptive text such as a color (Green) or a purpose (Brand) to communicate their meaning.

Semantic design rules

While bringing semantics into your designs can be a great asset, it’s easy to get carried away and start changing everything. So, before implementing any new semantic feature, make sure it:

  1. Doesn’t take away from the designer’s creative freedom
  2. Is backed by research that proves the new model aligns with how people already use the tool
  3. Truly belongs in your platform’s ecosystem because it adds tangible, measurable value.

Because semantic design often affects more than one feature, it’s trickier to disable or tweak the feature once it’s out. That’s why it’s important to remember that the ultimate goal of semantic design is to communicate better.

In our case, since we’re working with a design tool, our goal is to improve communication between:

  • Designer ↔ Designer
  • Designer ↔ Stakeholders and developers
  • Designer ↔ Tool

Remember that the ultimate goal of semantic design is to communicate better.

Semantic design beyond the UI

Adding semantic design functionalities to tools like Sketch can help designers create more realistic experiences and communicate better with other stakeholders.

But it doesn’t end there. One may argue that semantic design extends to other areas of our lives: on the road, at the airport, in the mall, and even at home.

Can you think of other tools or features that could benefit from a touch of semantic design magic? Let us know on Twitter or Instagram!

You may also like

Inside Sketch

Sketch and AI

We’ve been thinking a lot about what AI means for Sketch for some time now. Here’s how we might use it, how we will never use it, and what guides our thinking.

Try Sketch for free

Whether you’re new to Sketch, or back to see what’s new, we’ll have you set up and ready to do your best work in minutes.

Get started for free
Get started for free