Figma Variables Setup: Building a Variable Library
18.9K views · 2023-12-07
UI Design
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: https://youtu.be/HjRsJg74yaU
Build a community profile + join the community: https://www.uicollective.co/
NEW - Purchase our official design system: https://collectivekit.co/
We build design systems: https://designsystemlabs.co/
Resources: https://uicollective.co/designer-tools-and-resources
Download the Figma Variable starter kit mentioned: https://resources.uicollective.co/checkout/buy/8af4ef2d-1632-4e8e-880b-f5f27ca1b9af
Our Figma Plugin: https://www.figma.com/community/plugin/1301974711562028600/design-system-tracker
Token/variable naming video: https://www.youtube.com/watch?v=WATzIK0Ai8I&feature=youtu.be
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
#figma #uxdesign #uidesign
Part 2: https://youtu.be/HjRsJg74yaU
Build a community profile + join the community: https://www.uicollective.co/
NEW - Purchase our official design system: https://collectivekit.co/
We build design systems: https://designsystemlabs.co/
Resources: https://uicollective.co/designer-tools-and-resources
Download the Figma Variable starter kit mentioned: https://resources.uicollective.co/checkout/buy/8af4ef2d-1632-4e8e-880b-f5f27ca1b9af
Our Figma Plugin: https://www.figma.com/community/plugin/1301974711562028600/design-system-tracker
Token/variable naming video: https://www.youtube.com/watch?v=WATzIK0Ai8I&feature=youtu.be
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
#figma #uxdesign #uidesign