SXL Studio
Tokens

Styles

Styles group token types: Color, Gradient, Image, Fill, Opacity — examples, properties, modifiers, and Figma mapping.

Color

The most common token type. Describes a color in any CSS-compatible format.

Figma: exports as a Color Variable.

Accepted value formats:

FormatExample
HEX 6 chars#6366F1
HEX 8 chars (with alpha)#6366F180
HEX 3 chars#F00
RGBrgb(99, 102, 241)
RGBArgba(99, 102, 241, 0.5)
HSLhsl(239, 84%, 67%)
HSLAhsla(239, 84%, 67%, 0.5)

Example:

JSON
{
  "brand": {
    "$type": "color",
    "primary": {
      "$value": "#6366F1",
      "$description": "Primary brand color"
    },
    "primary-hover": {
      "$value": "#4F46E5"
    },
    "primary-light": {
      "$value": "{brand.primary}",
      "$extensions": {
        "figma.modify": {
          "type": "lighten",
          "value": 0.15,
          "space": "oklch"
        }
      }
    },
    "primary-alpha": {
      "$value": "{brand.primary}",
      "$extensions": {
        "figma.modify": {
          "type": "alpha",
          "value": 0.1
        }
      }
    }
  }
}

Applies to layers: Fills, Stroke, Effect Color.

Modifiers (via $extensions.figma.modify):

ModifierDescriptionExample
lightenLighten{ "type": "lighten", "value": 0.2, "space": "oklch" }
darkenDarken{ "type": "darken", "value": 0.15, "space": "hsl" }
alphaOpacity{ "type": "alpha", "value": 0.5 }
mixMix colors{ "type": "mix", "value": 0.3, "color": "#FFFFFF", "space": "srgb" }

Color spaces: srgb, hsl, lch, oklch, p3.

Tip: modifiers can be chained (as an array). Each applies to the previous result.

Color modifiers: lighten, darken, alpha, mix

Gradient

Describes a gradient fill. Supports CSS syntax and object notation.

Figma: exports as a Paint Style.

CSS string value:

JSON
{
  "gradient": {
    "brand": {
      "$value": "linear-gradient(135deg, #6366F1 0%, #EC4899 100%)",
      "$type": "gradient"
    }
  }
}

Object value:

JSON
{
  "gradient": {
    "sunset": {
      "$value": {
        "type": "linear",
        "angle": 135,
        "stops": [
          { "color": "#F59E0B", "position": 0 },
          { "color": "#EF4444", "position": 0.5 },
          { "color": "#8B5CF6", "position": 1 }
        ]
      },
      "$type": "gradient"
    }
  }
}

Applies to layers: Fills.

Figma limitation: Figma supports linear and radial gradients. Conic gradients (conic-gradient) will be converted to linear.

Gradient token examples

Image

An image token — a URL reference or embedded image data.

Figma: exports as a Paint Style (image fill).

JSON
{
  "images": {
    "hero-bg": {
      "$value": "https://cdn.example.com/hero-background.jpg",
      "$type": "img"
    }
  }
}

Applies to layers: Fills (image fill). The plugin downloads the image and applies it as an IMAGE fill.

Tip: use absolute CDN URLs for stability. Relative paths are not supported.

Fill

A universal fill type: can contain a color, gradient, image, or array of fill layers.

Figma: exports as a Paint Style.

Simple color:

JSON
{
  "fill": {
    "surface": {
      "$value": "#FFFFFF",
      "$type": "fill"
    }
  }
}

Multi-layer fill:

JSON
{
  "fill": {
    "card-bg": {
      "$value": [
        { "type": "solid", "color": "#FFFFFF", "opacity": 0.9 },
        { "type": "gradient", "gradient": "linear-gradient(180deg, #F0F0FF 0%, #FFFFFF 100%)" }
      ],
      "$type": "fill"
    }
  }
}

Difference from Color: color is a single color, exported as a Color Variable. fill is a multi-layer fill, exported as a Paint Style. Use fill when you need a composite background with multiple layers.

Opacity

A numeric transparency value.

Figma: exports as a Number Variable (FLOAT).

Accepted values:

FormatExampleResult
Number 0–10.550% opacity
Percentage"50%"50% opacity
Number 0–10050Normalized to 0.5
JSON
{
  "opacity": {
    "$type": "opacity",
    "disabled": { "$value": 0.4 },
    "hover": { "$value": 0.8 },
    "overlay": { "$value": "60%" }
  }
}

Applies to layers: Opacity (layer opacity).

Default scope: OPACITY.

Note: opacity does not use rem-base for percentages (unlike other numeric types). 50% always means 0.5.

Full example: styles file

JSON
{
  "color": {
    "$type": "color",
    "white": { "$value": "#FFFFFF" },
    "black": { "$value": "#000000" },
    "brand": { "$value": "#6366F1" },
    "brand-light": {
      "$value": "{color.brand}",
      "$extensions": {
        "figma.modify": { "type": "lighten", "value": 0.3, "space": "oklch" }
      }
    },
    "brand-alpha-10": {
      "$value": "{color.brand}",
      "$extensions": {
        "figma.modify": { "type": "alpha", "value": 0.1 }
      }
    }
  },
  "gradient": {
    "$type": "gradient",
    "brand": { "$value": "linear-gradient(135deg, #6366F1 0%, #EC4899 100%)" },
    "dark": { "$value": "linear-gradient(180deg, #1E1B4B 0%, #000000 100%)" }
  },
  "opacity": {
    "$type": "opacity",
    "disabled": { "$value": 0.4 },
    "hover": { "$value": 0.8 },
    "overlay": { "$value": 0.6 }
  }
}