How to structure colours initially in a design system? In this lesson I show how to turn raw hex colours into reusable variables in Figma. We scale a colour using OKLCH, create foundation colour tokens, then add semantic tokens for a any ui element. This is the first step to building a colour system that scales and works better with developers. This is a continuation serie of “Figma Variables From ZERO” full tutorial on YouTube. Follow @zerotoui for more!

Figma variables are so fun to work with as a product designer. I did a live tutorial yesterday where I put all of this together in a figma design tutorial. Now I’m going to get into figma components live as well! #figmadesign #figma #figmatutorial

Figma Variables Tutorial (Beginner to Pro)