Skip to main content

There are two basic conventions for writing design tokens:



  • action.color.primary

  • action-color-primary


I would prefer to use the option with ‘.’ for consistency wth our design token naming convention but this character is not supported

Yeah I’m right with you. Atlassian’s design system appears to use that method as well but no idea how we follow-suit using Figma…


CleanShot 2023-08-02 at 14.27.50

I actually just changed my whole token naming structure to fit with the Figma constraint now. (Fortunately we are only defining our tokens right now 😅)


So for Figma compatibility I am using ‘-’ instead of ‘.’ and CamelCase instead of spaces.

This should work for both Figma and our developers 🤞


eg. action-color-primary = ecoGreen-100

But still would be nice to use “.” 🤞

I added this to “Share an idea” if you want to vote 😀 Local variables uses ‘.’ instead of ‘-’ in variable name

nice dude really cool

Reply


Terms & ConditionsCookie settings