This content is so valuable, thank you! I have to point out that your uploads are low resolution visually though. Despite me choosing 1080p, your screen still looks fuzzy. It could be an upload issue or the screen recorder you're using isnt high res, it's just something for you to look into!
Great share as always. Hope gradients and not just solid colors will be supported as variables soon. And not to forget type variants. Also, as this video clearly demonstrates, Figma should add some of that Adobe floating palette magic to the UI. Would be nice to able to collapse, dock and build custom sidebars etc. Perhaps it happens when the Adobe deal get's formalized.
Thank you for your good explanations, the question that came to me is, shouldn't we add titles like "text" "icon" "surface" "border" in the subgroup of titles like "Button" "Input" "Toast" under each one? Where do you see components like buttons, input, toast, etc.?
You want to avoid component level tokens. This can cause a library with a ton of tokens, and you'd have to adjust them manually. Components should be consistent in sharing the same tokens.
First of all, extremely valuable content on your channel. Thanks for the efforts! My problem: I have 3 buttons stacked side-by-side to each other, where the centre button has 'none' round edges, but the left button has full roundness only on the left two corners, and the right button has full roundness on the right. How would your approach be here? Thanks!
Thanks for the kind words :) Please subscribe and share our channel where you can. When you ask how to approach, can you elaborate on what you're looking for? Sorry I can interpret that question a number of different ways here.
Good video! What about the spacing and radius values, are they only in the 'Brand' collection? So in short, only the colors will be in 'Alias' and 'Mapped'?
@@UICollectiveDesign Ok so i did the following. I have 3 figma files (Root, Alias, Mappings) and i have the system you explained in each one of these files, so they are nested. In mappings, i created a collection for Colors, one for Font and a last one for the spacings. In spacings collection, i have all the different container types (button, cards, input, ...) with variables such as PaddingTop, Gaps, Radius, ... linked to the spacing aliases. And the "Mappings" file, having all the tokens, styles, effects etc... is published as a library for my main design system file. Is that a good setup ?
Hey if i created local color variables in a library file, is it possible to sync/access those color variables in another file in the same project? How would i go about doing this?
Publish the file, and then subscribe to it. In the top bar, hit the arrow next to the file name, and then publish. Then, in another file, hit File>Libraries, and toggle on the library you want :)
Not yet. This is still done in Tokens Studio and managed via styles. Check out our Text Variables video for a better explanation as how variables works with type
@@UICollectiveDesign but yo, maybe i'm being thicc, but you mention a link about variable naming at the beginning (2nd chapter) but I can't see it. Maybe this is it (found via comment diving though) so maybe add this explicitly in the description? And if you did and I missed it, my bad.
