Great share. I notice you are using lowercase for all variable labeling in the variable panel, also for the top level category name such as dropshadow. But for the section label you use Sentence case, such as Brand for instance. I also see you separate some labels with transcending from lowercase to capitalized letter, like the width of a border with the subcategory label borderWidth. Is this in line with how developers write? So when a developer inspect the code view in a UI prototype where variables are used, they will see a way of labeling that match their code world? Any best practice here?
It depends on the dev team honestly. Always check with your devs as you go. I've seen a ton of cases where designers will build out an entire library only for it to conflict with their devs. Good catch on Brand being uppercase... this should be consistent with everything else :)
I generally follow a grid system and scale up accordingly. Your tokens can be any scale, as long as they follow a grid, ex, Don't have a 5 if you're using a 2px grid.
Very helpful as always :D I have a question for you. I have a project named X where there is a design system file and a mobile app file. I duplicated the project and want to make a similar app keeping the same variables etc. only after duplicating the project, in the variabels mobile app file it doesn't link to the new design system only to the old one. Is there any way to quickly link variables to the new design system? I was able to do it by swapping each color, pointing it to the new DS location, but it's time-consuming. Let me know if you understood me haha :D
thanks. when it comes to border none (0), what's the point of having a container that has only a fill but no border. Adding a stroke to then assign it a 0 seems unnecessary but perhaps there would be a reason for it. I am thinking of all components that have a fill but no border and going through that process to return a 0.
A couple reasons... 1. Consistency/best practice... always use variables when you can 2. Prototyping & conditional logic.. ex: remove border or add border based on different states You're right that it's not critical, but it's more best practice than anything else.
Thank you for sharing amazing contents. I’m trying to set color variables however those styles I already set, are not showing in variable tab. Could you please help me solving this issue?
@@UICollectiveDesign thanks. I guess what confused me was that I normally use t-shirt sizing for alias tokens, for global ones I just put the values. What's the advantage of using t-shirt sizing for globals too? I'm sure I'm missing something
@@yamilafritzler1224 using 100 scale for globals is fine. Just the approach I chose in this example... probably for simplicity. No advantage to t-shirt sizing.
Nice and Awesome Content. It’s really Great.
Thank you so much 😀 Please subscribe and share our channel!
Great share. I notice you are using lowercase for all variable labeling in the variable panel, also for the top level category name such as dropshadow. But for the section label you use Sentence case, such as Brand for instance. I also see you separate some labels with transcending from lowercase to capitalized letter, like the width of a border with the subcategory label borderWidth. Is this in line with how developers write? So when a developer inspect the code view in a UI prototype where variables are used, they will see a way of labeling that match their code world? Any best practice here?
It depends on the dev team honestly. Always check with your devs as you go. I've seen a ton of cases where designers will build out an entire library only for it to conflict with their devs.
Good catch on Brand being uppercase... this should be consistent with everything else :)
Is there any design rules that i can look into, where do you get the value numbers for the tokens?
I generally follow a grid system and scale up accordingly. Your tokens can be any scale, as long as they follow a grid, ex, Don't have a 5 if you're using a 2px grid.
Very helpful as always :D I have a question for you. I have a project named X where there is a design system file and a mobile app file. I duplicated the project and want to make a similar app keeping the same variables etc. only after duplicating the project, in the variabels mobile app file it doesn't link to the new design system only to the old one. Is there any way to quickly link variables to the new design system? I was able to do it by swapping each color, pointing it to the new DS location, but it's time-consuming. Let me know if you understood me haha :D
Try downloading the file locally, and re-uploading, this could work I think :) Sorry for the delay in response!
Thanks, but it unfortunately doesn't work :(@@UICollectiveDesign
Hmmm.. maybe message me in our Slack community and I can help you troubleshoot@@krzysztofk6796
thanks. when it comes to border none (0), what's the point of having a container that has only a fill but no border. Adding a stroke to then assign it a 0 seems unnecessary but perhaps there would be a reason for it. I am thinking of all components that have a fill but no border and going through that process to return a 0.
A couple reasons...
1. Consistency/best practice... always use variables when you can
2. Prototyping & conditional logic.. ex: remove border or add border based on different states
You're right that it's not critical, but it's more best practice than anything else.
You could have shown how to constrain these variables to effects and borders in the variable properties
Great call out! Apologies I missed that. Have some other vids on it but just overlooked that here.
Thank you for sharing amazing contents. I’m trying to set color variables however those styles I already set, are not showing in variable tab. Could you please help me solving this issue?
Styles are separate from variables. You need to recreate your styles into variables :)
Why don't we use Plugin (Pretty Shadows) instead of this?
Never tried the plugin! Can check it out though. This vid is just reviewing the changes at this time :)
is "brand" the same as "global"?
You got it!!
@@UICollectiveDesign thanks. I guess what confused me was that I normally use t-shirt sizing for alias tokens, for global ones I just put the values. What's the advantage of using t-shirt sizing for globals too? I'm sure I'm missing something
@@yamilafritzler1224 using 100 scale for globals is fine. Just the approach I chose in this example... probably for simplicity. No advantage to t-shirt sizing.
I don’t understand why is this useful, do you have a video where you show real world usage of variables?
Plenty. This is for users who are building out a design system.