16 / A designer's intro to JavaScript variables

Welcome to Issue 16!

If you’ve ever built a design system in Figma, then you’re already familiar with one of the most important concepts in JavaScript: variables.

Think about how often you’ve defined a primary brand color or a type token. Maybe you’ve got something like this:

You use that token everywhere, and then when the brand team inevitably rolls out a new identity, you just update it once and everything follows. That’s the magic of variables, one source of truth applied across your whole system.

JavaScript works the same way, the only difference is how they define them, which is like so:

let brandPrimary = "#FF5200";

They’re doing exactly what we did in Figma, they’re storing a value, like a color, size, or piece of text, that can be reused throughout their codebase.

Here’s where it gets interesting. In Figma, your variable persists. You can close your file, come back tomorrow, and it’s still there. However, with JavaScript, variables only live while the code is running. Refresh the page, and they reset to their original state. So while your design tokens live comfortably in the cloud, JavaScript variables exist only in the moment, like a prototype running live on your canvas.

And just like in Figma, you can change a variable’s value. Imagine a prototype where a click switches a color, like this:

Behind the scenes, Figma is updating the variable based on the interaction.

In JavaScript, you would write set your variable to a new hex code to update its value:

brandPrimary = "#FFD3BE";

But what if you don’t want a variable to change? In JavaScript, developers use constant variables to create variables that can’t be reassigned:

const anImmutableFact = "Technically Lit is the bee's knees.";

Figma doesn’t have this concept built in, but it’s a lot like locking a layer. You’re saying, “This value matters. Don’t touch it.”

All of this points to something exciting. The gap between design tools and development is shrinking fast. Design systems and component libraries have pulled our worlds closer, and understanding the parallels helps us start thinking more like developers.

So next time you’re tweaking your tokens, remember that you’re already thinking in code. You’re defining values, setting conditions, and maintaining systems of logic.

Let’s get Technically Lit,

Nick

Fresh content

A little something different

I appreciated these abstract illustrations.