Skip to content

options.md

Latest commit

 

History

History
249 lines (124 loc) · 13 KB

options.md

File metadata and controls

249 lines (124 loc) · 13 KB
icon square-check
cover ../../.gitbook/assets/page-header-figma-export-options.png
coverY 0

Export Options

Export to Figma Options

The Export to Figma Options menu has important settings for creating or updating Styles and Variables connected to your Tokens.

In the plugin

Select the Styles & Variables Button from the Tokens page and choose Export Styles & Variables.

The Export to Figma Options menu is the first screen in the flow.

Select the Export Styles and Variables from the Tokens page to configure the Options.

{% hint style="info" %} You can open the menu at anytime using the Options button at the bottom of the Export to Figma modal. {% endhint %}

The Options button at the bottom of the Export to Figma screen is highlighted. Press it anytime to view or edit your Options.

Variable and Style type options

You select which type of Variables and/or Styles you want to export each time you use this feature.

This granular control allows you export a selection of your Tokens as Variables (for example, brand colors) in one step, then repeat the process to export a different selection of Tokens as styles (for example, brand Typography)

Or perhaps you are working on a new project, and your Color design decisions are ready to export, but your Typography is not.

The Export to Figma Options menu is annotated to match the descriptions below.

{% hint style="info" %} For the export to be successful, the Variable and Style types you select must be compatible with your Token Types.

→ Read the Export to Figma overview for a list of Token Types and their compatible Variable types. {% endhint %}

1. Variable type options

Color - Creates Color Tokens as Color Variables

String - Creates Text, Font Family and Font Weight Tokens as String Variables

Number - Creates Dimension, Number, Spacing, Sizing, Border Radius, Border Width, and Opacity Tokens as number Variables

Boolean - Creates Boolean Tokens as Boolean Variables

2. Style type options

Color - Creates Color Tokens as Color Styles

Typography - Creates Typography Tokens as Text Styles

Effect - Creates Box Shadow Tokens as Effect Styles

{% hint style="info" %} You can export different types of Tokens to Variables and Styles at the same time.

colorcan not be exported to Variables and Styles at the same time as the Plugin won't know which property in Figma to attach the Tokens To. {% endhint %}

Tokens exported to Figma should

The options under the Tokens exported to Figma should label perform additional functions while creating or updating the Variables and Styles types you've selected.

The Export to Figma Options menu is annotated to match the descriptions below.

1. Ignore first part of Token Name for Styles

For Token Names that include groups, the Ignore first part of Token name for Styles option will export the Tokens as Styles with modified names.

This is helpful when your Token Names include prefixes intended for the Design System Team which are not helpful to see in Figma.

For example, a Token named mode-colors.brand.primary.default

With this option enabled will be created as a Style named: brand.primary.default

{% hint style="danger" %} If your Token Names don't include any groups and you have this option enabled, the Token can't be exported, and you will see an error message from the plugin.

"Some Styles were ignored due to Ignore first part of Token name setting" {% endhint %}

For example, a Token named mode-colors-brand-primary-default will have the whole name ignored by the plugin, and the Style can't be created without a name.

→ Read the guide on Token Names with Groups for more detials.

2. Prefix Styles with active Theme name (pro)

Recall that Tokens must have unique names, and a Token Name is the ID to the decision decision. That unique ID can be attached to a Style or a Variable in Figma.

If you are using Themes (pro), you have multiple Tokens with the same name located in different Token Sets which are grouped into Themes.

Multiple Tokens with the same name cannot be exported to the same Figma file as Styles as they will not have a unique ID,

To solve this problem, this option creates a unique ID in Figma by adding the theme-name before the Token Name.

For example, we may have a Theme Group called color-modes with a few themes called:

  • light
  • dark
  • high-contrast

Each theme has a Token called mode-colors.brand.primary.default but a unique value. We can't export the same Token to Figma more than once.

So, if you want the color Styles for each theme exported to the same Figma file, you can enable the Prefix Styles with the active theme name setting.

In this example, you would need to run the Export to Figma three times, as each export will only prefix the active theme name.

  • Export 1 - Light theme active
    • Return to the themes dropdown, turn this theme off, then repeat with the next theme.
  • Export 2 - Dark theme active
    • Return to the themes dropdown, turn this theme off, then repeat with the next theme.
  • Export 3 - High-contrast theme active

After the three exports, you would see Styles in Figma named (the plugin coverts your grouped named from periods to forward slash):

  • light/mode-colors/brand/primary/default
  • dark/mode-colors/brand/primary/default
  • high-contrast/mode-colors/brand/primary/default

→ Read the guide on Themes for more details

3. Create Styles with Variable references

This setting tells the plugin to connect newly exported Styles with previously created Variables.

This is a multi-step process, detailed in it its own guide.

{% content-ref url="styles-variable-references.md" %} styles-variable-references.md {% endcontent-ref %}

3. Update existing Style and Variable names

When you update the names of Tokens in the plugin that are currently attached to Styles and Variables in Figma, the Update existing Style and Variable names option ensures Figma will be updated with the new names.

This option moved from the Plugin Settings Page with Version 2.0

5. Remove Styles and Variables without connection to a Token

When you remove Tokens in the plugin that are currently attached to Styles and Variables the Remove Styles and Variables without connection to a Token setting will delete those Styles and Variables from Figma.

This option moved from the Plugin Settings Page with Version 2.0

{% hint style="danger" %} This option is destructive and can lead to unexpected results!

It should only be used when you are certain you have Variables or Styles that need to be deleted from Figma. {% endhint %}

Up Next - Export as Themes or Token Sets

Once you've configured and saved your Export Options, the plugin will bring you to the Export from Themes or Token Sets page.

Once you've confirmed your Export Options, the Plugin brings you the place where you select which Tokens to export.

Select a card below to jump to the next Guide you are interested in.

Export as ThemesIf you have a Pro licence for Tokens Studiocard-header-figma-export-themes.pngthemes.md
Export as Token SetsIf you have a Free licence for Tokens Studiocard-header-figma-export-sets.pngtoken-sets.md
Skipped VariablesSometimes, the plugin skips exporting your Tokens to Figma even when you have the desired options configured correctly.card-header-figma-variables-skipped.png
Styles with Variable ReferencesDetails the steps to use this option with Color, Typography or Box Shadow Tokens.card-header-figma-styles-var-references.pngstyles-variable-references.md

Resources

Figma resources:

Community resources:

{% include "../../.gitbook/includes/something-to-share-subm....md" %}

Known issues and bugs

{% include "../../.gitbook/includes/bug-report.md" %}

Requests, roadmap and changelog

{% include "../../.gitbook/includes/something-to-share-subm....md" %}