Ability to 'Hide from publishing' and Variable scoping for tokens

[esthercheran]

Issue: When creating or editing a token in the plugin, it is not possible to granularly scope the purpose of the tokens for Figma Variables. Users are also not able to specify which variables should be hidden from publishing.

Definition of done In the creation modal add a multi-select input where users can select available scopes for the following token types:

• color,
• number
• dimension

A color token will have the following scopes available:

• ALL_SCOPES
• ALL_FILLS
• FRAME_FILL
• SHAPE_FILL
• TEXT_FILL
• STROKE_COLOR

A number or dimension token will have the following scopes:

• ALL_SCOPES
• TEXT_CONTENT
• WIDTH_HEIGHT
• GAP

Automatically scope tokens that are of type borderRadius to the corner radius scope silently. Only if a user changes this scope would we set it to something differently (if a variableScope property is present)

Based on the selected scopes when the token is created as a variable, the created variable will have the selected scopes checked. The selected scopes will live in the metadata of the token. This will be a pro feature.

For all tokens that can be created as variables:

• color,
• number,
• dimension,
• sizing
• border radius
• border width
• spacing
• text add a checkbox that toggles the visibility of variables being published. On creating variable from the token this setting will be set on the variable

Design

Walkthrough

https://github.com/tokens-studio/figma-plugin/assets/66366384/f41251b6-766a-4d6d-8029-28b4d3942ce8

{
  extensions:
    studio.tokens: {
      variableScopes: [...]
      }
    }
  }

Original Issues: https://github.com/tokens-studio/figma-plugin/issues/2193 https://github.com/tokens-studio/figma-plugin/issues/2194

[mikejyoung]

It would really beneficial to us if you could also include code syntax in these settings.

We are building a code-gen plugin to to generate the base styles for a component in the format needed by our design system, such as:

const baseStyles = {
	
	backgroundColor: $neutral30,
	color: $neutral100,
    "_dark" : {
    	backgroundColor: $neutral40
    }
	"_primary" : {
		backgroundColor: $primary30,
		color: $primary100,
    	"_dark" : {
    		backgroundColor: $primary40
    	}
	}
}

Figma's code syntax does a nice job of converting the variables to our preferred format in the output, but it's a pain to have to need to go into the variables editor to set the code syntax. It would save a lot time if we could set it while creating tokens in Tokens Studio.

I prepared some designs for a proposed implementation that aligns with the other variable properties scoped in this issue:

Related issue: https://github.com/tokens-studio/figma-plugin/issues/2346

[LukeFinch]

This request has been moved to our new feedback tool. Go check out https://tokensstudio.featurebase.app/ to create a free account. You can upvote and comment on existing posts, make a new request, and subscribe to be notified when requests move into our roadmap.