Element Tokens

Tokens supported in the element templates

Each element can export HTML, CSS and JavaScript.

You can modify the output a variety of ways. When you use the template fields you have the opportunity to access the names and values of the selected element and add those values on export.

These tokens are not supported in the Artboard. The artboard supports a few separate tokens.

Artboard Stylesheet Template Artboard Script Template Artboard Page Template

Tokens

Example Usage

{SELECTOR} {
    --selector: {SELECTOR};
    --selector2: {SELECTOR2};
    --pixel-width: {PIXEL_WIDTH};
    --pixel-height: {PIXEL_HEIGHT};
    --percent-width: {PERCENT_WIDTH};
    --percent-height: {PERCENT_HEIGHT};
    --width: {WIDTH};
    --height: {HEIGHT};
    --top: {TOP};
    --left: {LEFT};
    --right: {RIGHT};
    --bottom: {BOTTOM};
    --rotation: {ROTATION};
    --transform: {TRANSFORM};
    --fillColor: {FILL_COLOR};
    --stroke: {STROKE};
    --strokeColor: {STROKE_COLOR};
    --strokeWidth: {STROKE_WIDTH};
    --strokeStyle: {STROKE_STYLE};
}

Element Templates

• CSS Template

• HTML Template

• JavaScript Template