search

mui / mui-design-kits

The public feature and bug tracker for the MUI Design kits and Connect Figma plugin.
https://mui.com/design-kits/
109 stars 16 forks source link

Theme variables for MUI5 differ in Figma compared to what is in the package #373

Closed vargaeric closed 2 weeks ago

vargaeric commented 1 month ago

Steps to reproduce

Picture of Figma:

Screenshot 2024-07-23 at 17 06 39

Official documentation: https://mui.com/material-ui/customization/default-theme/

Steps:

  1. Download the "MUI for Figma v5.0.0 Material Light" in Figma
  2. Install any subversion of the MUI5
  3. Compare the variables

Current behavior

Specific theme variables appear in Figma while others don't.

Theme variables which appear in Figma but does not appear in the implementation:

Screenshot 2024-07-23 at 17 06 39 Screenshot 2024-07-23 at 19 25 56

And there are variables which appear in the implementation but not in Figma:

Screenshot 2024-07-23 at 19 27 24 Screenshot 2024-07-23 at 19 28 16

Expected behavior

The expected behaviour is to have the exact same variables which have the same effect in Figma and in the code implementation.

Context

Specifically, as correctly indicated in the Figma design, the text variant of the button, when the secondary color is applied to it, will have a background color specified in the "Outlined Hover Background". However, in the code itself (and in the official documentation), there is no "outlinedHoverBackground" theme variable in any of the colors. The color applied to the hover state for the text variant button with a secondary color will be the secondary color with the opacity defined in the "palette.action.hoverOpacity" ("Hover Opacity" does not appear among the Figma theme variables).

This is a problem because the UI/UX designers use and define variables that do not even exist in the actual package.

I have tried to manually add variables from Figma (like "outlinedHoverBackground"), but it does not do anything. I checked Material UI 4 to verify if these are deprecated theme variables, but there are no such variables in Material UI 4 (neither in the code nor in the documentation).

Your environment

npx @mui/envinfo The exact version of the code implementation are the following ones: "@mui/icons-material": "5.15.12", "@mui/material": "5.6.2", "@mui/styled-engine-sc": "5.8.0", "@mui/system": "5.9.0",

Search keywords: material-ui, mui, mui5, figma, theme, variables

Search keywords:

adrianmanea commented 1 month ago

Thanks for bringing this to our attention. You're absolutely right. To address this, we've grouped the Figma-exclusive variables into a _states group in our newer versions.

vargaeric commented 1 month ago

@adrianmanea , thank you for your response. However, I would like to ask some additional questions regarding your response (as I am no expert in Figma).

  1. By "Figma-exclusive variables", do you mean variables like the "Contained Hover Background" (which only appear in Figma but not in the package)?
  2. Does this mean that the "Package-exclusive variables" will appear by default in Figma from "newer" versions? Or how can we make them appear in Figma?
  3. Can we make the "Figma-exclusive variables" appear in the theme somehow? If not, it remains a bit of a mystery why someone would create a theme in Figma that is not practically implementable.
  4. And my final question is, by "newer" versions, do you mean MUI package versions equal to or greater than 6.0.0?

For context, our main goal is to have the exact same variables (including their behaviors and the components they affect) as soon as possible. Thank you for your response!

adrianmanea commented 1 month ago
  1. Figma-exclusive variables are only available in Figma and not in the theme API.
  2. Figma and the react APIs are two different environments, not linked.
  3. Figma does not allow to have dynamic variables and logic.
  4. The newest library is at v.16.6 right now.

The newest version is the closest to the APIs and we even have a plugin that will export your theme overwrites for developers! Link: https://www.figma.com/community/plugin/1336346114713490235/material-ui-sync

adrianmanea commented 4 weeks ago

Hi @vargaeric did you manage to solve the issue?