Universal Variables for Integers (gap, padding, etc)
A
Andrew Pons
It would be super useful to have support for variables, similar to what Figma offers. Being able to attach specified values to things like padding, gap, or basically anywhere that allows a numerical input would enable a lot of systematic structure that's currently not natively possible.
It could work similarly to how text style sizing works, where its possible to define a size based on the breakpoint. Variables could allow for a layer of abstraction in defining consistent system-wide values, such as "padding-large" being set to 128px on desktop and 64px on mobile, for example. This would make updating values across all pages much easier.
Log In
C
Cassie Cassell
+1 This is currently my biggest gripe with Framer as an enterprise user. Maintaining consistency on a large site is very difficult without this.
T
Tom Morris
Yes yes yes please. This would save SO much time in development. It's one of my main difficulties of building in Framer at the moment.
What I would use this for mainly is setting sizing variables which are repeated across blocks/components: E.g. horizontal padding around blocks and max-width on content.
At the moment, if a client wants to change that padding, what takes 2 seconds with CSS variables now takes AGES in Framer.
N
Neha Gupta
Tom Morris All this, plus variables for radius along with breakpoints. I wanna define a radius on all my cards/images. and tomorrow if I decide its too much, change everything in one place. ALSO, if I want to change this for mobile, so everywhere that I've used 24px radius on desktop, I want it to become 12px on mobile. Just like I define different font sizes for a style for each breakpoint.
T
Tom Morris
Yes please! Exactly what I came here to request.
L
Lauri Lännenmäki
These could all live under "Styles" so there would be no need to introduce a new mental model. All these would be very welcome:
- gradient styles
- effect styles
- padding styles
- border styles
- radius styles
- shadow styles
A
Alexander Fjelldal
YES PLEASE! Also referencing tokens would be very welcome. E.g. blue-500 referenced by surface-action and text-link
J
Jakub Bak
So called "design tokens". Super useful and a standard practice in modern web dev. MUCH needed feature.