figma-tailwindcss icon indicating copy to clipboard operation
figma-tailwindcss copied to clipboard

Published 20 hours ago • verified publisher icon jan-dh

Colors not grouped?

Open peteruithoven opened this issue 3 years ago • 3 comments

Description

We have a list of colors that start with the same prefix, but they don't seem to be grouped. Screenshot from 2021-09-23 09-31-24@2x Screenshot from 2021-09-23 09-32-02@2x Screenshot from 2021-09-23 09-31-57@2x

Steps to reproduce

  1. Create a new design file
  2. Create local color presets with names like "Red 100", "Red 200", "Red 300"
  3. Export

Additional info

  • Figma version: Web
  • OS version: elementary OS 5.1.7 Hera (Built on Ubuntu 18.04.6 LTS)

Extra

Design file: Colors test.fig.zip

peteruithoven avatar Sep 23 '21 07:09 peteruithoven

Hi Peter,

the correct syntax for grouping colors under one key in Figma is

red/100
red/200
red/300

They way you define them gives this result in Figma

image

If you define them using the red/100 syntax, you group them and you get the following result:

image

Once colors are grouped that way you can group them using the plugin:

image

jan-dh avatar Sep 23 '21 08:09 jan-dh

Ahhhh. Makes sense! That indeed works. It might be good to clarify that in the documentation for noobs like me. I'm happy to make a suggestion?

peteruithoven avatar Sep 23 '21 10:09 peteruithoven

If you have time for this, be my guest 👍

jan-dh avatar Sep 23 '21 18:09 jan-dh