Summary
Keywords
Full Transcript
Unlock the secrets to @Figma token and Figma variable mastery in this tutorial on naming conventions associated with different variable collections, and then how to setup these tokens in @TokensStudio and then sync with Figma variables. 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 Our Figma Plugin: https://www.figma.com/community/plugin/1301974711562028600/design-system-tracker 0:00 An Introduction 0:51 Brand, Alias, Mapped Collection Intro 2:13 The Relationship Between Collections 4:53 Brand Variable Naming Conventions 9:07 Alias Variable Naming Conventions 11:42 Mapped Variable Naming Conventions 15:00 Setting Up Color Chart 17:33 Initiating Brand Themes 22:24 Initiating Alias Themes 25:59 Initiating Mapped Collection 28:29 Syncing Tokens with Variables 30:40 Building a Component with Variables #figma #uxdesign #uidesign
