5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/12ci1vsd8nj4u.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1pb7yncyfm9fe.js","/creators-assets/_next/static/immutable/chunks/1j6jg0y72xk13.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:T9fd,

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

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

5a:[["$","$L5d",null,{"post":{"id":"01a06e02-081d-775e-99c4-4c19cf48fb7b","title":null,"body":"

Introducing Variable for Framer. Create and manage design tokens, variables, and design systems without leaving your canvas.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Introducing Variable for Framer. Create and manage design tokens, variables, and design systems without leaving your canvas."}]}]},"author":{"framerUserId":"d4e4c093-25c4-4962-a714-88e0e2278504","name":"Iklil Najma Muqtafa","slug":"iklil-najma-muqtafa","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38037/avatar-XPEBACLSQWS1qpEM9vuEuo43LdiC0j.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"1558","resolved":true,"title":"Variable (Design token for Framer)","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Variable — Design Token for Framer","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"A Framer plugin to manage design tokens directly from the canvas. Create, organize, and bind tokens to elements with real-time updates."}]},{"type":"paragraph","content":[{"type":"text","text":"Key Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"1. Variables & Data Types","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"11 Types:","marks":[{"type":"bold"}]},{"type":"text","text":" Color, Number, String, Boolean, Dropdown, Typography, Spacing, Sizing, Radius, BorderWidth, Opacity."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Aliases & Math:","marks":[{"type":"bold"}]},{"type":"text","text":" Reference tokens ({path/to/token}) or perform calculations ({spacing/md} * 2)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scopes:","marks":[{"type":"bold"}]},{"type":"text","text":" Restrict variables to specific properties."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"2. Collections & Multi-Mode","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modes:","marks":[{"type":"bold"}]},{"type":"text","text":" Support Light/Dark, Desktop/Mobile, etc., with per-mode values."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Breakpoint Auto-Switch:","marks":[{"type":"bold"}]},{"type":"text","text":" Switches modes automatically based on frame width."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"3. Canvas Binding","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Bind variables directly to Framer element properties:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layout & Spacing:","marks":[{"type":"bold"}]},{"type":"text","text":" Padding, Gap, Grid, Width/Height, Min/Max size, Overflow."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Visual Style:","marks":[{"type":"bold"}]},{"type":"text","text":" Fill, Border (Width, Color, Radius per-side), Opacity, Z-Index, Visibility, Stack Direction, Wrap."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography:","marks":[{"type":"bold"}]},{"type":"text","text":" Font Family, Size, Weight, Line Height, Letter/Paragraph Spacing, Text Color, Alignment, Truncation, Transform."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"4. Import / Export","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Import:","marks":[{"type":"bold"}]},{"type":"text","text":" W3C DTCG (.json), Figma Tokens (.tokens.json), Custom JSON."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Export:","marks":[{"type":"bold"}]},{"type":"text","text":" JSON, W3C DTCG (.w3c.json), and AI Design System Prompts."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"5. Productivity","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multi-Selection & Component Support:","marks":[{"type":"bold"}]},{"type":"text","text":" Bind multiple elements simultaneously; changes propagate to master components and across all pages."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Workflow Tools:","marks":[{"type":"bold"}]},{"type":"text","text":" Autocomplete (/), resizable table, and responsive UI."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"How to Use","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Open "},{"type":"text","text":"Variable Plugin","marks":[{"type":"bold"}]},{"type":"text","text":" in your Framer project."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Create a Collection:","marks":[{"type":"bold"}]},{"type":"text","text":" Click + in the Collection sidebar."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add Variables:","marks":[{"type":"bold"}]},{"type":"text","text":" Select a type, name it, and set a value."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bind to Canvas:","marks":[{"type":"bold"}]},{"type":"text","text":" Select Frames/Text, then click + next to any property in the side panel to bind it."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Update:","marks":[{"type":"bold"}]},{"type":"text","text":" Modify variable values to update all bound elements instantly."}]}]}],"attrs":{"type":"1","start":1}}]},"introduction":"Design Tokens & Variables","slug":"variable-design-token-for-framer","author":{"framerUserId":"d4e4c093-25c4-4962-a714-88e0e2278504","name":"Iklil Najma Muqtafa","slug":"iklil-najma-muqtafa","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38037/avatar-XPEBACLSQWS1qpEM9vuEuo43LdiC0j.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d4e4c093-25c4-4962-a714-88e0e2278504/01a06dfc-cecf-720a-b994-1e060d6d3717.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d4e4c093-25c4-4962-a714-88e0e2278504/01a06dfc-e2bc-708b-bf95-dd6745e06147.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d4e4c093-25c4-4962-a714-88e0e2278504/01a06dfc-f7d2-730e-ba58-bd1b8f4d91a6.png","metadata":{"tint":{"h":225,"s":80,"l":16},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d4e4c093-25c4-4962-a714-88e0e2278504/01a06dfd-0d13-772e-9a44-4e61bc6f6cae.png","metadata":{"tint":{"h":240,"s":75,"l":13},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-04T20:00:21.425Z","updatedAt":"2026-09-07T19:45:09.579Z","publishedAt":"2026-09-07T19:45:09.568Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"33yf9re6r2i3cist3qpisc7ho","paid":true,"categories":[{"id":"b238ea64-0ce9-413a-848d-43b73f0eea0f","name":"Styles","slug":"styles"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-04T20:00:22.046Z","updatedAt":"2026-09-04T20:00:22.046Z","reported":false}}],"$L5f"]

Suggested for you