Tokens Studio for Figma

https://docs.tokens.studio/
Admin
Tokens Studio for Figma is a plugin that enables designers to integrate design tokens into Figma,...
Tokens:55,615
Snippets:999
Trust Score:8.9
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies and Start Watch Mode

Source: https://docs.tokens.studio/open-source/contribute

Run these commands to install project dependencies and start the webpack build process in watch mode for development.

```bash
npm ci
npm run start
```

--------------------------------

### Install lz-string for Data Decompression

Source: https://docs.tokens.studio/open-source/shared-data

Install the lz-string library using npm. This is required for decompressing chunked or compressed token data.

```bash
npm install lz-string
```

--------------------------------

### Install Style Dictionary and SD Transforms

Source: https://docs.tokens.studio/transform-tokens/style-dictionary

Install Style Dictionary and the @tokens-studio/sd-transforms package using NPM. This is the first step before transforming design tokens.

```bash
npm install style-dictionary @tokens-studio/sd-transforms
```

--------------------------------

### Token Name Transformation Example

Source: https://docs.tokens.studio/manage-tokens/token-names/technical-specs

Demonstrates how an original token name might be transformed by engineers, for example, to camelCase.

```plaintext
Original: my-awesome-token
Transformed: myAwesomeToken
```

--------------------------------

### Example of a Token value using Math

Source: https://docs.tokens.studio/manage-tokens/token-values

Token values can include math equations to calculate dynamic values. This example shows how to combine token references to determine a border radius.

```plaintext
{button.border-radis} + {focus.offset}
```

--------------------------------

### Grouped Token Names Example

Source: https://docs.tokens.studio/manage-tokens/token-names/groups

These are examples of Color Tokens using periods (.) to create groups, replacing the dash (-) used in flat names.

```text
colors.green.100
colors.green.200
colors.green.300
```

--------------------------------

### Flat Token Names Example

Source: https://docs.tokens.studio/manage-tokens/token-names/groups

These are examples of Color Tokens without any grouping, also known as flat names.

```text
colors-green-100
colors-green-200
colors-green-300
```

--------------------------------

### Base URL Example for Enterprise GitHub

Source: https://docs.tokens.studio/token-storage/remote/sync-git-github

Enter this format for the Base URL if your organization runs an enterprise GitHub server, allowing the plugin to point to the correct API.

```plaintext
github.hyma.com
```

--------------------------------

### Flat Token Name

Source: https://docs.tokens.studio/fundamentals/design-tokens/anatomy-name

This example demonstrates a flat design token name, which is a simpler structure compared to grouped names.

```plaintext
button-success-hover-label-color
```

--------------------------------

### Border Width Token Syntax Example

Source: https://docs.tokens.studio/manage-tokens/token-types/dimension/border-width

Demonstrates the correct syntax for defining Border Width tokens, emphasizing the avoidance of spaces between numbers and units, and using lowercase units.

```plaintext
1px
```

--------------------------------

### Example of a Color Token Reference

Source: https://docs.tokens.studio/manage-tokens/token-values/references

This shows how a color token's value can be set to reference another token, like a theme color. The resolved value is displayed below the input.

```plaintext
{theme-color.info.default}
```

--------------------------------

### Dimension Token Examples

Source: https://docs.tokens.studio/manage-tokens/token-types/dimension

Examples of valid Dimension Token values, including pixels and rem units. Ensure no spaces between the number and unit, and use lowercase units.

```plaintext
16px
```

```plaintext
1rem
```

--------------------------------

### Sizing Token Value Example (rem)

Source: https://docs.tokens.studio/manage-tokens/token-types/dimension/sizing

Define Sizing Tokens in `rem` units for responsive design. The plugin automatically converts the value to pixels when applied in Figma.

```css
1rem
```

--------------------------------

### Example of Numeric Scale Token Names

Source: https://docs.tokens.studio/manage-tokens/token-names/technical-specs

Illustrates how numeric scales can lead to naming collisions when flattened. Avoid this by using descriptive string names for fractional values.

```json
spacing.1
spacing.1-5
spacing.2
...
spacing.15
```

```json
spacing1
spacing15
spacing2
...
spacing15
```

```json
spacing1
spacing1half
spacing2
...
spacing15
```

--------------------------------

### Example of a raw referenced Token value

Source: https://docs.tokens.studio/manage-tokens/token-values

The raw value is the exact string as written in the token definition. This example shows a raw value that references another token.

```plaintext
{green-500}
```

--------------------------------

### Flattened Token Names Examples

Source: https://docs.tokens.studio/manage-tokens/token-names/technical-specs

Shows how different original token names, including those with periods or dashes for scales, can be flattened to a single name during transformation.

```plaintext
Original Name| Flattened Name  
---|---
spacing.1.5| spacing15  
spacing.1-5| spacing15  
spacing.15| spacing15  
```

--------------------------------

### Supernova Mapping Configuration Example

Source: https://docs.tokens.studio/token-storage/remote/sync-cloud-supernova

This JSON structure defines how Tokens Studio data is mapped to Supernova. Ensure this configuration is copied precisely from Supernova documentation, including brackets, to correctly sync token sets and brands.

```json
[
    {
        "tokenSets": ["global", "light"],
        "supernovaBrand": "Default"
    }
]
```

--------------------------------

### Example of Token Anatomy Matching Names

Source: https://docs.tokens.studio/manage-tokens/token-names/technical-specs

Demonstrates how token names should not match reserved anatomy properties like 'name', 'type', 'value', or 'description' to prevent conflicts.

```json
"$description" denotes the property of token description
"$type" denotes the type of token
```

--------------------------------

### Token Name with Groups

Source: https://docs.tokens.studio/fundamentals/design-tokens/anatomy-name

This example shows a design token name structured with groups, indicating a hierarchical organization of design decisions.

```plaintext
button.success.hover.label.color
```

--------------------------------

### Invalid Dimension Token Examples

Source: https://docs.tokens.studio/manage-tokens/token-types/dimension

Examples of invalid Dimension Token values to avoid. Spaces between numbers and units, and unitless numbers are not permitted.

```plaintext
16 px
```

```plaintext
1 rem
```

```plaintext
16
```

--------------------------------

### Example of Nested Reference (Deprecated)

Source: https://docs.tokens.studio/manage-tokens/token-values/references

This syntax for nested references is deprecated and will be phased out. Avoid using dynamic keys within token references.

```plaintext
{colors.{primary}.500}
```

--------------------------------

### Example of a hard-coded Color Token value

Source: https://docs.tokens.studio/manage-tokens/token-values

A hard-coded value is an exact value that does not require interpretation by a tool. This example shows a hex code for a color.

```plaintext
#22c55e
```

--------------------------------

### Example of Token Value Referencing Another Token

Source: https://docs.tokens.studio/manage-tokens/token-names/technical-specs

Shows how curly brackets are used to reference token values. Avoid using curly brackets within token names themselves as it breaks code processing.

```json
"$value": "{green-500}"
```

--------------------------------

### Independent Line Height Token

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/line-height

This example shows a Line Height property Token named `line-height-classic` with its value defined in percentage. The `type` is set to `lineHeights` (plural) when the token is an independent property.

```json
{
  "line-height-classic": {
    "value": "100%",
    "type": "lineHeights"
  }
}
```

--------------------------------

### Get Shared Plugin Data Keys from a Node

Source: https://docs.tokens.studio/open-source/shared-data

Retrieve all available shared plugin data keys associated with the 'tokens' namespace on a specific Figma node.

```javascript
node.getSharedPluginDataKeys("tokens")
```

--------------------------------

### Define a Text Token with Nested Reference

Source: https://docs.tokens.studio/manage-tokens/token-types/text

This example shows how to define a Text Token that includes a reference to another token. The resolved value will incorporate the referenced token's content.

```json
👋 Welcome back, {customer-id}!
```

--------------------------------

### Typography Composite Token JSON

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/font-family

This example demonstrates a Typography composite token where 'font-family-sans' is referenced as the value for the 'fontFamily' property. The 'type' is 'typography' for composite tokens.

```json
{
  "paragraph-3": {
    "value": {
      "fontFamily": "{font-family-sans}",
      "fontWeight": "{font-weight-default}",
      "lineHeight": "{line-height-classic}",
      "fontSize": "{font-size-small}",
      "letterSpacing": "{letter-spacing-tight}",
      "paragraphSpacing": "{paragraphSpacing.none}"
      "paragraphIndent": "{paragraphIndent.none}"
      "textCase": "{textCase.none}",
      "textDecoration": "{textDecoration.none}"
    },
    "type": "typography"
  }
}
```

--------------------------------

### Add Units to Calculated Values

Source: https://docs.tokens.studio/manage-tokens/token-values/math

When dealing with units, it's recommended to use 'Other' or 'Number' token types for calculations and add units later. This example shows adding 'rem' to a calculated sizing value.

```css
{scale-rem-md}rem
```

--------------------------------

### Independent Font Weight Token

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/font-weight

This example shows an independent Font Weight property token named `font-weight-default` with its value as a text string. The `type` is specified as `fontWeights` (plural).

```json
{
  "font-weight-default": {
   "value": "Bold",
   "type": "fontWeights"
 }
}
```

--------------------------------

### Font Family Property Token JSON

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/font-family

This example shows a Font Family property token named 'font-family-sans' with a value of 'Satoshi Variable'. The 'type' is 'fontFamilies' (plural) for independent property tokens.

```json
{
  "font-family-sans": {
      "value": "Satoshi Variable",
      "type": "fontFamilies"
    }
  }
```

--------------------------------

### Font Weight in Typography Composite Token

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/font-weight

This example demonstrates a Typography Composite Token where the Font Weight property is referenced as a value. The `type` for the composite token is `typography`, and the font weight property within it uses a singular `fontWeight` reference.

```json
{
  "paragraph-3": {
 "value": {
   "fontFamily": "{font-family-sans}",
   "fontWeight": "{font-weight-default}",
   "lineHeight": "{line-height-classic}",
   "fontSize": "{font-size-small}",
   "letterSpacing": "{letter-spacing-tight}",
   "paragraphSpacing": "{paragraphSpacing.none}"
   "paragraphIndent": "{paragraphIndent.none}"
   "textCase": "{textCase.none}",
   "textDecoration": "{textDecoration.none}"
 },
 "type": "typography"
  }
}
```

--------------------------------

### Example of a Border Radius Token referencing another Token

Source: https://docs.tokens.studio/manage-tokens/token-types/dimension/border-radius

You can reference other tokens as values for Border Radius tokens, provided the token sets are active and the token types are compatible (e.g., 'borderRadius', 'number', or 'dimension').

```css
{radius.sm} {radius.md}
```

--------------------------------

### Example of a referenced Token value

Source: https://docs.tokens.studio/manage-tokens/token-values

A referenced value, also known as an alias token, includes the name of another token wrapped in curly brackets. This allows for dynamic updates and easier management of design decisions.

```plaintext
{colors.green.dark.1200}
```

--------------------------------

### Typography Composite Token with Font Size

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/font-size

Use `"type": "typography"` for composite tokens. The Font Size Token is referenced within the `"value"` object using its singular type, `"fontSize"`. This example includes multiple typography properties.

```json
{
   "paragraph-3": {
      "value": {
         "fontFamily": "{font-family-sans}",
         "fontWeight": "{font-weight-default}",
         "lineHeight": "{line-height-classic}",
         "fontSize": "{font-size-small}",
         "letterSpacing": "{letter-spacing-tight}",
         "paragraphSpacing": "{paragraphSpacing.none}"
         "paragraphIndent": "{paragraphIndent.none}"
         "textCase": "{textCase.none}",
         "textDecoration": "{textDecoration.none}"
      },
      "type": "typography"
   }
}
```

--------------------------------

### Independent Font Size Property Token

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/font-size

Use `"type": "fontSizes"` when defining a Font Size Token as an independent property. This example shows a small font size token with a pixel value.

```json
{
   "font-size-small": {
      "value": "20px",
      "type": "fontSizes"
   }
}
```

--------------------------------

### Build Project Once

Source: https://docs.tokens.studio/open-source/contribute

Use this command to perform a single build of the project.

```bash
npm run build
```

--------------------------------

### Create RGBA Token with Referenced Color and Number Token

Source: https://docs.tokens.studio/manage-tokens/token-types/color

Reference a Color Token and a unitless Number Token for opacity. Ensure the Number Token is unitless to avoid potential export issues.

```plaintext
rgba({colors.grey.900}, {brand.opacity.border.default})
```

--------------------------------

### Create a Basic Linear Gradient

Source: https://docs.tokens.studio/manage-tokens/token-types/color/gradient

Define a linear gradient with two color stops at a 45-degree angle. Use this for diagonal color transitions.

```css
linear-gradient(45deg, #87CEEB 0%, #008000 100%)
```

--------------------------------

### Pixel Unit for Static Elements

Source: https://docs.tokens.studio/manage-tokens/token-types/dimension/border-width

Illustrates defining Border Width tokens in pixel units for design elements that should maintain a static size regardless of user preferences.

```plaintext
4px
```

--------------------------------

### File Path for Token Storage

Source: https://docs.tokens.studio/token-storage/remote/sync-git-azure-devops

Use this setting to sync Token data into a single JSON file. Enter the pathway of the JSON file where you want your Token sets to be stored, including the .json extension.

```text
tokens.json
```

--------------------------------

### Folder Path for Token Storage

Source: https://docs.tokens.studio/token-storage/remote/sync-git-azure-devops

Use this setting to sync Token data into a folder containing multiple JSON files or subfolders. Enter the pathway of the folder where you want the Token data to be stored.

```text
tokens
```

--------------------------------

### Referencing Another Token as Value

Source: https://docs.tokens.studio/fundamentals/design-tokens/anatomy-value

Shows how a token's value can reference another existing token. This allows for inheritance and easier system management.

```json
{
  "value": "{brand.colors.success.on-success}"
}
```

--------------------------------

### Rem Unit Conversion for Responsive Design

Source: https://docs.tokens.studio/manage-tokens/token-types/dimension/border-width

Shows how to define Border Width tokens using 'rem' units for responsive design. The plugin automatically converts these to pixel equivalents when applied in Figma.

```plaintext
0.25rem
```

--------------------------------

### Reference Color Tokens in Gradients

Source: https://docs.tokens.studio/manage-tokens/token-types/color/gradient

Create gradients by referencing existing Color Tokens. This allows for easier management and consistency across your design system.

```css
linear-gradient(180deg, {colors.gray.50} 0%, {colors.gray.900} 100%)
```

--------------------------------

### Transforming Sizing Tokens to Dimension Tokens

Source: https://docs.tokens.studio/manage-tokens/token-types/dimension/sizing

The SD-Transforms package preprocessor converts the Tokens Studio `sizing` Token Type to the DTCG `dimension` Token Type. Token values entered as a number without a unit will be converted to pixels.

```javascript
// Example of transformation configuration (conceptual)
// This is not actual code from the page, but illustrates the concept.
// Refer to sd-transforms documentation for actual implementation.
{
  "transforms": {
    "ts/size/px": {
      "name": "ts/size/px",
      "transitive": true,
      "import": "@tokens-studio/sd-transforms/dist/transforms/size/px.js",
      "type": "value"
    }
  }
}
```

--------------------------------

### Token Value with Mathematical Operation

Source: https://docs.tokens.studio/fundamentals/design-tokens/anatomy-value

Illustrates using a mathematical equation as a token's value. This is useful for dynamic scales, such as typography based on viewport size.

```json
{
  "value": "(16px * 1.5)"
}
```

--------------------------------

### Create Percentage Line Height from Unitless Number

Source: https://docs.tokens.studio/manage-tokens/token-values/math

Use this equation in a Typography Composite Token to convert a unitless Number Token to a percentage-based line height, suitable for Figma.

```TokensScript
{lineHeights-unitless.heading.relaxed} * 100%
```

--------------------------------

### Ensure Minimum JSON Structure

Source: https://docs.tokens.studio/token-storage/troubleshooting-common-sync-provider-errors

A token file must contain at least an empty JSON object to be considered valid.

```json
{}
```

--------------------------------

### Create RGBA Token with Referenced Color

Source: https://docs.tokens.studio/manage-tokens/token-types/color

Reference an existing Color Token within an RGBA value to create a version with reduced opacity. Ensure the referenced token is a Color Token.

```plaintext
rgba({colors.grey.900}, 0.06)
```

--------------------------------

### Define Black Color Token with Reduced Opacity (ARGB)

Source: https://docs.tokens.studio/manage-tokens/token-types/color

Use ARGB (Hex 8) to define a color token with reduced opacity. The first two hexadecimal digits represent the alpha channel, followed by the RGB color channels.

```hex
#40000000
```

--------------------------------

### Base URL for Gitlab Enterprise Server

Source: https://docs.tokens.studio/token-storage/remote/sync-git-gitlab

If your organization uses a Gitlab enterprise server, provide the Base URL. This is the domain name found between 'gitlab' and '.com' in your repository URL.

```text
gitlab.hyma.com
```

--------------------------------

### Multiply Token Value by a Factor

Source: https://docs.tokens.studio/manage-tokens/token-values/math

Use this to create scales where one token is a multiple of another. Ensure spaces around operators for complex formulas.

```css
{spacing.md} * 2
```

--------------------------------

### Simple Math Equation with Brackets

Source: https://docs.tokens.studio/manage-tokens/token-values/math

Simple math equations can use brackets for clarity or order of operations. Both formats resolve to the same value.

```css
8 * 8
```

```css
(8 * 8)
```

--------------------------------

### Hard-coded Gradient with Reduced Opacity

Source: https://docs.tokens.studio/manage-tokens/token-types/color/gradient

Create a gradient with hard-coded RGBA color values, including reduced opacity, without referencing other tokens.

```css
linear-gradient(270deg, rgba(175, 238, 238, 0.4) 0%, rgba(0, 128, 0, 1) 100%)
```

--------------------------------

### Export Token JSON from Figma Console

Source: https://docs.tokens.studio/troubleshoot/reset-tokens-console

Use this command in the Figma developer console to retrieve the current Token JSON data. This is the first step before editing or resetting.

```javascript
figma.root.getSharedPluginData("tokens", "values")
```

--------------------------------

### Define Font Size in Pixels

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/font-size

Use pixel units (px) to define a static font size that remains constant regardless of user preferences or browser settings.

```css
20px
```

--------------------------------

### Spacing Token with Multiple Values (Two)

Source: https://docs.tokens.studio/manage-tokens/token-types/dimension/spacing

Two values are applied as top/bottom padding and left/right padding respectively.

```css
8px 64px
```

--------------------------------

### Multiply Token Value by Another Token

Source: https://docs.tokens.studio/manage-tokens/token-values/math

Reference another token to dynamically set a multiplier for calculations. Ensure spaces around operators for complex formulas.

```css
{spacing.md} * {spacing.multipler}
```

--------------------------------

### Spacing Token with Multiple Values (Four)

Source: https://docs.tokens.studio/manage-tokens/token-types/dimension/spacing

Four values are applied as top, right, bottom, and left padding respectively.

```css
2px 4px 8px 16px
```

--------------------------------

### Define Font Family Fallbacks

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/font-fallback

Use a comma-separated list of font names in order of preference to define fallbacks for a Font Family token. Figma uses the first font in the list.

```json
{
  "sans-serif": {
    "$value": "Arial, Helvetica",
    "$type": "fontFamilies"
  }
}
```

--------------------------------

### Spacing Token with Multiple Values (Three)

Source: https://docs.tokens.studio/manage-tokens/token-types/dimension/spacing

Three values are applied as top padding, left/right padding, and bottom padding.

```css
16px 8px 32px
```

--------------------------------

### Define a Hard-coded Text Token

Source: https://docs.tokens.studio/manage-tokens/token-types/text

Use this format to define a Text Token with a direct string value. This is useful for static copy that does not change.

```json
"Hello world"
```

--------------------------------

### Define Black Color Token with Reduced Opacity (RGBA)

Source: https://docs.tokens.studio/manage-tokens/token-types/color

Use RGBA to define a color token with reduced opacity. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque).

```css
rgba(0,0,0,0.25)
```

--------------------------------

### Hard Reset Token JSON in Figma Console

Source: https://docs.tokens.studio/troubleshoot/reset-tokens-console

Execute this command in the Figma developer console to perform a hard reset, which removes all Token Studio plugin data from the current Figma file. Always back up your JSON before performing a hard reset.

```javascript
figma.root.setSharedPluginData("tokens", "values", "")
```

--------------------------------

### JSON Representation of Grouped Tokens

Source: https://docs.tokens.studio/manage-tokens/token-names/groups

This JSON structure shows how grouped token names are organized hierarchically in a file.

```json
{
  "colors": {
    "green": {
      "100": {
        "value": "#0f1512",
        "type": "color"
      },
      "200": {
        "value": "#121b17",
        "type": "color"
      },
      "300": {
        "value": "#132d21",
        "type": "color"
      }
    }
  }
}
```

--------------------------------

### Apply a Token to a Layer

Source: https://docs.tokens.studio/open-source/shared-data

Store a token value on a Figma layer under the 'tokens' namespace with a specified key. Ensure the key is valid within the plugin's data structure.

```javascript
node.setSharedPluginData("tokens", key, value)
```

--------------------------------

### Retrieve Chunked Themes Data

Source: https://docs.tokens.studio/open-source/shared-data

This code retrieves theme data from shared plugin data, supporting both single entries and chunked data. It reconstructs and decompresses data if it was split into chunks.

```javascript
// For themes
let compressedThemes = '';

const metaRaw = figma.root.getSharedPluginData("tokens", "themes_meta");

try {
  const meta = JSON.parse(metaRaw || '{}');

  if (meta.type === 'chunked' && typeof meta.count === 'number') {
    const chunks = [];

    for (let i = 0; i < meta.count; i++) {
      const chunk = figma.root.getSharedPluginData("tokens", `themes_chunk_${i}`);
      chunks.push(chunk);
    }

    compressedThemes = chunks.join('');
  } else {
    // Default fallback if type is 'single' or meta is missing
    compressedThemes = figma.root.getSharedPluginData("tokens", "themes");
  }
} catch (e) {
  console.warn('Failed to parse themes_meta:', e);
  compressedThemes = figma.root.getSharedPluginData("tokens", "themes");
}
```

--------------------------------

### Define Paragraph Spacing in Pixels

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/paragraph-spacing

Use pixel units for paragraph spacing when the space between paragraphs should remain static, regardless of user font size preferences.

```css
16px
```

--------------------------------

### Spacing Token with AUTO Value

Source: https://docs.tokens.studio/manage-tokens/token-types/dimension/spacing

Use the all-caps string 'AUTO' to support Figma's Auto Layout 'space-between' functionality. Lowercase or titlecase values will not work.

```css
AUTO
```

--------------------------------

### Decompress and Parse Token Data

Source: https://docs.tokens.studio/open-source/shared-data

Use lz-string to decompress token values or themes, then parse the resulting JSON string. This code must be run in a local development environment, not the Figma plugin Dev Console.

```javascript
import { decompressFromUTF16 } from "lz-string";

const jsonString = decompressFromUTF16(compressedValues); // or compressedThemes
const tokens = JSON.parse(jsonString);
console.log(tokens);
```

--------------------------------

### Null Text Case Token Value

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/text-case

Use `null` to ensure text appears exactly as typed, with no capitalization transformation applied by the token.

```css
null
```

--------------------------------

### Typography Composite Token with Paragraph Indent

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/paragraph-indent

Illustrates a Typography Composite Token where the Paragraph Indent property Token is referenced by name. The `type` is `typography` and the `paragraphIndent` value is a reference to another token.

```json
{
 "paragraph-3": {
  "value": {
   "fontFamily": "{font-family-sans}",
   "fontWeight": "{font-weight-default}",
   "lineHeight": "{line-height-classic}",
   "fontSize": "{font-size-small}",
   "letterSpacing": "{letter-spacing-tight}",
   "paragraphSpacing": "{paragraphSpacing-none}"
   "paragraphIndent": "{paragraphIndent.none}"
   "textCase": "{textCase.none}",
   "textDecoration": "{textDecoration.none}"
  },
  "type": "typography"
 }
}
```

--------------------------------

### Gradient with Reduced Opacity using RGBA

Source: https://docs.tokens.studio/manage-tokens/token-types/color/gradient

Define gradient colors with reduced opacity using RGBA values. The alpha value is a unitless number between 0 and 1.

```css
linear-gradient(270deg, rgba({colors.gray.50}, 0.4) 0%, rgba({colors.gray.900}, 1) 100%)
```

--------------------------------

### Reference Font Family Fallbacks in Typography Token

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/font-fallback

Reference a Font Family token that includes fallbacks within a Typography Composite Token. This allows the composite token to inherit the fallback behavior.

```json
{
  "body-text": {
    "value": {
      "fontFamily": "{sans-serif}",
      "fontSize": "16px",
      "fontWeight": "400"
    },
    "type": "typography"
  }
}
```

--------------------------------

### Line Height Token Value: Responsive (rem)

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/line-height

Use rem values for responsive line heights. This ensures the line height maintains its proportion to a base font size (1rem) across different user zoom levels.

```css
2rem
```

--------------------------------

### Define Paragraph Indent in Pixels

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/paragraph-indent

Use pixel units for a static paragraph indent that remains consistent regardless of user zoom or font size adjustments.

```css
32px
```

--------------------------------

### Line Height Token Value: Normal (AUTO)

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/line-height

Use the string 'normal' to apply the default line height determined by the typeface, equivalent to CSS 'normal' or Figma's 'AUTO'. This value is case-sensitive.

```css
normal
```

--------------------------------

### Text Decoration Token: Strike-through Value

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/text-decoration

Use 'strike-through' as the Text Decoration Token value to apply a line through the text, indicating outdated or completed information.

```plaintext
strike-through
```

--------------------------------

### Add Multiple Color Stops to a Gradient

Source: https://docs.tokens.studio/manage-tokens/token-types/color/gradient

Extend a linear gradient by adding more color stops. Specify the color and its position as a percentage.

```css
linear-gradient(45deg, #0000FF 0%, #87CEEB 50%, #008000 100%)
```

--------------------------------

### Convert Unitless Numbers to REM Units

Source: https://docs.tokens.studio/manage-tokens/token-values/math

Create a Dimension Token using this equation to convert unitless numbers to rem units. Ensure a Token defining the 1 rem value is set as the base font size in the plugin settings.

```TokensScript
{unitless-Token} / {rem-base} * 1rem
```

--------------------------------

### Line Height Token Value: Percentage

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/line-height

Use percentage values to set line height relative to font size. The line height will scale proportionally with any changes to the font size.

```css
200%
```

--------------------------------

### Text Decoration Token: Underline Value

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/text-decoration

Set the Text Decoration Token value to 'underline' to add a line below the text, commonly used for links.

```plaintext
underline
```

--------------------------------

### Spacing Token with Multiple Values and Token References

Source: https://docs.tokens.studio/manage-tokens/token-types/dimension/spacing

Multiple value Spacing Tokens can reference other tokens. Note that Figma Variables do not support multiple values and will skip these.

```css
{space.sm} {space.md}
```

--------------------------------

### Hard-coded Color Token Value

Source: https://docs.tokens.studio/fundamentals/design-tokens/anatomy-value

Demonstrates a hard-coded value for a color token. This is a direct assignment of a color.

```json
{
  "value": "#22c55e"
}
```

--------------------------------

### Retrieve a Specific Token from a Layer

Source: https://docs.tokens.studio/open-source/shared-data

Access a specific token value stored on a Figma layer using its 'tokens' namespace and a given key.

```javascript
node.getSharedPluginData("tokens", key)
```

--------------------------------

### Retrieve Chunked Token Values

Source: https://docs.tokens.studio/open-source/shared-data

Use this code in the Figma plugin dev console to retrieve token values. It handles both single values and chunked data, decompressing them if necessary.

```javascript
// For token values
let compressedValues = '';

const metaRaw = figma.root.getSharedPluginData("tokens", "values_meta");

try {
  const meta = JSON.parse(metaRaw || '{}');

  if (meta.type === 'chunked' && typeof meta.count === 'number') {
    const chunks = [];

    for (let i = 0; i < meta.count; i++) {
      const chunk = figma.root.getSharedPluginData("tokens", `values_chunk_${i}`);
      chunks.push(chunk);
    }

    compressedValues = chunks.join('');
  } else {
    // Default fallback if type is 'single' or meta is missing
    compressedValues = figma.root.getSharedPluginData("tokens", "values");
  }
} catch (e) {
  console.warn('Failed to parse values_meta:', e);
  compressedValues = figma.root.getSharedPluginData("tokens", "values");
}
```

--------------------------------

### Round to Nearest Whole Number

Source: https://docs.tokens.studio/manage-tokens/token-values/math

Use the `roundTo` function to round the result of a math equation to the nearest whole number, useful for avoiding decimal values in spacing or sizing.

```css
roundTo({sizing.sm} * 1.33, 0)
```

--------------------------------

### Reference Another Token as Value

Source: https://docs.tokens.studio/manage-tokens/token-types/text

When referencing another token as the value for a Text Token, ensure the token exists in an active Token Set and has a compatible type (e.g., 'text').

```plaintext
Jan Six
```

--------------------------------

### Capitalize Text Case Token Value

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/text-case

Apply `capitalize` to the Text Case Token value to ensure the first letter of each word is capitalized. This differs from title case, as all words are transformed.

```css
capitalize
```

--------------------------------

### Spacing Token with Multiple Values (Single)

Source: https://docs.tokens.studio/manage-tokens/token-types/dimension/spacing

A single value is applied to the 'Gap' property when using the Token Value.

```css
10px
```

--------------------------------

### Typography Token with References

Source: https://docs.tokens.studio/manage-tokens/token-values/references

This JSON structure defines a typography token where multiple properties reference other tokens for their values. Line 7 shows a hard-coded value, while others demonstrate referencing existing tokens.

```json
{
  "text-style": {
    "body": {
      "sm": {
        "strong": {
          "value": {
            "letterSpacing": "2%",
            "lineHeight": "{text-style.line-height.body.sm} * 100%",
            "fontFamily": "{text-style.font-family.body}",
            "fontWeight": "{text-style.font-weight.body.strong}",
            "fontSize": "{text-style.font-size.body.sm}",
            "paragraphSpacing": "{text-style.paragraph-spacing.default}",
            "textDecoration": "{text-style.text-decoration.default}",
            "textCase": "{text-style.text-case.body}",
            "paragraphIndent": "{text-style.paragraph-indent.default}"
          },
          "type": "typography"
        }
      }
    }
  }
}
```

--------------------------------

### Dimension Token for Paragraph Indent (Independent Property)

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/paragraph-indent

Shows a Dimension Token named `paragraphIndent-none` with its value in pixels. This represents an independent property Token.

```json
{
 "paragraphIndent-none": {
  "value": "0px",
  "type": "dimension"
 }
}
```

--------------------------------

### Complex Math Equation with Spaces

Source: https://docs.tokens.studio/manage-tokens/token-values/math

Complex formulas require spaces between operators to ensure correct transformation by Style Dictionary. Missing spaces can lead to incorrect parsing.

```css
8 * 8
```

--------------------------------

### Replace Token JSON in Figma Console

Source: https://docs.tokens.studio/troubleshoot/reset-tokens-console

After editing your Token JSON in an external editor, use this command to paste the updated JSON back into the Figma file. Replace 'EDITEDJSONHERE' with your actual JSON.

```javascript
figma.root.setSharedPluginData("tokens", "values", "EDITEDJSONHERE")
```

--------------------------------

### Correct JSON Token Nesting and Structure

Source: https://docs.tokens.studio/token-storage/troubleshooting-common-sync-provider-errors

Tokens must be nested within appropriate group objects and include 'value' and 'type' keys. Ensure no extraneous characters or comments exist outside the JSON structure.

```json
{
  "global": {
    "color": {
      "primary": {
        "value": "#007AFF",
        "type": "color"
      }
    }
  }
}
```

--------------------------------

### Referencing a Number Token in a Dimension Token

Source: https://docs.tokens.studio/manage-tokens/token-types/dimension

Manually reference a Number Token within a Dimension Token by enclosing the token name in curly brackets and appending the required unit (px or rem).

```plaintext
{unitless.number}px
```

--------------------------------

### Define Black Color Token with Reduced Opacity (HSLA)

Source: https://docs.tokens.studio/manage-tokens/token-types/color

Use HSLA to define a color token with reduced opacity. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque).

```css
hsla(0, 0%, 0%, 0.25)
```

--------------------------------

### Lowercase Text Case Token Value

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/text-case

Use `lowercase` for the Text Case Token value when no letters should be capitalized.

```css
lowercase
```

--------------------------------

### Clear All Shared Plugin Data for Tokens

Source: https://docs.tokens.studio/open-source/shared-data

Run this code in the Figma dev console to remove all token-related shared plugin data, including values, themes, and their chunked variants.

```javascript
const keys = figma.root.getSharedPluginDataKeys("tokens");
const keysToDelete = keys.filter(k => 
  k === "values" || 
  k === "themes" || 
  k.startsWith("values_") || 
  k.startsWith("themes_")
);

keysToDelete.forEach(key => {
  figma.root.setSharedPluginData("tokens", key, "");
});

console.log(`Cleared ${keysToDelete.length} token data keys`);
```

--------------------------------

### Uppercase Text Case Token Value

Source: https://docs.tokens.studio/manage-tokens/token-types/typography/text-case

Set the Text Case Token value to `uppercase` when all letters in the text should be capitalized.

```css
uppercase
```

--------------------------------

### Clear Figma Cache on Mac

Source: https://docs.tokens.studio/open-source/contribute

This command clears Figma's cache on macOS. Ensure the Figma desktop app is quit before running this command in the Terminal.

```bash
rm -rf "$HOME/Library/Application Support/Figma/"{Desktop,DesktopProfile}
```
Tokens:
Raw