I am truly grateful for the thoughtfulness and creativity you exhibit in your approach to utilizing variables. Your dedication time, and effort are truly appreciated. Thank you.
Your content is really really high quality. Your channel is truly underrated! Please keep creating high quality content like this. I will help to promote you through my socials! 💪🏻
@pixellink This is so great! I’ll give this a try. Do you also have an example for how variables support theme color changes? I need to support dark, light, and white label brand variables.
I do have multiple brand support, I will have a lot of new videos coming out on the design system and multiple brands soon. If you are interested in a chat feel free to reach out to me on LinkedIn Matthew Sear
This is awesome. am trying to see how I can incorporate this within my primitives/semantic/component structure, but I don't see how. Do you only use this method for shadows as a separate collection and using the other collections for the rest of the variables?
I would incorporate shadow colors at the appropriate level based on the system's needs. For each layer of your design variables, consider what changes and how that layer affects shadow values. - Will your shadow effect values adjust per component? - Will they adjust per application of thematic values? The video covers various possibilities for setting up effects using design variables. Depending on your system, I recommend understanding what changes are necessary and then identifying the specific layer where your effect values should be contained. Hope this helps ☺️
Is there a way to set the opacity if your token is aliasing from a primitive? Figma doesn’t seem to have set this feature up to jive with how teams often use color tokens.
Thank you @pixellink. For me, it’s way too much. I have to keep speed in creativity and production. If I want absolutely export the shadow code with other variables, I will just paste in a string variable, the CSS code.
Hey there, thanks for reaching out. I totally get where you're coming from with the need for speed in creativity and production. In my approach, I'm all about crafting elements that are not just reusable but also highly customizable. This way, they can seamlessly integrate across various applications. Take a shadow effect, for instance. My strategy would be to implement one versatile shadow effect that can be universally applied to any element. This creates a consistent style baseline. Then, I'd fine-tune a few key characteristics within that shadow effect to suit specific needs, without the hassle of starting from scratch for each new design. This method saves time and keeps the creative process fluid form me. Essentially, it's about building one solid effect and then adapting that framework to enhance all my designs. Hope this helps! thanks Rodnem
Why is this better than saved effect styles. Seems like a very long-winded way of doing something quite straight forward. Wanted to understand this, but I can't see any use for it.
I agree with this statement. I just wish they would make shadows a new property to the big 4: color, number, strong, boolean... they need an additional one for these complex instances in my opinion. I'll stick to effect styles and document it easily for my dev team until that's implemented. This video is cool and it shows that it IS possible if you want to which is always appreciated regardless.
This is WAY more complicated and confusing that setting up Effects. Also racking my brain trying to workout how this would work with DS's that have dark themes. Granted, drop shadows in dark themes are often discouraged, but if done correctly, they add a lot to a UI.
By adding layered color variables to your shadow effect, you can achieve a dark and light mode, by switching the colour variables that are linked into the shadow effect. Although it may seem more complex, this technique demonstrates the power of variables and what is possible. you can keep it simple or you can make a super customizable effect.
when designing huge projects you may have hundreds of component variations. while setting variables allows me to make a figma file far less processor-intensive since changing some numbers is prefirable than swaping instances all the time, for example, an icon-action may change the entire card elevation/shadow by hovering-it
I am truly grateful for the thoughtfulness and creativity you exhibit in your approach to utilizing variables. Your dedication time, and effort are truly appreciated. Thank you.
Thank you, very cool tutor! Waiting for the continue 😊
Your content is really really high quality. Your channel is truly underrated!
Please keep creating high quality content like this. I will help to promote you through my socials! 💪🏻
Thankyou for your support, it really means the world.
If there is anything I can do to support you let me always I'll be happy to help!
@pixellink This is so great! I’ll give this a try.
Do you also have an example for how variables support theme color changes? I need to support dark, light, and white label brand variables.
I do have multiple brand support, I will have a lot of new videos coming out on the design system and multiple brands soon. If you are interested in a chat feel free to reach out to me on LinkedIn Matthew Sear
This is awesome. am trying to see how I can incorporate this within my primitives/semantic/component structure, but I don't see how. Do you only use this method for shadows as a separate collection and using the other collections for the rest of the variables?
I would incorporate shadow colors at the appropriate level based on the system's needs.
For each layer of your design variables, consider what changes and how that layer affects shadow values.
- Will your shadow effect values adjust per component?
- Will they adjust per application of thematic values?
The video covers various possibilities for setting up effects using design variables. Depending on your system, I recommend understanding what changes are necessary and then identifying the specific layer where your effect values should be contained.
Hope this helps ☺️
Is there a way to set the opacity if your token is aliasing from a primitive? Figma doesn’t seem to have set this feature up to jive with how teams often use color tokens.
Not yet 😢
I have come up with a workaround that will allow this to happen. I can make a vidioe on this workaround if you are interested?
Thank you @pixellink.
For me, it’s way too much. I have to keep speed in creativity and production. If I want absolutely export the shadow code with other variables, I will just paste in a string variable, the CSS code.
Hey there, thanks for reaching out. I totally get where you're coming from with the need for speed in creativity and production. In my approach, I'm all about crafting elements that are not just reusable but also highly customizable.
This way, they can seamlessly integrate across various applications. Take a shadow effect, for instance. My strategy would be to implement one versatile shadow effect that can be universally applied to any element. This creates a consistent style baseline. Then, I'd fine-tune a few key characteristics within that shadow effect to suit specific needs, without the hassle of starting from scratch for each new design.
This method saves time and keeps the creative process fluid form me. Essentially, it's about building one solid effect and then adapting that framework to enhance all my designs. Hope this helps!
thanks Rodnem
Why is this better than saved effect styles. Seems like a very long-winded way of doing something quite straight forward.
Wanted to understand this, but I can't see any use for it.
I agree with this statement. I just wish they would make shadows a new property to the big 4: color, number, strong, boolean... they need an additional one for these complex instances in my opinion. I'll stick to effect styles and document it easily for my dev team until that's implemented. This video is cool and it shows that it IS possible if you want to which is always appreciated regardless.
This is WAY more complicated and confusing that setting up Effects. Also racking my brain trying to workout how this would work with DS's that have dark themes. Granted, drop shadows in dark themes are often discouraged, but if done correctly, they add a lot to a UI.
By adding layered color variables to your shadow effect, you can achieve a dark and light mode, by switching the colour variables that are linked into the shadow effect. Although it may seem more complex, this technique demonstrates the power of variables and what is possible. you can keep it simple or you can make a super customizable effect.
when designing huge projects you may have hundreds of component variations.
while setting variables allows me to make a figma file far less processor-intensive since changing some numbers is prefirable than swaping instances all the time, for example, an icon-action may change the entire card elevation/shadow by hovering-it