Shadow

A drop or inner shadow, or a stack of them, as one token.

Partial: editing any field in the dialog converts literal wide-gamut colors to sRGB, and a layer reference to a token with several layers does not resolve.

Value format

One layer:

{
  "$type": "shadow",
  "$value": {
    "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.1 },
    "offsetX": { "value": 0, "unit": "px" },
    "offsetY": { "value": 1, "unit": "px" },
    "blur": { "value": 3, "unit": "px" },
    "spread": { "value": 0, "unit": "px" }
  }
}

Several layers are an array of these objects.

Field	Value	Required
color	A color value or reference	Yes
offsetX, offsetY	A dimension value or reference	Yes
blur, spread	A dimension value or reference	Yes
inset	true for an inner shadow	No

An array entry can also be a reference to a shadow token that holds one layer. A reference to a token with several layers does not resolve. List those layers in the array instead.

Point the color of every layer at one color token, and one edit retunes the whole elevation scale.

In Syntope Tokens

The dialog starts with one reference field. To enter values, select the link icon (Show shadow fields). Add layers with add layer. Each layer has color, x, y, blur, spread and the checkbox inner shadow. Every field needs a value, including spread. Enter 0px for no spread.

The token shows the value in CSS box-shadow order, with layers separated by commas.

color shows a literal color as hex. Editing any field saves those hex values for every layer, so a wide-gamut color is converted to sRGB. To keep its space, reference a color token in color or edit the shadow in the JSON editor.

Applying to layers

Apply token works on layers that support effects.

DTCG	Figma
inset: true	Inner shadow
inset absent or false	Drop shadow
offsetX, offsetY	Offset. rem is multiplied by 16
blur	Blur radius, never below 0
spread	Spread

Shadows are replaced, other effects stay

Applying removes all drop and inner shadows on the layer and writes the token’s layers. Layer blur and background blur stay. Use Figma’s undo to restore the old shadows if needed.

As in CSS, the first layer of the token is meant to be on top, so the plugin writes the layers to Figma in reverse order.

A non-zero spread works on rectangles and ellipses, and on frames, components and instances that clip content and have a visible fill. On any other layer the whole token is not applied. Set spread to 0, or turn on clip content and add a fill.

Figma variables

Variable sync leaves shadows out, because Figma has no composite variable type. Apply them to layers directly.