Variables

Variables in Pencil work like CSS custom properties or design tokens. You define colors, spacing, and typography values once, use them throughout your designs, and when you change a variable it updates everywhere instantly. They also stay in sync with your codebase, so designers and developers always share the same source of truth.

Creating Variables

There are three ways to bring variables into Pencil:

From CSS

Pencil's AI can extract variables directly from your globals.css file. Point it at your stylesheet and it will parse every custom property into a ready-to-use variable, preserving names and values exactly as they appear in code.

From Figma

If your team maintains design tokens in Figma, you can copy and paste them straight into Pencil. The token names, values, and groupings are preserved so your design-system vocabulary stays consistent across tools.

Manual

You can also define variables directly inside Pencil. Give each variable a name, choose its type (color, spacing, font size, etc.), and set a value. Manual variables are useful for one-off tokens or quick prototyping before syncing with code.

Using Variables

Instead of hard-coding hex colors or pixel values, apply a variable to any property on any element. When the variable's value changes, every element that references it updates automatically. This eliminates find-and-replace workflows and guarantees visual consistency across your entire design.

Syncing with Code

Variables support a full two-way workflow between Pencil and your codebase. Update a variable in Pencil and sync the change out to your CSS. Or update a custom property in your CSS and import it back into Pencil. Either direction keeps both sides in perfect alignment, so designers and developers never drift out of sync.

Theming

Variables can hold different values per theme. Define one set of values for your light theme and another for your dark theme, then switch between themes to see your designs adapt in real time. This makes it easy to verify contrast, readability, and overall aesthetics across every appearance mode your product supports.

Last updated: February 22, 2026