[figma] Theme interface doesn't cover design tokens from official Figma file

[mui]

[figma] Theme interface doesn't cover design tokens from official Figma file

[danilo-leal]

Hey @JacekSmolakFandom, thanks for opening this one up. We've recently created this new repository for consolidating issues around the Design Kits, so I'm transferring this one here.

I believe that the colors categorized under Other are mostly helper colors to make Figma look exactly how the components render on code. "Rating Active" for instance is a one-off yellow shade used for the Rating component demos, we didn't use the yellow under Warning for that, similarly with Snackbar. Given that, for now, I think you could just ignore the Other category since the components have them automatically. In the meantime, I'll check with the team behind the Design Kits to see how we can make it match perfectly.

By the way, it's an interesting use-case you have there - using a plug-in to export the theme's color from Figma so you can paste directly in the code. We ourselves have explored some stuff in that sense as well. You mentioned that it was you that built it, would you mind sharing the plug-in? Also, what are you referring to as "Theme interface"? I got a bit confused about that.

[JacekSmolakFandom]

Hi @danilo-leal
Thanks for the answer. And, to cut it to the chase...

1. The plugin
   It is not a plugin for Figma, so that we're clear, it's a piece of code in our application that uses the exported tokens (JSON file) and creates the theme file for MUI (JavaScript/Typescript code). The image above shows how I obtain the JSON file with tokens from Figma. MUI theme is an object with a specific structure (here's how it looks like with default values). That's for the how and why. As for sharing it - once I have that piece of code done, and it is in a good shape, tested etc. (as I am still in the process of creating it) I might actually publish it, because why not :)

2. Theme interface
   I don't know how familiar you are with TypeScript. If you are, jump to the next paragraph. tl;dr - it's about keeping the structure of the theme file as it is defined by that mentioned interface. In other words, how to get whatever structure I have in the JSON file to match the structure of the theme file in MUI. That interface is keeping me in check should I do construct that theme file in a wrong manner. For instance, if I were to keep the colors under the colors property and not palette, TypeScript would yell at me, because the interface expects palette. And that goes for the entire theme file structure. Most of the things can be easily matched, those other colors were a bit of a pickle though.

   If you are familiar then have a look at the Theme's interface.

   Also, to explain what I mean by matching Figma tokens with that interface. If you'll look at the properties of the Theme's interface or the default theme in MUI you'll see that exported JSON matches (to some extent) that structure. It needs some restructuring, yes, but it is all clear... until you see that other color group.

So, the ideal thing I (and probably many people) would see is that the JSON object would resemble the Theme interface's structure. It doesn't have to be a 1:1 (it is not right now and it is OK, see the example below), but at least it should contain the information about the properties you can find on the theme file, but not ones that are not there, so that the consumer of the tokens file is not mislead. But if that additional information (like other) is needed, perhaps it could be put not inside palette (which has a well defined structure) but somewhere else (in the JSON's tokens structure).

If any of that information was not clear, let me know, we could perhaps have a Zoom call and I will be more than happy to explain it by showing you what I mean by all of that, and/or you why current JSON structure needs to stay as is :)

---

And here's the example of what I mean that the tokens structure resembles the theme's structure. If you'll take a look at the primary color data in tokens:

"primary": {
  "main": {
    "description": "Main color used by most components",
    "type": "color",
    "value": "#3f51b5ff"
  },
  "dark": {
    "description": "Alternative dark shade",
    "type": "color",
    "value": "#303f9fff"
  },
  "light": {
    "description": "Alternative light shade",
    "type": "color",
    "value": "#7986cbff"
  },
  "contrast": {
    "description": "Color that keeps a contrast ratio above AA when XX.main is used as a bg. color",
    "type": "color",
    "value": "#ffffffff"
  },
  "states": {
    "outlined resting border": {
      "description": "Used for outlined variant components in resting state. E.g Buttons, Chips, etc",
      "type": "color",
      "value": "#3f51b580"
    },
    "outlined hover background": {
      "description": "Fill background color for outlined & text variant components in hover state (Button, etc)",
      "type": "color",
      "value": "#3f51b514"
    },
    "contained hover background": {
      "0": {
        "type": "color",
        "value": "#3f51b5ff"
      },
      "1": {
        "type": "color",
        "value": "#0000004d"
      },
      "description": "Fill background for contained variant components in hover state."
    }
  }
}

you'll notice it has main, dark, etc. properties. Each of those have amongst them value. So, I can take this whole thing and create something like:

primary: {
  main: '#3f51b5ff',
  dark: '#303f9fff',
  light: '#7986cbff',
  contrastText: '#ffffffff'
}

and this is how I create colors palette. So the structure for the colors that exist on the Theme's interface are fine and I can take them and create the whole palette. And I would be looking at having as much of the data in tokens to be structured this way so that I could create the theme not just for palette and typography (those are in the exported JSON) but also for others if possible.

[danilo-leal]

Got it, thanks so much for this very detailed breakdown of your thoughts! I initially thought that the Design Tokens plugin you had there to export the Theme's JSON was the tool you were talking about, the one you created, but I figure it is rather one found in the Figma community. Now I understand that what you actually created is the "translation" tool from the JSON to MUI's theme (excited to see that once you publish, tho).

it could be put not inside palette (which has a well-defined structure) but somewhere else (in the JSON's tokens structure).

As far as this part goes, which seems to be the biggest problem here, since most of the other colors match the default theme structure, I think that we have two main options, at least from what I can see. The other color folder on Figma are mostly helper colors to make the components resemble the actual React implementation, which has these created "automatically" and not using a color category such as other. The thing is that on Figma, they're still a type: "color" token, so your tool will probably try to place it somewhere inside the palette structure but it ends up not matching the theme's structure. What we can do is: iterate removing the other color folder on Figma and try having them in a different way inside the components that use them (Rating Stars, Snackbars, Divider, etc) or you can make your theme creation tool from the exported theme JSON ignore them completely.

Before doing the second option, I think that we can go back to the Figma kit and see what we can do (cc @adrianmanea), we'll keep you posted about that.

I could create the theme not just for palette and typography (those are in the exported JSON) but also for others if possible.

About this, I believe it is, for now, a limitation with Figma's native "token declaration". Figma currently only saves as tokens text, color, and "effects" (drop shadows, layer blur, inner shadows, background blur) styles. There are already some plug-ins that are able to save other properties as re-usable tokens (like border radii, opacity, spacing, etc), such as Figma Tokens but they're not native so not sure if it's reliable to depend on it. I'm sure Figma will make it native at some point, though. So maybe it's best just wait for it?!

---

Anyways, I find it very interesting that you're investing in developing a tool to translate the exported theme JSON from the Design Kit to the actual code you're going to use on your project. Could you tell more about how you ended up doing this and how has it been for you, apart from this problem?

[oliviertassinari]

What I try to do is to have an automated way of creating theme files based on tokens exported from Figma file.

Ok, so what I understood is:

1. @JacekSmolakFandom Installed the MUI Figma kit and started to use it.
2. Naturally, he had to customize the theme to match with his brand.
3. Developers come in, it's time for the handoff process
4. Nice, a plugin to automate part of it: https://github.com/lukasoppermann/design-tokens
5. Let's export

6. 💥 But unfortunately, the output is not really usable directly in the MUI JavaScript theme object.

So I'm closing for #10, it's a duplicate.