Figma Variables Setup: Building a Variable Library

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

Пікірлер: 16

  • @Underhills
    @Underhills6 ай бұрын

    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.

  • @UICollectiveDesign

    @UICollectiveDesign

    6 ай бұрын

    Thank you! & agreed. Will be releasing a video next week covering Figma's newest variables.

  • @cp3onmtv963
    @cp3onmtv9635 ай бұрын

    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!

  • @UICollectiveDesign

    @UICollectiveDesign

    5 ай бұрын

    All my videos are exported and uploaded at 1080p, except for some when I first started releasing. I'll look into it! Thanks!

  • @jackiet.5156
    @jackiet.51563 ай бұрын

    Tip: shift+enter to duplicate the last added variable

  • @UICollectiveDesign

    @UICollectiveDesign

    3 ай бұрын

    Great tip!!

  • @JaspervanderKamp
    @JaspervanderKamp6 ай бұрын

    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

    @UICollectiveDesign

    6 ай бұрын

    Correct!!

  • @JosephCallanan
    @JosephCallanan2 ай бұрын

    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?

  • @UICollectiveDesign

    @UICollectiveDesign

    2 ай бұрын

    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 :)

  • @roter13
    @roter136 ай бұрын

    Can you use variables to set up a typographic scale? Or even just the H1-H6....

  • @UICollectiveDesign

    @UICollectiveDesign

    6 ай бұрын

    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

  • @irfanali-cr6up
    @irfanali-cr6up6 ай бұрын

    Why we can't skip alias level ?

  • @UICollectiveDesign

    @UICollectiveDesign

    6 ай бұрын

    Check out our 'Guide to Naming & Setup' video

  • @marckremers

    @marckremers

    6 ай бұрын

    @@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.

  • @UICollectiveDesign

    @UICollectiveDesign

    6 ай бұрын

    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