This tutorial is for you if you also find 4 variable modes quite limiting (especially if you have several styles and light/dark theme variants) and would like to learn how to use multiple variable collections as a workaround ✨
I'm curious about managing more than 4 brands/styles... would you use a collection by brand with their light and dark modes, in case you have more than 4 brands/styles, to avoid paying the 4 modes limit without an Enterprise account? ... 🤔
Do you think that i can implement this method at scale for multiple components? I think it'll eliminate a lot of components. But it'll also introduce complexity to the Design system and might make it bloated. For context- I'm in middle of creating a Design system for an AI SAAS project.
hi there! It is definitely scalable (even though it requires some learning curve for maintainers, but for consumers it’s a super sleek experience). Ultimately though, it depends on how many themes/modes you have and the complexity of components themselves. If components are structurally the same, then doing this process with variables is okay. If components are structurally different, then it’s better to just keep them as separate components.
Hi Stephanie, absolutely! You can publish variables the same way as styles and components: help.figma.com/hc/en-us/articles/360025508373-Publish-a-library#publish
Hey masha , just dropping a random question. I always get stuck while deciding the spacing between elements. I always try to follow 4 pt /8 pt . But some times i get confused about the distance between search icon and placeholder text in a search field. Can you share something about how you decide spacing or maybe you can upload a video on how you would trace a screenshot of a popular app?
hey! I definitely agree about following 4pt/8pt (usually 4pt horizontally and 8pt vertically), but I think for some one-off elements (like search field icon + placeholder text) it's okay to go for something smaller like 2pt, if that looks better. You can also consider adopting a proportional spacing scale that starts with 2pt increments and then increases to 4pt as values get larger (for example - tailwindcss.com/docs/theme#spacing) And thank you for suggestion 🙏
This tutorial is for you if you also find 4 variable modes quite limiting (especially if you have several styles and light/dark theme variants) and would like to learn how to use multiple variable collections as a workaround ✨
I'm curious about managing more than 4 brands/styles... would you use a collection by brand with their light and dark modes, in case you have more than 4 brands/styles, to avoid paying the 4 modes limit without an Enterprise account? ... 🤔
I know you can't switch collections for now, but there are plugins to do it and change more than 4 brands in that way :)
This lesson is best lesson about figma variables and theme mode until now what i see, thank you very much
thank you :)
Seeing it at the right time. Thankyou💜
🙌sweet, you're welcome!
I love the number scoping ⭐
me too. that and hiding variables 🙏
Do you think that i can implement this method at scale for multiple components?
I think it'll eliminate a lot of components. But it'll also introduce complexity to the Design system and might make it bloated.
For context- I'm in middle of creating a Design system for an AI SAAS project.
hi there! It is definitely scalable (even though it requires some learning curve for maintainers, but for consumers it’s a super sleek experience).
Ultimately though, it depends on how many themes/modes you have and the complexity of components themselves.
If components are structurally the same, then doing this process with variables is okay. If components are structurally different, then it’s better to just keep them as separate components.
Can this local variables be published and shared across all files? This way, when you work on a new file, you don’t have to set up everything again.
Hi Stephanie, absolutely! You can publish variables the same way as styles and components: help.figma.com/hc/en-us/articles/360025508373-Publish-a-library#publish
Hey masha , just dropping a random question. I always get stuck while deciding the spacing between elements. I always try to follow 4 pt /8 pt . But some times i get confused about the distance between search icon and placeholder text in a search field.
Can you share something about how you decide spacing or maybe you can upload a video on how you would trace a screenshot of a popular app?
hey! I definitely agree about following 4pt/8pt (usually 4pt horizontally and 8pt vertically), but I think for some one-off elements (like search field icon + placeholder text) it's okay to go for something smaller like 2pt, if that looks better.
You can also consider adopting a proportional spacing scale that starts with 2pt increments and then increases to 4pt as values get larger (for example - tailwindcss.com/docs/theme#spacing)
And thank you for suggestion 🙏
@@mash312 Thankkkkyou☺