'I had a question... When you select and element like shape in Figma and then choose a colour is the expected behaviour that it applies both a fill and a border? I have to keep turning borders off and then they leave them in the inspect section.'

Hi,

With a clean install of the plugin I try to import styles but the plugin crashes and white screens. If I uncheck the options checkbox and import styles then styles seem to be imported fine. However if I then close the plugin and reopen it then it is blank again?

I've attached 2 recording to help.

I hope this helps and that you can help? This has been such great work so far!

Thanks

Right now all we do is store Variables.

Tokens become much more useful when used in Decisions:

• Tokens
  gray-100: #cccccc

• Decisions:
  background-color-light: $gray-100

This would open the door to theming, as we can possibly have multiple Themes (Dark / Light) where each Theme references other Tokens for their respective values

As you can see in the screenshot, the defined colors are not shown in the plugin. Is there a way to fix this?

Thx a lot for this great plugin! This is really awsome

I just started experimenting with figma-tokens today, looks very promising!

One issue that I encounter is that when renaming a token it creates a duplicate rather than overwriting the original token.

For instance, if I want to rename border-radius-square to border-radius--square it creates another token instance after which I have to remap all elements using that token to the correctly named token.

Some kind of video demo would be great!

We need to set further data on each token, instead of just the value.

currently:
colors: {
white: "#ffffff"
}

future:
colors: {
white: {
value: "#ffffff",
description: "I am a white color token",
data: {
figma: {
styleId: "1287185728312"
}
}
}
}

Spacing 值无法分别设定水平间距，垂直间距，项目间距，希望后续更新加上。比如我希望将 96,96,96 设置为 96,48,0
Spacing cannot be separated by setting horizontal Spacing, vertical Spacing, project Spacing and hopefully being updated later added.

Steps to reproduce:

1. Open Plugin
2. switch to JSON tab
3. enter JSON, where a variable does not represent a string value, but an object:
   { "primitives": { "gap": { "xs": "4px", "s": "8px", "m": "16px", "l": "32px", "xl": "64px" } }, "spacing": "$primitives.gap" }
4. click "Save & update"
5. Click on Tokens

After that, the plugin box stays empty. And I did not find a way to reset it. Even uninstall and reinstall the Plugin does not help.

Questions:

1. Can you avoid this behavior in the plugin?
2. Is there a way to reset the plugin, so I can again post the JSON?

I am wanting to set 'underline' and/or 'strikethrough' text decorations for certain text styles. I may be using the wrong syntax, but typography 'decoration' doesn't seem to be supported.

Ability to set letter casing (uppercase, lowercase, titlecase, smallcaps) would be super useful as well.

I am not sure whether this is possible due to Figma’s implementation of these but I am wondering if it is possible to use flexible instead of fixed values for (some) tokens.

For instance, currently I am working on a typographic scale where the line-height is dependant on the font-size. For headings, narrow text, etc. I use a multiplier of 1.2 × font-size and for body text 1.5 × the font-size. Ultimately I use two tokens for line-height; a line-height--tight (1.2 ×) and a line-height--loose (1.5 ×).

What I am essentially doing in order to achieve this, is to enter the font-size in Figma’s line-height field followed by one of these multiplier tokens, like so:

Would it be possible to facilitate this?

I started a study on how we can maintain the consistency of the plugin interface following the Figma design language & system
Public link: https://www.figma.com/file/i02ufiPoDjctrQjYcpwbUs/Figma-tokens?node-id=0%3A1

Using this prototype, it may be easier to validate some backlog ideas. In addition, I think it would be interesting to keep the interface versioning (design file)

I see support for aliases like 'rgba($colors.brand, 0.5)' and I think it's awesome!

Thinking of ways to expand on aliases, I would love a way to manipulate the hue, saturation, lightness, and alpha of a specified color. For example:

{
"colors": {
"primary": {
"base": "hsla(219, 99%, 53%, 100%)",
"hover": "scale($colors.primary.base, lightness: 8%)",
"active": "scale($colors.primary.base, lightness: -6%)",
"selected": "scale($colors.primary.base, lightness: 10%)",
},
etc.
}

https://sass-lang.com/documentation/modules

We should allow Developer who don't have a Figma account to see the Token values that are on a layer in order for the developer to be able to inspect what tokens were used on a given layer

We should allows users to compose different tokens to Compositions:

e.g. a "Card" Composition could be composed of the following:

cards: {
  default: {
    borderRadius: $borderRadius.lg,
    fill: $colors.white,
    border: $colors.gray.200,
    shadow: $shadows.sm
  }
}

On the layer itself we store only the composition:
card.default

Should probably be different than Typography decisions in the sense that compositions can be composed of any token itself, whereas typography decisions have a fixed set of tokens they can reference. The UI should allow this in the sense that when creating a composition the user should be able to "select" an existing property to enter the desired value (and once we have a proper token selector this will be much easier to use).

A user shouldn't have to enter the same tokens again and again.

Instead we should offer external sync options:

A) Automatically
User updates token values - we update the JSON on the server

B) Manual
User updates token values - presses "Save" - local JSON gets sent to server

This brings a different problem: What if in the meantime the server has a newer version of a JSON, perhaps by a different user?

hello! me again <3
I'm very keen with this plug in, I'm using it everyday!
But I want to make a consult, today with my team we were working on our design system but the spacing does not work, and we don't understand why!
Is there any tutorial? maybe we skipped a step.
Thanks for your time, have a nice day!

We should add two new tokens to typography options (letter spacing, paragraph spacing)

Include in

• Seperate tokens
• Typography decisions

Just been thinking a lot of the larger libraries are using YAML for easier integration with non-engineering contributors for ease of use. It has an easier syntax which might lead to less errors so edits can be made easier in plugin directly.

I think this plugin would work really well with Figmagic https://github.com/mikaelvesavuori/figmagic

For the typography the following is happening:

./design-tokens.json

{
  "fontFamilies": {
    "font-arial": "Arial"
  },
  "typography": {
    "headers": {
      "fontFamily": "$fontFamilies.font-arial"
    }
  }
}

How are you using that in your application?

Typically json-sass (example) tools don't handle variables to generate a value do they?

This should offer fine-grained support:

fontFamilies: {
  display: "Avenir",
  body: "Inter"
},
lineHeights: {
  heading: 1.1,
  body: 1.4
},
fontWeights: {
  heading-light: 300,
  heading-bold: 700,
  body-regular: 400,
  body-bold: 600
},
fontSizes: {
  h1: 28,
  h2: 24,
  h3: 22,
  h4: 20,
  h5: 18,
  h6: 16,
  body: 16
}

Decisions:

typography: {
  H1-Bold: {
    fontFamily: $fontFamilies.display,
    fontWeight: $fontWeights.heading-bold,
    lineHeight: $lineHeights.heading,
    fontSize: $fontSizes.h1
  },
  H2-Regular: {
    fontFamily: $fontFamilies.display,
    fontWeight: $fontWeights.body-regular,
    lineHeight: $lineHeights.body,
    fontSize: $fontSizes.h2
  },
  Body: {
    fontFamily: $fontFamilies.body,
    fontWeight: $fontWeights.body-light,
    lineHeight: $lineHeights.heading,
    fontSize: $fontSizes.body
  }

Would be great to have multiple "inputs" for tokens, split up files into their different areas, for example a spacing.json with the following structure:

    "name": "Space",
    "tokens": [
        {
            "id": "1",
            "value": { "web": "4px", "ios": "CGFloat = 4.0" }
        },
        {
            "id": "2",
            "value": { "web": "8px", "ios": "CGFloat = 8.0" }
        },
        {
            "id": "3",
            "value": { "web": "16px", "ios": "CGFloat = 16.0" }
        }
    ]
}```

Allow users to collapse certain tokens, or have some tokens start collapsed

Things to consider:

• Plugin should probably remember users choice via LocalStorage
• Possibly allow collapsing of color groups? Could be useful if users have a bunch of colors

Could be useful to remove a single token in Inspector, instead of a) removing all tokens, or b) searching for that token in the overview

When entering a variable, often when typing $ the JSON window goes blank.
I've attached a picture of the window when this happens - about 50% of the time.

Users should be able to use a Colorwheel similar to Figma's native one when setting Color Tokens

When I run the plugin in my tokens' file in Figma and click on "Import styles", all my text style's font-weight resets to Extra-Bold

The output of the token export copies the style names 1on1.

So for example if you have the following color styles:

The output is:

{
  "colors": {
    "Support ": {
      " Accent": "#0143ff",
      " Grey Dark": "#556a7b",
      " Grey": "#a3b0ba",
      " Grey Light": "#edf1f5",
      " White": "#ffffff",
      " Black": "#000000"
    }
  }
}

The spaces and capitals aren't conventional for JSON output.

developer.mozilla.org uses snake_casing (source)
w3cschools uses camelCasing in their examples (source)

Which format to choose exectly might be a configurable setting or it could just be a standard for this library.

But the idea to normalize the JSON output, is that something that's desired?

Either a seperate tab or just a "export" button somewhere

The user should then be able to choose how to export the Tokens:

• JSON
• YML
• JS
• CSS/SCSS

It would be great if "description": "" were available for Typography, like it is for colors. I try to document when/where/why for each text style and color style within Figma. So being able to add it via the figma-tokens plugin would be awesome!

Variable references are rendered as hardcoded values when updating the reference token.

Eg:

• reference color token "brand/primary" = #FF0000
• alias color token "button/primary" = $brand.primary

When the "brand/primary" token is updated, the "button/primary" is no longer linked, the "$brand.primary" variable gets rendered as "#FF0000".

Any plans to make the variables persistent (even after altering the original token)?

It's not possible to apply different tokens for component instances (Color in my case), the plugin returns "No nodes Updated".
Expected result: Apply different tokens for a component instance.

Example: { "primitives": { "gap": { "xs": "4px", "s": "8px", "m": "16px", "l": "32px", "xl": "64px" } }, "spacing": "$primitives.gap" }

Reported in #70

i'we tried to add rgba ou hexadecimal with alpha values, but this broke the plugin :O

Before the update I wanted the ability to resize the window to make the JSON more readable. With the addition of token-sets I want it even more.
I use 4 themes, default, gray-10, gray-90, and gray-100. Due to the constraints on the plugin window, the text wraps and makes the set names difficult to read.

Situation:

In the master color area I have two types of color sections.

• Master Scales
  • [Color name]
• Theme
  • [Use case]

Issue

It is pretty difficult to differentiate between a heading and sub-heading for scan-ability. I AM STOKED though that it supports the nesting and didn't just break like other things I have used in the past.

Sub-issue

The color white does not show in the grid view. Maybe a slight border around it?

We should allow reading existing Figma files for certain values and "importing" these as our tokens. For example check all borderRadii and use these as our borderRadius tokens.

Or check all Color Styles in a document - generate tokens from those (ideally so that they're attached with their StyleID)

Steps to completion:

• Color Styles Import
• Typography Styles Import
• Effects Styles import
• Add ability to configure what to import

Add a box-shadow token.

For the start a single value could suffice, but in the future it would be neat if we could combine multiple shadows

您好，请问您会长期更新这个插件吗？
因为要长期使用，停止更新后就会造成不好的影响。
所以想问您是否确认会长期（1年以上）维护更新这个插件呢？
因为英语不好，所以只能附上机器翻译的英文版，请您谅解。
Hello, will you update this plug-in in the long term?
Because to use for a long time, stop updating will cause bad effects.
So are you sure that you will maintain and update this plugin for a long period of time (more than 1 year)?
Due to the poor English, the English version of machine translation can only be attached. Please understand.

I totally found this by accident! Its a rad feature but was not super discoverable... Especially when the color blind setting is on.

Concept

Maybe creating a builder at the bottom, so when the parameters are chosen it shows them building in a bar

Reset to Default (button) Is an action that is not only applicable to the JSON tab but also to tokens. Also it takes up important real estate on that location. It's expected not to be used that often. (right?) Button: Enable color UI (little droplet) Is only applicable for the Tokens tab. Has no meaning on the other tabs. Inspect Seems to be applicable only for a layer, not groups or symbols. Maybe the name is too ambiguous?

Would it be an idea to:

• Place "Reset to default" and "Import styles" at the same "level". Perhaps in a menu.
• Move the droplet inside just the "Tokens" tab
• Rename "Inspect" to "Inspect layer"

Having the ability to set the borderRadius is great, and it would be enhanced further if the borderWidth could be set with a token as well. This way defaults could be set up for small, medium and large UI components.

Hey,

I've a set color tokens. Is it possible to use this colors also for Stroke colors?
Maybe a solution is to hold the OPT Key and click on that token? Otherwise I have to set my stroke colors hard but sounds not like a plan :)

Thought about Theming quite a bit now and I think it would be best if we:

• Keep all options in the same structure as we do right now
• Allow a user to create Theme-Decisions, allowing to check or uncheck Themes (depending on what different tokens get applied), e.g.:

User has base tokens of:

colors:
  white: #fff
  black: #000
  gray: #333

User has "light theme":

colors: 
  textColor: "colors.white"
  backgroundColor: "colors.black"

"black theme"

colors:
  textColor: "colors.black"
  backgroundColor: "colors.white"

Depending on what theme the user activates a different token setup is given - resulting in different themes.

As we can't change Styles if Styles are located in a different file I think it would be best to create something akin to Themer: Replacing Style references by a different one

Hey,
I am not 100% sure what the correct behavior is (bes of course would be to store the previous values, but that seems to be quite an overhead). However when I set the spacing in an auto layout to token xs (checkmark is shown) and afterwards "unset"/remove it (checkmark is not shown) the value stays as the numeric value of xs.

I would expect it to be reset to 0.

Currently, it's all too easy to completely delete your tokens when in the JSON tab via the Reset to Default and Clear buttons:

One idea is to serve up a confirmation modal dialog that forces you to confirm the action.