Effects

Every type in this group exports to a Figma effect style and can be applied to layers with Apply Tokens.

In the Export to Figma window they are owned by the Styles → Shadow, Blur (both blur kinds), Glass and Effects switches.

#Shadow

One shadow or an array of shadows. In the Figma style the first array element becomes the top layer.

References in color, offsetX, offsetY, blur and spread become variable bindings inside the style. A shadow can also be written as one CSS-like string: "0 2px 8px #0003".

{
  "$type": "shadow",
  "$value": [
    { "type": "dropShadow", "offsetX": 0, "offsetY": 1, "blur": 2, "spread": 0, "color": "#0000001F" },
    { "type": "dropShadow", "offsetX": 0, "offsetY": 8, "blur": 24, "spread": 0, "color": "{color.shadow.strong}" }
  ]
}

Use the offsetX and offsetY keys: the short x and y are understood only by Apply to a layer, and a style export reads them as zero.

#Backdrop Blur and Blur

Blur of the background behind a layer and blur of the layer itself. They accept a number, a string with a unit or an object.

{ "$type": "backdrop-blur", "$value": "12px" }

{ "$type": "blur", "$value": { "radius": 4 } }

The object supports progressive blur with the same keys as a layer in effects: "blurType": "progressive", startRadius, startOffset, endOffset, plus "visible": false. A reference in the radius becomes a variable binding. The blur editing form shows the radius, progressive blur and visibility; a plain value is still saved as a string.

#Glass

The glass effect. All keys are optional, each has a default.

{
  "$type": "glass",
  "$value": { "radius": 12, "depth": 8, "refraction": 0.2, "lightAngle": 135, "lightIntensity": 0.6 }
}

The Create Glass form has the Light Intensity, Light Angle, Refraction, Depth, Dispersion and Frost Radius fields. On Apply to a layer the glass is added or updated, and the layer's other effects are kept.

#Effects

An array of layers of different kinds in one style. The first array element becomes the top layer.

Progressive blur offsets are fractions from 0 to 1 in any of these forms: { "x": 0, "y": 1 }, [0, 1] or "0 1". Figma constants in upper case, such as DROP_SHADOW, are accepted too. An unknown layer kind stops the style export with an error.

Variables bind only to shadow fields and to the blur radius. References in noise, texture and glass layers, and the start radius of a progressive blur, are replaced with values on export, and the plugin warns about it in the export result naming the token, the layer and the field. Shader parameters are passed through as they are.

{
  "$type": "effects",
  "$value": [
    { "type": "backgroundBlur", "radius": 24, "blurType": "progressive", "startRadius": 0, "startOffset": { "x": 0, "y": 0 }, "endOffset": { "x": 0, "y": 1 } },
    { "type": "noise", "noiseType": "duotone", "color": "#000000", "secondaryColor": "#ffffff", "noiseSize": 2, "density": 0.4 },
    { "type": "texture", "noiseSize": 1, "radius": 2, "clipToShape": true }
  ]
}

{
  "$type": "effects",
  "$value": [
    { "type": "dropShadow", "offsetX": 0, "offsetY": 2, "blur": 8, "spread": 0, "color": "{color.shadow.soft}" },
    { "type": "backgroundBlur", "radius": 12 }
  ]
}

The Create Effects form builds the layers as a list: every layer has a type, blur layers have the Progressive blur checkbox with Start radius and offset fields, noise layers have Noise type, Color, Secondary color, Noise size, Density and Opacity, shader layers have Shader id and Properties.

On import from Figma effect styles come back as the same layers: a style made of shadows only becomes a shadow token, a style with mixed effect kinds becomes an effects token.

#Full example

{
  "shadow": {
    "$type": "shadow",
    "sm": { "$value": [{ "type": "dropShadow", "offsetX": 0, "offsetY": 1, "blur": 2, "color": "#0000001F" }] },
    "lg": { "$value": [{ "type": "dropShadow", "offsetX": 0, "offsetY": 8, "blur": 24, "spread": 0, "color": "#00000029" }] }
  },
  "blur": { "$type": "blur", "card": { "$value": "8px" } },
  "glass": { "$type": "glass", "panel": { "$value": { "radius": 12, "depth": 8, "refraction": 0.2 } } }
}

#Related pages

• Token types
• Token JSON format
• Color, Gradient, Image, Fill, Opacity