Tokens are at the heart of Prism Templates. They let you represent placeholder locations in which you will use various pieces of information from your Zeplin Style Guide.
Tokens live inside your *.prism templates and follow the format {{%TOKEN%}}.
| Token |
Description |
FOR collection |
Iterate over asset collections, for example FOR textStyle, FOR color, or FOR spacing |
END collection |
End iterating over asset collections, for example END textStyle, END color, or END spacing |
IF token |
Confirm a token is available, for example IF textStyle.alignment. Conditions can also be inverted if they are prefixed by !, for example IF !textStyle.alignment |
ENDIF |
Closes an IF block |
These tokens specifically work in the scope of a loop (e.g. FOR textStyle)
| Token |
Description |
isFirst |
Determine whether or not the current item is the first in a loop (e.g. {{% IF color.isFirst %}} |
isLast |
Determine whether or not the current item is the last in a loop (e.g. {{% IF textStyle.isLast %}} |
| Token |
Description |
color.r |
The red component of the color (0-255) |
color.g |
The green component of the color (0-255) |
color.b |
The blue component of the color (0-255) |
color.a |
The alpha component of the color (0.0-1.0) |
color.rgb |
The RGB value of this color (for example #E22716) |
color.argb |
The ARGB value of this color (for example #FFE22716) |
color.identity |
The identity/name of the color as defined on Zeplin |
color.identity.camelcase |
The identity/name of the color, formatted in camel case (e.g. fancyLightBlue) |
color.identity.snakecase |
The identity/name of the color, formatted in snake case (e.g. fancy_light_blue) |
color.identity.kebabcase |
The identity/name of the color, formatted in snake case (e.g. fancy-light-blue) |
color.identity.pascalcase |
The identity/name of the color, formatted in pascal case (e.g. FancyLightBlue) |
| Token |
Description |
textStyle.fontName |
The full Postscript font name of a TextStyle |
textStyle.font |
Alias of textStyle.fontName |
textStyle.fontSize |
The text style's font size |
textStyle.alignment |
The text style's alignment, if exists. Can be left, right, center or justify |
textStyle.lineHeight |
The text style's line height, if exists |
textStyle.lineSpacing |
The text style's line height (if exists) minus its font size |
textStyle.letterSpacing |
The text style's letter spacing, if exists |
textStyle.identity |
The identity/name of the text style as defined on Zeplin |
textStyle.identity.camelcase |
The identity/name of the text style, formatted in camel case (e.g. myTextStyle) |
textStyle.identity.snakecase |
The identity/name of the text style, formatted in snake case (e.g. my_text_style) |
textStyle.identity.kebabcase |
The identity/name of the text style, formatted in snake case (e.g. my-text-style) |
textStyle.identity.pascalcase |
The identity/name of the text style, formatted in camel case (e.g. MyTextStyle) |
textStyle.color.* |
All color tokens from the section above can be used for a TextStyle's color |
| Token |
Description |
spacing.value |
The value of the current spacing token |
spacing.identity |
The identity/name of the spacing token, as defined on Zeplin |
spacing.identity.camelcase |
The identity/name of the spacing token, formatted in camel case |
spacing.identity.snakecase |
The identity/name of the spacing token, formatted in snake case |
spacing.identity.kebabcase |
The identity/name of the spacing token, formatted in kebab case |
spacing.identity.pascalcase |
The identity/name of the spacing token, formatted in pascal case |
