Local variables uses '.' instead of '-' in variable name

Ask the community
1

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

2 Likes
2

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

1 Like
3

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 :sweat_smile:)

So for Figma compatibility I am using ‘-’ instead of ‘.’ and CamelCase instead of spaces.
This should work for both Figma and our developers :crossed_fingers:

eg. action-color-primary = ecoGreen-100

4

But still would be nice to use “.” :crossed_fingers:

5

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