Skip to main content
Question

Properties in color style


Hey guys, new here!
I have a question, I’m looking for the answer and can’tr find it.

What are properties used for in a color style? Everyone talks about how to create color styles, but nobody explains properties. I wonder if that’s important to know.

I used to design on Xd and this function didn’t exist, so I don’t have a reference point.

Thanks for your help!

This topic has been closed for replies.

4 replies

Haroll
  • Active Member
  • 273 replies
  • June 28, 2023

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!


Jonathan_Roy

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.


Karthik_Chandapur

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!


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings