Skip to content

Layer Tokens

Why?

Strongly associate a token with a physical attribute.

So far our tokens have been purely logical, with no strong association to a physical layer of the rendered result.

Yes, we have tokens called Semantics/Sentiment/Positive/Background, which offers a strong hint as to how it should be used, but name alone isn't enough.

We could also have tokens called Semantics/Sentiment/Positive/Strong, or Semantics/Sentiment/Positive/Stroke, and who knows where those should go.

The layer token is a meta-layer that adds no additional functionality. It exists solely to provide a stronger link between logical semantic tokens and their physical destination.

Layer Tokens
Name
Layer
Layer
Foreground
Default
Semantics/Foreground/Default
Sentiment
Semantics/Sentiment/Foreground
Layer
Background
Default
Semantics/Container/Default
Sentiment
Semantics/Sentiment/Background
Layer
Border
Default
Semantics/Stroke/Default
Sentiment
Semantics/Sentiment/Border

Note the reference to the Sentiment Tokens defined earlier; using this layer token pulls through all the power of being able to change sentiment and interaction state.

One additional usage for this layer within Figma is to add scoping, prevent usage of these tokens outside of their intended target.

This may otherwise seem a superfluous layer, but it's expressive power should become apparent as we look into container tokens.