[Token Studio Setup] + [Access to older versions of Figma File]

[smeidu]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

A basic question on the Token Setup: Core Tokens like Font Family are not sitting within a global Set, but can be found in light/base, light/components, dark/base, dark/components. I can't find a way to change the base font globally. Do I miss something?

Also: I see lots of road blocks with the new Token Version of the MUI File. Is there a link to download the latest-pre-Token version.

Your environment 🌎

v5.11.0

[adrianmanea]

The global is actually the fontFamilies.roboto token. You can simply rename it to fontFamilies.global and change your font there. Tokens Studio will automatically rename where it's being used, so no extra effort. The reason why is this way by default is that people might use multiple font families.

You can use customize the library without the plugin at all. You can look at it as a utility plugin!

Also: I see lots of road blocks with the new Token Version of the MUI File. Is there a link to download the latest-pre-Token version.

Can you name any other road block? I understand it can feel 'sketchy' to use the plugin being at it's early stage. Happy to send the previous version but it doesn't have a lot of the new features. Just send an email to figma@mui.com

[charisehansen]

I’ve actually had quite a few issues with the plug in and it’s stability. It crashed on me nearly every time when testing out the file and plug in.

-- Charise Hansen Director, User Experience | Macy's, Inc.

[signature_1802759014] Chat with me about: Design Systems, Accessibility, Design Process

From: Adrian Stefan Manea @.> Date: Thursday, January 19, 2023 at 5:02 AM To: mui/mui-design-kits @.> Cc: Subscribed @.***> Subject: Re: [mui/mui-design-kits] [Token Studio Setup] + [Access to older versions of Figma File] (Issue #146) ⚠ EXT MSG:

The global is actually the fontFamilies.roboto token. You can simply rename it to fontFamilies.globalhttps://urldefense.com/v3/__http:/fontFamilies.global__;!!EkHEP60!DGVHCgU0lEVRl5uB9Q-WWBC_2vI-lQzY851ZH5B5xBrMYilLIsLF73AXd1ACkm-CnmzSQNLsUnQrm3scA_Izsi5evLY$ and change your font there. Tokens Studio will automatically rename where it's being used, so no extra effort. The reason why is this way by default is that people might use multiple font families.

[image]https://urldefense.com/v3/__https:/user-images.githubusercontent.com/5917515/213424471-78fc8a8a-e8ad-4cea-b842-9c104a3b34ec.png__;!!EkHEP60!DGVHCgU0lEVRl5uB9Q-WWBC_2vI-lQzY851ZH5B5xBrMYilLIsLF73AXd1ACkm-CnmzSQNLsUnQrm3scA_IzFRD_IuI$

You can use customize the library without the plugin at all. You can look at it as a utility plugin!

Also: I see lots of road blocks with the new Token Version of the MUI File. Is there a link to download the latest-pre-Token version.

Can you name any other road block? I understand it can feel 'sketchy' to use the plugin being at it's early stage. Happy to send the previous version but it doesn't have a lot of the new features. Just send an email to @.**@.>

— Reply to this email directly, view it on GitHubhttps://urldefense.com/v3/__https:/github.com/mui/mui-design-kits/issues/146*issuecomment-1396792952__;Iw!!EkHEP60!DGVHCgU0lEVRl5uB9Q-WWBC_2vI-lQzY851ZH5B5xBrMYilLIsLF73AXd1ACkm-CnmzSQNLsUnQrm3scA_IzdsyISG0$, or unsubscribehttps://urldefense.com/v3/__https:/github.com/notifications/unsubscribe-auth/A5FYZZ5Y3BW4TJJL357VHULWTENKLANCNFSM6AAAAAAUAFG7SA__;!!EkHEP60!DGVHCgU0lEVRl5uB9Q-WWBC_2vI-lQzY851ZH5B5xBrMYilLIsLF73AXd1ACkm-CnmzSQNLsUnQrm3scA_IzrV1rAtk$. You are receiving this because you are subscribed to this thread.Message ID: @.***>

• This is an EXTERNAL EMAIL. Stop and think before clicking a link or opening attachments.

[adrianmanea]

I understand the frustration, we've also had a crash once in a while but very rarely. Hopefully, Figma will announce a native solution to Tokens. As I mentioned in my previous comment, the plugin is totally optional, one can use it only for enabling modes.

[mr-burns-cb]

I have this issue also. Chancing colours was no problem. But typography. I can't seem to get Token Studio to change the text-styles in the file. Roboto just keeps on showing up. Can't figure out why it's not working. It seems to be very well structured and well tailored file and token-setup. Really looking forward.

[adrianmanea]

Hi @mr-burns-cb we totally apologize for that, I know what's wrong and we intend to release a quick fix by the end of this month. For the Typography, there is a small typo in the Tokens Studio. Rename the "Typography" group into small case "typography".

Edit: Also in the components set, find the Typography group, and rename the "Components" group into small case "components".

We did the small caps renaming lastly and we ended up with this typo in prod.

[oliviertassinari]

Would it make sense to add docs for this in https://mui.com/figma/getting-started/?

[adrianmanea]

I was thinking we could release a quick fix by the end of this month so we can solve it for good?

[mr-burns-cb]

I think it's solved. Just have to correct another typo: Change Components to components. Attached here, thanks to @adrianmanea for helping out. It works awesome.

[coreyfromtesouro]

@mr-burns-cb yea I spotted the Components token issue yesterday as well. Also, @adrianmanea if it's helpful, here are a few additional issues i've spotted.

1. The headings variant's have become unlinked from the Typography component.
2. The filled variant's of the Alert's components still reference the "alerts-description" global style, where the other var's have changed to the body2 class.
3. It would visually appear a majority of the design tokens have become unlinked. In the example image below, I show the elevation tokens for example. It seems link theres still somewhat of a link, as changes still appear to take place globally at time, however visually, it does not show a link in the token inspection. Not sure if that's an issue on Design Tokens side or not.

[coreyfromtesouro]

Another small inconsistency, the filled / warning / alert component is referencing the background / paper-elevation color token when it should be referencing the color warning / contrast token.

[adrianmanea]

Thank you for reporting this @coreyfromtesouro

The headings variant's have become unlinked from the Typography component.

Yes, only from the typography table. It requires resetting the component.

It would visually appear a majority of the design tokens have become unlinked.

Although it is not showing in the tokens studio the linkage (highlighting the token based on the selected layer) changing the elevation works as expected from the plugin. Clearly a visual bug from their end.

The filled variants of the Alert's components still reference the "alerts-description" global style

That is correct. Only the filled variant uses body2, font-weight: medium - the rest are using base body2

the filled / warning / alert component is referencing the background / paper-elevation color

I couldn't understand where the color is coming from honestly, but it wasn't the contrast in my tests when I did them. Maybe @oliviertassinari can help me understand the default color here: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Alert/Alert.js#L84

[coreyfromtesouro]

Hey @adrianmanea just another quick call out, the base colors in design tokens are also unlinked from figma's local styles as they are currently in a group called "colors". To relink these with the design tokens, all the base colors will have to be renamed with the prefix "colors." to match the naming convention see in local styles. I.E. "colors.grey.400"

0"

[adrianmanea]

Ah, correct. These are actually static, but I think one can mutate the colors.