---
title: "Variable (Design token for Framer) · Best of Framer"
description: "Free Framer plugin · by Iklil Najma Muqtafa · Styles. Design Tokens & Variables"
canonical: "https://framer.elliotli.dev/plugin/variable-design-token-for-framer"
---

[Home](/)/[Plugins](/plugins)/[Styles](/plugins/category/styles)/Variable (Design token for Framer)

# Variable (Design token for Framer)

Design Tokens & Variables

[View on Framer](https://framer.com/marketplace/plugins/variable-design-token-for-framer/?via=elliot-li)

![Variable (Design token for Framer) preview image 1](https://framer.elliotli.dev/og/plugin/variable-design-token-for-framer/eda06f912d5f53ed/1600x1200.jpg)

## Summary

Design Tokens & Variables

## Description

**Variable — Design Token for Framer**

A Framer plugin to manage design tokens directly from the canvas. Create, organize, and bind tokens to elements with real-time updates.

**Key Features**

**1\. Variables & Data Types**

-   **11 Types:** Color, Number, String, Boolean, Dropdown, Typography, Spacing, Sizing, Radius, BorderWidth, Opacity.
    
-   **Aliases & Math:** Reference tokens ({path/to/token}) or perform calculations ({spacing/md} \* 2).
    
-   **Scopes:** Restrict variables to specific properties.
    

**2\. Collections & Multi-Mode**

-   **Modes:** Support Light/Dark, Desktop/Mobile, etc., with per-mode values.
    
-   **Breakpoint Auto-Switch:** Switches modes automatically based on frame width.
    

**3\. Canvas Binding**

Bind variables directly to Framer element properties:

-   **Layout & Spacing:** Padding, Gap, Grid, Width/Height, Min/Max size, Overflow.
    
-   **Visual Style:** Fill, Border (Width, Color, Radius per-side), Opacity, Z-Index, Visibility, Stack Direction, Wrap.
    
-   **Typography:** Font Family, Size, Weight, Line Height, Letter/Paragraph Spacing, Text Color, Alignment, Truncation, Transform.
    

**4\. Import / Export**

-   **Import:** W3C DTCG (.json), Figma Tokens (.tokens.json), Custom JSON.
    
-   **Export:** JSON, W3C DTCG (.w3c.json), and AI Design System Prompts.
    

**5\. Productivity**

-   **Multi-Selection & Component Support:** Bind multiple elements simultaneously; changes propagate to master components and across all pages.
    
-   **Workflow Tools:** Autocomplete (/), resizable table, and responsive UI.
    

**How to Use**

1.  Open **Variable Plugin** in your Framer project.
    
2.  **Create a Collection:** Click + in the Collection sidebar.
    
3.  **Add Variables:** Select a type, name it, and set a value.
    
4.  **Bind to Canvas:** Select Frames/Text, then click + next to any property in the side panel to bind it.
    
5.  **Update:** Modify variable values to update all bound elements instantly.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #408

## Details

- **Author**: Iklil Najma Muqtafa
- **Published**: 2026-09-04
- **Updated**: 2026-09-22
- **Added**: 2026-09-04
- **Categories**: Styles

## More like this

-   [Sealcraft](/plugin/sealcraft) — Cyedi Creative Studio · Free — Badges, stamps and spinning seals
-   [Divider Lab](/plugin/divider-lab) — ANASS TB · Free — Shape dividers for clean sections
-   [Tablecraft](/plugin/tablecraft) — ANASS TB · Free — Paste rows, get a designed table
-   [Cookiewall](/plugin/cookiewall) — ANASS TB · Free — Cookie banners, done in seconds