Improve Figma Variable Mapping + Dark Mode

[aisgbnok]

Is your feature request related to a problem? Please describe.

The MTB 2.0 release is a major update. The performance is significantly better, the new design is easier to use, and the added features are great. Early variable support is the best feature in this release. However, MTB's usage of variables could be improved in future releases.

Right now all the schemes and palette colors are just thrown into two big groups. Additionally, the lack of dark mode is unfortunate. However, I understand that this is just the first release of 2.0

Describe the solution you'd like

Before MTB 2.0, and still for now, I have manually curated my variables from the local styles generated by MTB.

Variable Organization

Here is the palette that MTB 2.0 generates (left) compared to my custom variable palette (right).

Organizing the palette/schemes into groups would help with searching and easier management of variables.

You will also notice that the MTB 2.0 palette is missing many extended colors. For example primary12 which seems to no longer be generated at all. Full total palettes were helpful for creating custom content that may not have an explicit M3 mapping.

Variable Mapping (Aliases)

The current MTB 2.0 variables do not make use of aliases at all. This is disappointing.

Utilizing variable aliases significantly improves the understanding of which palettes correlate with specific schemes. Additionally, it reduces overhead. Just modifying the palette colors will update the effected schemes.

Dark Mode (using variables)

MTB does have dark mode support (without variables), and I understand this design choice to a point. Given MTB has to handle states and more complex color changes, it does make sense. However, I have been able to (for the most part) successfully convert many of the M3 Design Kit components to variables already and successfully utilize Figma's built in modes w/ variables.

https://github.com/material-foundation/material-theme-builder/assets/10838153/7292ff8c-b54e-48bc-92ed-6d7187b50845

Overall, I would like MTB to at least add the dark variable mode in Figma for those who want to use it.

Describe alternatives you've considered

Manually converting the local styles / generated variables from MTB to my own custom variable collections, organizations, and groupings. This is a very long process to do manually.

Additional context

Thank you!

Small video showing off my custom MTB -> Figma Variable mappings.

https://github.com/material-foundation/material-theme-builder/assets/10838153/1b2c8625-f96b-4788-9655-5b9fb66aee48

[margeeta]

Hello! Looks like only Palette variables are generating? It should be generating various modes for schemes, including dark and contrast modes. Styles will be the priority for a while, because of mode limits on plans.

We're refining how variables are used as we gather more feedback and additional features are added to Figma variables. Ideally, hoping styles will reference palette variables.

Some additional use case questions:

• Do you mind telling us which plan you are on?
• Do you typically have more than one theme per file? Separating palette and scheme into collections could make swapping themes difficult.
• How often do you use the reference palettes?

[juyrjon]

I get variables generating for dark, but dark contrast variants are missing

[thermochrome]

I get variables generating for dark, but dark contrast variants are missing

if you have a pro subscription, the variable modes max out at 4. its a figma limitation

[margeeta]

You will need an enterprise subscription to utilize all contrast themes through variable modes, they are fully available through styles.

We're refining how variables are used as we gather more feedback and additional features are added to Figma variables. Ideally, hoping styles will reference palette variables.

Closing this ticket, but happy to continue within Discussions.