Framer variables are reusable design tokens that store values like colors, fonts, spacing, and numbers in one place. Update a variable once and every element using it updates instantly across your entire site, making large design systems easy to maintain, theme, and scale without manual rework.
What Framer Variables Actually Are
A variable in Framer is a named value you can reference anywhere in your project. Instead of typing a hex code like #0066FF into thirty different buttons, you create a variable called Brand Primary, assign it that color, and apply the variable to each button. When the brand evolves, you change one value and the entire site updates in seconds.
This concept maps directly to design tokens used in production engineering teams at companies like Atlassian, Shopify, and Adobe. Tokens decouple the visual decision from the implementation, letting designers and developers iterate independently. Framer brings that same primitive to no-code, making it accessible to teams that do not have a dedicated design systems engineer.
Variables in Framer support several primitive types: color, number, string, boolean, and font. Each type has specific use cases. Colors handle palette and theming. Numbers drive spacing, radius, and sizing. Strings power text content and link targets. Booleans toggle visibility or feature flags. Fonts manage typography systems across complex sites.
Creating Your First Variable
To create a variable, open the right-hand panel on any element and click the small diamond icon next to a property like fill color or padding. Framer prompts you to either select an existing variable or create a new one. Name variables descriptively using a consistent convention. Brand Primary, Surface Background, and Text Default are far more useful than Color1, Color2, and Color3 six months from now.
Naming Conventions That Scale
Most professional teams use a token hierarchy with three layers. Primitive tokens store raw values like Blue 500 or Gray 100. Semantic tokens map intent to primitives, like Action Primary referencing Blue 500. Component tokens map specific component slots to semantic values, like Button Background referencing Action Primary. This three-layer model lets you reskin entire products by swapping the primitive layer.
For smaller sites this is overkill. A flat structure with a dozen semantic variables covers most marketing sites. Reserve the three-layer model for design systems serving multiple products or extensive theming requirements.
Color Variables and Theme Support
Color variables are the most common starting point. Define your full brand palette once: primary, secondary, accent, neutral scale, success, warning, and error states. Then apply variables instead of raw hex values to every fill, stroke, and text color on the site.
Framer supports light and dark mode variants directly inside variable definitions. Each color variable can hold one value for light and another for dark, and Framer swaps them automatically based on the visitor preference or a toggle you build into the page. This eliminates the manual labor of duplicating every layer for a dark theme.
For brand consistency tips that pair well with token systems, see our design system guide. It covers how to structure components and tokens together for production use.
Number Variables for Spacing and Sizing
Spacing is where variables pay off most dramatically. Define a spacing scale like Space 4, Space 8, Space 12, Space 16, Space 24, Space 32, Space 48, Space 64. Apply these to padding, gaps in stacks, and margins everywhere. Suddenly your spacing rhythm is mathematically consistent without you thinking about it on every layer.
The same applies to border radius. A standard scale of Radius Small, Radius Medium, Radius Large, and Radius Round covers most components. When the brand shifts from sharp corners to soft rounded edges, you change three values and the entire site follows.
Responsive Number Variables
Number variables can hold breakpoint-specific values. Set Section Padding to 96 on desktop, 64 on tablet, and 32 on mobile inside the variable definition. Every section using that variable adapts automatically without per-breakpoint overrides at the element level. Pair this with our framer breakpoints guide for a deeper dive on responsive systems.
String and Boolean Variables
String variables store text values you reuse across the site. Company name, support email, current product version, and copyright year are classic examples. Update the variable when something changes and every reference updates with it. No more grepping the entire site for the old year in a footer.
Boolean variables work well for feature flags. Set Show Promo Banner to true and a hidden banner appears across the site. Toggle it off and it disappears everywhere. This is useful for seasonal promotions, beta announcements, or any element you want to show site-wide on a schedule without editing each page.
Font Variables for Typography Systems
Font variables let you swap entire typeface families across the site. Define Heading Font and Body Font as variables. Apply them to your text styles. To rebrand the typography, change the variable assignment from Inter to a new typeface, and every heading and paragraph adopts the new face without touching each text layer.
This is particularly valuable for agencies managing multiple client sites with similar layouts but different brand identities. Build the layout once, swap font variables per client, and you have ten branded sites from one structural base.
Using Variables With Components
Variables shine inside component design. Build a button component with fill, text color, padding, and radius all driven by variables. The component becomes a true design system primitive: anyone on the team can drop it in and it inherits brand decisions automatically. For more on building components, our framer components guide walks through the full process.
Pair variables with component properties for maximum flexibility. The component property controls which variant ships, while the variable controls the underlying token values. A Primary button uses Brand Primary as its fill. A Secondary uses Surface Subtle. Both reference the same variable scheme, so brand changes propagate to every variant simultaneously.
Workflow Tips From Production Sites
Start small. Defining a hundred variables upfront slows you down and most will go unused. Begin with core colors, a spacing scale of six to eight values, and two or three fonts. Add variables as patterns repeat across the design. If you find yourself typing the same value three times, promote it to a variable.
Document variables outside Framer for larger teams. A simple Notion page or Figma file mapping variable names to use cases helps onboard new contributors and keeps decisions defensible. If your team is comparing platforms before committing, our framer vs webflow comparison covers how each platform handles tokens.
Audit and Cleanup
Once a quarter, audit the variables panel. Delete unused variables, consolidate near-duplicates, and rename anything that drifted from your convention. A clean token system is a maintainable token system. For agency teams managing multiple sites, see our agency services for ongoing support models.
Common Mistakes to Avoid
The most common mistake is naming variables by appearance rather than intent. Blue Button breaks the moment the brand shifts to green. Action Primary survives any color change because the name describes purpose, not pigment. Always name by role.
The second mistake is creating variables for one-off values. If a color appears once on the site, a variable adds maintenance overhead with no benefit. Variables are for values that repeat or values you expect to evolve.
The third mistake is forgetting to apply variables retroactively after creating them. New variables only take effect where you apply them. After defining a token, search the project for hard-coded values matching that token and replace them systematically.
Frequently Asked Questions
Can I import variables from Figma?
Framer does not currently import Figma variables directly, but you can replicate them by hand. Most teams treat the Figma library as the source of truth and mirror token names in Framer, keeping the two in sync manually during major updates.
Do variables work in CMS collections?
Yes. Variables apply to any property anywhere in Framer, including layouts rendered from CMS data. A blog post template can reference Brand Primary for accent colors, and every published post inherits that brand identity automatically.
Are there limits on the number of variables?
Framer does not publish a hard limit, and real-world projects with two to three hundred variables run smoothly. Performance is fine even at scale, though manageability suffers past a few hundred. Keep the system lean.
Can variables reference other variables?
Not directly today. You assign primitive values to variables but cannot point one variable at another. To approximate aliasing, manually update related variables together or build component-level abstractions that reference shared semantic tokens.
How do variables affect site performance?
Variables compile to CSS custom properties at publish time, which browsers handle efficiently. There is no measurable performance penalty for using variables versus hard-coded values, and theming with custom properties is faster than re-rendering layers.