search

material-foundation / material-theme-builder

Visualize dynamic color and create a custom Material Theme.
https://material-foundation.github.io/material-theme-builder/
Apache License 2.0
419 stars 30 forks source link

Secondary color creating incorrect chroma and tone in Figma #198

Open Innders opened 1 year ago

Innders commented 1 year ago

Describe the bug When setting the secondary color in Figma the resulting tones and chroma are the same as the primary.

To Reproduce Steps to reproduce the behavior:

  1. Start with baseline (correct)
  2. Set a secondary color to anything (even keep exactly the same) and it will break.

Expected behavior The secondary color styles should be a different tone and chroma to the primary styles. In the online theme builder it is correct.

Screenshots image image

Desktop:

Innders commented 1 year ago

Interestingly when exporting the theme, the colors for the secondary color are correct.

So it seems the issue is in the updating of the Figma styles.

Current workaround

  1. Set your Primary, Secondary, Tertiary, etc. in the Figma Theme Builder plugin. You will see the Secondary style set incorrect.
  2. Export them as Theme File (JSON)
  3. Import Theme File (JSON)
  4. Click on Primary colour to the open the Color Picker and then hit "Apply". This will force update the figma styles to the new uploaded theme.
  5. Never click "Apply" on the Secondary colour picker. Otherwise the styles will be updated incorrectly.