Thank you so much 😀 Please subscribe and share our channel!
@DanCastellon
9 ай бұрын
You could have shown how to constrain these variables to effects and borders in the variable properties
@UICollectiveDesign
9 ай бұрын
Great call out! Apologies I missed that. Have some other vids on it but just overlooked that here.
@thebrutalbiker3349
3 ай бұрын
Why don't we use Plugin (Pretty Shadows) instead of this?
@UICollectiveDesign
3 ай бұрын
Never tried the plugin! Can check it out though. This vid is just reviewing the changes at this time :)
@Underhills
9 ай бұрын
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?
@UICollectiveDesign
9 ай бұрын
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 :)
@amenesty999
7 ай бұрын
Is there any design rules that i can look into, where do you get the value numbers for the tokens?
@UICollectiveDesign
7 ай бұрын
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.
@krzysztofk6796
9 ай бұрын
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
@UICollectiveDesign
9 ай бұрын
Try downloading the file locally, and re-uploading, this could work I think :) Sorry for the delay in response!
@krzysztofk6796
8 ай бұрын
Thanks, but it unfortunately doesn't work :(@@UICollectiveDesign
@UICollectiveDesign
8 ай бұрын
Hmmm.. maybe message me in our Slack community and I can help you troubleshoot@@krzysztofk6796
@shibly95
9 ай бұрын
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
9 ай бұрын
Styles are separate from variables. You need to recreate your styles into variables :)
@AdrianRosarioPR
9 ай бұрын
I don’t understand why is this useful, do you have a video where you show real world usage of variables?
@UICollectiveDesign
9 ай бұрын
Plenty. This is for users who are building out a design system.
@yamilafritzler1224
3 ай бұрын
is "brand" the same as "global"?
@UICollectiveDesign
3 ай бұрын
You got it!!
@yamilafritzler1224
3 ай бұрын
@@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
@UICollectiveDesign
3 ай бұрын
@@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.
@mrair8259
9 ай бұрын
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.
@UICollectiveDesign
9 ай бұрын
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.
Пікірлер: 24