material-theme-builder icon indicating copy to clipboard operation
material-theme-builder copied to clipboard

Secondary color creating incorrect chroma and tone in Figma

Open Innders opened this issue 1 year ago • 1 comments

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:

  • OS: MacOS
  • Browser: Chrome
  • Version 115.0.5790.114 (Official Build) (arm64)

Innders avatar Jul 28 '23 14:07 Innders

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.

Innders avatar Jul 31 '23 10:07 Innders