Jun 5, 1:15 – 2:45 AM (UTC)
Bring your laptop and a desire to learn for a 1 hour Figma lesson led by Senior UX Designer, Annemarie Weiner (ex-US Bank, ex-Walmart). Discover how color variables and tokens can help scale your design system (and encourage exploration). This workshop is geared to beginner/intermediate Figma users.
‼️ Important Note‼️ This lesson will include the use of some paid features, so please come with a paid plan or the understanding that you might not be able to follow along for some parts.
Create a color palette: I'll have a color palette available, or people can use their own
Build base variables: Create a base variable for each color
Create semantic tokens: Base variables get assigned semantic values to make them easier to apply to components
Update components: Apply color tokens to design system components
Create light and dark modes: Create a dark mode to see how much easier it is to theme/update components
______________________________________________________________________________________________
Resources for the lesson (duplicate these files to your drafts in order to be able to edit them) ⬇️
"Blank" Workbook File (you'll create variables, tokens, and themes here): https://www.figma.com/design/uX0p3xuSeUOAAp0NU4hcVN/Color-Tokens--%22Blank%22-Workbook-?node-id=1-4&t=Yv6y3awW326VSRUw-1
Reference File (variable, token, and themes already built. the "answer sheet"): https://www.figma.com/design/e6Pzu6wbDwEdp9hTbo8GPI/Color-Tokens--Reference-?node-id=1-4&t=6LVJEZEqeLsN9jww-1
Thursday, June 5, 2025
1:15 AM – 2:45 AM (UTC)
Contact Us
