Hello @Sydric_Turcotte_Drouin,

Welcome to Figma, I hope you like it in here so far.

In short, properties are the various things that define a style.

From your example with colors, when you define a color style you can add “layers” of colors on top of each other (= properties) to create complex pattern (various gradient).

It the same for effect style, it means layers of effects (inner shadow, outer shadow, blur, …). In text it means whatever defined your font (size, weight, spacing, …)

Hope it helped !

It’s perfectly explained! Thanks a lot!

Be aware that such “layered” color styles make the corresponding CSS and export to SVG more complex. Some designers use this to define a color from a transparent hue layered over solid white, for convenience. However, this does not automatically translate into a solid color in CSS.

We used such styles in an icon library where each icon was optimized to a single path, but applying a layered color style to that path resulted in multiple overlapping paths in the exported SVG.

Is there anyway i can export these layered properties as CSS. Let me explain…

I have a set of primitive tokens which contain solid colours with HSL values and also overlays with transparencies. I want to combine a solid primitive token with an overlay token to make a style which is darker than the solid colour i originally had. How do i export this nested structure in CSS? Token studio simply wont import any style with additional properties. And Figma wont entertain any modes (i wanted to create dark/light mode using local variables) when i have these kinds of styles. I dont seem to find a way to achieve this. Please help!