Framer Update, Layout & Design

Framer Update: Stacks, Breakpoint Switcher, Text Stroke

Benjamin

3:33

14K views

May 23, 2024

About this lesson

The May Update brings tons of quality-of-life improvements. When wrapping Stacks around layers, they will now have width set to 1FR or 100% and height set to auto by default. Within the Preview, we’ve added a Breakpoint Switcher, as well as shortcuts to cycle between all of your Breakpoints. We’ve added new Variables for Radius, supporting Radius per corner, and Padding, supporting Padding per side. For Text layers, we’re introducing Text Stroke, a new property, and have added complete Masking support. For SEO, we’ve implemented a Google Bot property, allowing you to control exactly what content Google will display. And that’s not all. See the full changelog here: https://framer.com/updates/may-update-2024

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00yo my name is Benjamin and this is 0:03what's new in the May update first stack 0:06wrapping if I select all of these cards 0:09and then right click to wrap them in a 0:13stack we will now try to automatically 0:17set the width to 100% or one fraction 0:21and the height to Auto making it easier 0:24to do responsive designs in framer as 0:27you can now instantly start customizing 0:29the layout Properties or sort the 0:32contents within your stack this is one 0:34of the most requested features for the 0:37May update and we're excited for you to 0:39give it a try next up previewing here I 0:42have a simple navigation demo with three 0:45breakpoints desktop tablet and phone and 0:49as you can see the navigation collapses 0:51on the phone breakpoint if I give this a 0:54preview I can resize my page as I 0:57normally would but what's new is this 1:00menu that allows me to quickly switch 1:02between all different break points I can 1:05quickly jump to the tablet break point 1:07or the phone breakpoint with its 1:10collapsed navigation for even faster 1:13switching we also added new shortcuts 1:16command comma for the previous 1:17breakpoint and command period to cycle 1:20to the next breakpoint and on Windows 1:23that's control comma and control period 1:25when you resize will'll keep showing the 1:28title of the entire range of your your 1:30breakpoint between the Min and the max 1:33width but when you click on the matching 1:35menu item again we'll always snap back 1:38to the minwidth which is how it's 1:40represented on the canvas that's it for 1:43the preview and next up we have new 1:46variables with this badge selected I can 1:49now go to the radius property and turn 1:51it into a variable and these variables 1:54now support radius per Corner plus they 1:58now get a unique icon and the same is 2:01true for padding we now support padding 2:04per side out of the box making your 2:07components much more flexible and if we 2:09now go back to the homepage you'll see 2:13we now have full control over the radius 2:16and the padding of this badge which is 2:19especially useful for components like 2:21badges where you often want to tweak the 2:24padding to optically Center the contents 2:27within thanks to these new variables I 2:29can now keep tweaking these values until 2:32our badge feels just right and that's it 2:35for the new variables last but not least 2:38we're adding support for text stroke 2:41with my text layer selected I'll head 2:43over to the text properties click on 2:47stroke here we can customize the stroke 2:51color then let's set the text color to 2:54Black and there you go in this update 2:58we're also adding masking support to 3:00text layers these can be combined with 3:03the new text stroke property unlocking 3:06all sorts of new visual effects and 3:09that's pretty much it for this video be 3:11sure to go to framer docomo to see 3:14everything else that's new in this 3:16release thank you so much for watching 3:18and stay tuned for more updates coming 3:22soon 3:31he

TeachesStacks Breakpoints

Also coversComponents Keyboard Shortcuts Responsive Design Spacing Variables

Watch on YouTube ↗

‹ Framer Update: CMS Pagination

Framer: All Design, No Code, Real Websites ›