Token values drift
Color, spacing, radius, and shadow decisions often move faster than the places where they are documented.
Design token management
Every token,
exactly where
it belongs.
UISqueezy is a workspace where design token modules live, evolve, and stay connected with export and Figma sync workflows.
One source of truth for design token values
Eight active token modules in one project workspace
CSS Variables, SCSS Variables, and LESS Variables exports
Figma Variables sync through the UISqueezy plugin
color.primary#161413
spacing.m16px
radius.md8px
shadow.md0 4px 6px
Agtype.body16px
z-index.modal1000
The problem with tokens today
Most teams manage tokens with manual coordination.
Design and code split
Figma Variables and exported code need the same token source, otherwise every change becomes a manual handoff.
Modules lose context
When token families are mixed together, teams cannot reason clearly about what changed and where it should ship.
Core capabilities
The practical toolkit for production token work.
Token modules
Every active module has a clear place.
Manage colors, typography, border radius, spacing, shadows, sizes, breakpoints, and z-index from one project workspace.
Colors55
Typography24
Border Radius7
Spacing21
Shadows8
Sizes6
Breakpoints6
Z-Index11
Exports
Implementation output stays close to the source.
Copy or download CSS Variables, SCSS Variables, and LESS Variables from the same token data your team edits.
CSSSCSSLESS
:root {
--summer-color-primary: #161413;
--summer-space-m: 16px;
--summer-radii-md: 8px;
}Figma sync
Keep Figma Variables connected.
Use the UISqueezy Figma plugin to sync tokens to Figma and pull supported variable updates back into Studio.
StudioFigma Variables
Workspace control
Project access remains explicit.
Project selection, permissions, plan state, and action feedback are handled through the connected UISqueezy account.
Projectsummer
RoleEditor
ActionSync allowed
How it works
Three steps from scattered values to a connected token source.
Create or update
Edit token values by module inside the project workspace.
Review output
Use Exports to inspect CSS, SCSS, or LESS variable output before implementation.
Sync with Figma
Send tokens to Figma Variables and pull supported changes back when needed.
Active outputs
Works with the surfaces UISqueezy supports today.
exports / tokens.css
:root {
--summer-color-primary-700: #635BFF;
--summer-space-m: 16px;
--summer-radii-md: 8px;
--summer-shadow-md: 0 4px 6px rgba(0,0,0,.10);
}
Start with your real token modules Ready to bring
Ready to bring
order to your tokens?
Create a workspace, define your token modules, export for implementation, and connect Figma when the project is ready.