Layout & Design

Framer Update: Stack Variables

Benjamin

4:17

17K views

Dec 7, 2023

About this lesson

This release adds support for Stack Variables within Components and CMS. This means you can now turn properties like Gap, Padding, Direction, Distribute, and Align into customizable controls, allowing you to design much more flexible Components. For things like Navigations, this means you have to rely less on Variants for responsiveness across Breakpoints, and can instead use Variables, allowing you to keep Variants for interactivity. An example of this can be seen in the video above. The addition of these Variables also enables you control layout via CMS Items, unlocking exciting new use cases. Variable support for the Wrap property is coming soon too. Please let us know which ones you’d like to see next in the Community. https://framer.com/updates/stack-variables/

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00yo my name is Benjamin and in this video 0:04let's talk about stack variables we're 0:08adding variable support for layout 0:10properties in components this allows you 0:13to make much more customizable 0:15components like navigations and it even 0:18allows you to control layout through the 0:21CMS let's take a look at a navigation 0:25use case here I have this pop out menu 0:28from nav do Supply you can click 0:32anywhere on the collapsed menu to open 0:35it revealing a horizontal layout of 0:38links when you resize down to a phone 0:41break point the links become vertical 0:45and the Gap is adjusted as well so let's 0:48dive in and take a look at how this demo 0:51currently is set up and how we could 0:54further simplify it using variables we 0:58currently have four unique variants open 1:02closed mobile open and mobile closed and 1:07in the mobile or phone variants all 1:11we're really doing is customizing the 1:14stack Direction and The Gap now before 1:18this was really the only way to do this 1:20kind of layout customization within a 1:23component but increasing your variant 1:26count can be prone to error especially 1:29when collaborating with multiple people 1:31in a project for example you could 1:34accidentally create unwanted layout 1:37overr rights in the phone variant so 1:41ideally because this navigation has two 1:43states we could also use two variants so 1:47I'll go ahead and delete both of the 1:50mobile variants and now we simply have 1:54an open variant and a closed variant so 1:58I'll select this step T containing all 2:01of our links and there's really only two 2:03properties we need to customize on the 2:06phone breakpoint we want to set 2:08direction to vertical and GAP to 20 I'll 2:13go ahead and undo these changes here and 2:16let's make our first layout variable 2:20I'll click on the direction property and 2:23then I'll select create variable the 2:26current default is horizontal which is 2:29what we need for the desktop and tablet 2:31breakpoints here so that is fine let me 2:35close out of the variable model and 2:38let's do the same for The Gap property 2:41it inherits our default of 10 and I do 2:46like a stepper control so I'll customize 2:49that and then let's go back to the 2:53homepage so you can see the variant we 2:55used on the phone breakpoint got reset 2:58back to the primary variant which is 3:01expected because we deleted those 3:04variants and now When selecting any 3:07instance of our component we have new 3:10property controls for both Direction and 3:14GAP and we can use these to fix our 3:17navigation on the phone break points 3:20I'll set direction to vertical and I'll 3:23increase the Gap to 20 and that is 3:26looking fine so let's set the variant 3:29back to closed and give this a 3:33preview and if we now expand and 3:36collapse the navigation you'll see we 3:39have a vertical layout on 3:41mobile and a horizontal one on 3:46desktop so the interactions are powered 3:49by two variants while the responsiveness 3:52is powered by two variables giving you a 3:55very flexible setup that is easy to 3:58customize and and that's pretty much it 4:01for this video thank you so much for 4:04watching and stay tuned for more updates 4:08coming 4:15soon

TeachesVariables Stacks

Also coversBreakpoints Component Variants Components Links Responsive Design Transitions & Easing

Watch on YouTube ↗

‹ Dashboard Refresh

Localization: AI Style ›