Figma Variables Setup: Building a Variable Library
HTML-код
- Опубликовано: 14 июн 2024
- Unlock the secrets to Figma variable mastery in this tutorial on setting up your @Figma variable library. *Please note that this is meant to serve as a foundation. All library needs are different.
Part 2: • Figma Variables: Build...
Build a community profile + join the community: www.uicollective.co/
Resource library: resources.uicollective.co/
Request a design system audit: www.uicollective.co/design-sy...
Download the Figma Variable starter kit mentioned: resources.uicollective.co/che...
Our Figma Plugin: www.figma.com/community/plugi...
Token/variable naming video: • Master Figma Tokens & ...
0:00 An Introduction
0:49 Spacing Variables
3:01 Radius Variables
4:40 Brand Colors
14:48 Alias Colors
24:09 Mapped Text Colors
28:28 Mapped Icon Colors
29:36 Mapped Surface Colors
37:09 Mapped Border Colors
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!
All my videos are exported and uploaded at 1080p, except for some when I first started releasing. I'll look into it! Thanks!
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! & agreed. Will be releasing a video next week covering Figma's newest variables.
Tip: shift+enter to duplicate the last added variable
Great tip!!
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'?
Correct!!
Can you use variables to set up a typographic scale? Or even just the H1-H6....
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
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 :)
Why we can't skip alias level ?
Check out our 'Guide to Naming & Setup' video
@@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.
My bad bro! Maybe I removed it by accident... not sure why it wasn't there. Thanks for calling it out! Just added it@@marckremers