[Question] - Is there a way to not include default metadata when formatting in a JSON format?

[delisma]

Issue description

I was trying to build a JSON file for the Figma Tokens plugin written by @six7.

When a name property is declared for a token in the JSON file, I've noticed that the plugin use it for organizing the tokens with the type property. But when no name property is included, the keys of the token is used instead.

Current behaviour

When I use the pre-defined JSON transform I get this verbose data structure

{
  "colour": {
    "utils": {
      "blue": {
        "value": "#0535D2",
        "type": "color",
        "filePath": "tokens/color/base.js",
        "isSource": true,
        "original": {
          "value": "#0535D2",
          "type": "color"
        },
        "name": "gcds-colour-utils-blue",
        "attributes": {},
        "path": [
          "colour",
          "utils",
          "blue"
        ]
      },
      "purple": {
        "value": "#7834BC",
        "type": "color",
        "filePath": "tokens/color/base.js",
        "isSource": true,
        "original": {
          "value": "#7834BC",
          "type": "color"
        },
        "name": "gcds-colour-utils-purple",
        "attributes": {},
        "path": [
          "colour",
          "utils",
          "purple"
        ]
      },
      "white": {
        "value": "#ffffff",
        "type": "color",
        "filePath": "tokens/color/base.js",
        "isSource": true,
        "original": {
          "value": "#ffffff",
          "type": "color"
        },
        "name": "gcds-colour-utils-white",
        "attributes": {},
        "path": [
          "colour",
          "utils",
          "white"
        ]
      }
    },
    "base": {
      "red": {
        "100": {
          "value": "#ecb6b5",
          "type": "color",
          "filePath": "tokens/color/base.js",
          "isSource": true,
          "original": {
            "value": "#ecb6b5",
            "type": "color"
          },
          "name": "gcds-colour-base-red-100",
          "attributes": {},
          "path": [
            "colour",
            "base",
            "red",
            "100"
          ]
        },
        "300": {
          "value": "#c85c5a",
          "type": "color",
          "filePath": "tokens/color/base.js",
          "isSource": true,
          "original": {
            "value": "#c85c5a",
            "type": "color"
          },
          "name": "gcds-colour-base-red-300",
          "attributes": {},
          "path": [
            "colour",
            "base",
            "red",
            "300"
          ]
        },
        "500": {
          "value": "#bf3230",
          "type": "color",
          "filePath": "tokens/color/base.js",
          "isSource": true,
          "original": {
            "value": "#bf3230",
            "type": "color"
          },
          "name": "gcds-colour-base-red-500",
          "attributes": {},
          "path": [
            "colour",
            "base",
            "red",
            "500"
          ]
       },
...
    }
}

This is generated from this config.json file:

{
  "source": [
    "tokens/**/*.js",
    "tokens/**/*.json"
  ],
  "platforms": {
    "figma": {
      "buildPath": "build/figma/",
      "prefix": "gcds",
      "transforms": [ "name/cti/kebab" ],
      "files": [ {
        "destination": "figma.tokens.json",
        "format": "json"
      } ]
    }
  }
}

Expected behaviour

I would prefer Figma Tokens behaviour where the keys organize the tokens instead of the name property. But then I'm trying to not have the default metadata generated by SD and I can't seem to figure out how. I just need to output the JSON file like this:

{
  "colour": {
    "utils": {
      "blue": {
        "value": "#0535D2",
        "type": "color"
      },
      "purple": {
        "value": "#7834BC",
        "type": "color"
      },
      "white": {
        "value": "#ffffff",
        "type": "color"
      }
    },
    "base": {
      "red": {
        "100": {
          "value": "#ecb6b5",
          "type": "color"
        },
        "300": {
          "value": "#c85c5a",
          "type": "color"
        },
  ...
    }
}

Screenshots

Default JSON file uploaded in Figma Tokens

Expected JSON file uploaded in Figma Tokens which might be more informative for designers

All that said, is this something that could be achieved with SD or should we investigate with Figma Tokens a way to prevent their default behaviour?

[phantasmagoriadigital]

Yeah, we're having the same issue. Currently running a custom script which is not ideal. An example for exporting to figma tokens format would be great!

[delisma]

Currently running a custom script which is not ideal.

@phantasmagoriadigital Would you mind sharing your script? It may not be ideal, but could be very useful.

[phantasmagoriadigital]

@delisma I don't mind that, but let's connect because we're working on a solution with a few people. We're working on a better integration running through style dictionary, which should be done in a couple of days. If you can let me know how we can connect we can discuss the details of your requirement and probably come up with a solid solution.

[dbanksdesign]

Here is a quick example that shows a couple different JSON formats, 2 built-in and 2 custom: https://stackblitz.com/edit/style-dictionary-example-3jm9xf?file=config.js

Do any of those fit the output you are expecting?

[phantasmagoriadigital]

Here is a quick example that shows a couple different JSON formats, 2 built-in and 2 custom: https://stackblitz.com/edit/style-dictionary-example-3jm9xf?file=config.js

Do any of those fit the output you are expecting?

@dbanksdesign Thanks for the example, but it doesn't solve the problem.

I need to do 2 things:

1. Filter and group tokens as: core tokens / sematic alias tokens / component tokens
2. Those need to be combined in a single json file that has the following structure (like figma4, but with the type, and description attribute)

json output example

Or just the values {} object would be fine too.

[delisma]

@phantasmagoriadigital I think that if we adapt const traverseObj, we could achieve our needs (filter and group) with @dbanksdesign quick example. What's good with @dbanksdesign example too, is that we have a way to build our custom formats not just for Figma but potentially for Adobe XD and/or Sketch in the future with SD. I'll try to experiment with it today and see I can reuse some of your algorithm to traverse your folder structure.

[phantasmagoriadigital]

@delisma cool, I have also been working on this. @six7 sent me a script today that could help with some of the conversions. Will share them shortly.

Here it is:
https://github.com/lukasoppermann/design-tokens/blob/main/src/extractor/extractFonts.ts

[kg-currenxie]

Would like to remove the metadata as well..