Framer Update, Navigation

Framer Update: Layout Templates

Benjamin

8:51

100K views

Feb 5, 2025

About this lesson

Introducing Layout Templates, a brand new way to design reusable navigations and page layouts for sites at scale. Designed for navigations, footers, banners, and overlays that you wish to apply to all pages, without having to edit per page. Consistent navigations, padding, gap, and site-wide styles like custom cursors, all in a single click. Plus, Layout Templates unlock all-new navigation patterns of an exceptional fidelity, like menus with shared layout animations, exit animations, continuous animations, and more. We think you’ll love it. http://framer.com/updates/layout-templates/

🌞 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:18yo my name is Benjamin and this is 0:22layout templates a brand new way to 0:24design things like reusable navigations 0:27Footers banners and more across hundreds 0:30of pages plus this feature unlocks 0:33entirely new types of navigation 0:35patterns so let's have a look here I 0:39have a navigation component and I want 0:41to start adding this to my site so I'll 0:44start with the 0:45homepage I'll set the position to fixed 0:49and I'll make sure that all the layout 0:50settings here are 0:52correct then I can give this a preview 0:56and in the preview I see that my 0:57navigation is indeed properly fixed to 1:00the top so I'm happy and I now want to 1:03add this navigation to all of my pages 1:06this usually means copy and pasting it 1:09across all of my pages but this doesn't 1:12really scill especially if you have 1:14hundreds of them and anytime I want to 1:16change the positioning or sizing of my 1:19components I need to redo that across 1:21all pages this is where layout templates 1:24come in instead of copy and pasting I'll 1:27rightclick and I'll create a new lay 1:29layout template here we can give it a 1:32name this model also tells us to how 1:34many pages our layout template will be 1:37applied because we're creating it from 1:39the homepage and because we don't have 1:42any existing layout templates in this 1:44project just yet it will be applied to 1:47all pages this is the new layout 1:50template canvas it looks and behaves 1:53much like a real page these layout 1:55templates also appear in the assets 1:58panel and this is another way to create 2:01new templates from scratch or folders to 2:03organize your templates in the middle 2:06here you'll see a placeholder that 2:08represents your actual page content and 2:11we can move this around and Design 2:13Elements like navigations Footers and 2:16Banners around it think of it like a 2:19boiler plate for your entire website so 2:23now if I go back to look at a couple of 2:25my sub pages I can see that all of these 2:28suddenly have my navigation with the 2:31exact same layout settings so in one 2:35click I made sure that my entire website 2:38has a consistent navigation and if I go 2:41ahead and select the desktop breakpoint 2:44you'll also see that the property panel 2:46has been greatly simplified this is 2:48because now the layout properties are 2:51actually inherited from the layout 2:54template this means that layout 2:56templates are also a great way to ensure 2:58your website has consistent Gap padding 3:01and other styles like consistent cursors 3:04for example now these layout templates 3:07are also very easy to edit let's say we 3:10want to add a footer to all of our pages 3:13in an instant I'll head over to my 3:15assets panel and I can simply drag and 3:18drop my footer directly onto the 3:21template I already had padding bottom 3:23set to zero so the only thing I want to 3:26do is set the width to fill now let's 3:29check check out some of the sub pages 3:32and now when I scroll to the bottom of 3:34my homepage I can see it properly gets 3:36the footer abended to the existing 3:39design and all the links here are 3:41working I can switch to different sub 3:43pages to check out that they indeed also 3:46get the new footer so this is the magic 3:50of layout templates it makes it much 3:52easier to manage and create sites at a 3:56much larger scale making sure that you 3:58do not have to repeat yourself and 4:00giving you the confidence that your 4:03navigations will be consistent and 4:05functional across all of your pages but 4:09as I mentioned earlier layout templates 4:11also unlock all new types of navigations 4:15let me show you in this navigation I 4:17added a little links component with a 4:20bunch of simple variants and a backdrop 4:23that follows the active item layout 4:26templates are quite similar to 4:27components in that they support very 4:29variables and we can use variables to 4:32access these inner variants so in the 4:35layout template I'll assign a variable 4:37to this active property giving me access 4:40to the active state from any given page 4:44now it's key to note that what I'm doing 4:46is optional I could have also used link 4:49styles to highlight the current page in 4:51the single click but doing this which is 4:54essentially just using variants and 4:57assigning those per page allows me to 4:59animate active States between different 5:02pages this for the first time ever 5:05unlocks all new types of navigations and 5:08interactions in framer because elements 5:11within my layout templates do not 5:13remount when you switch pages in other 5:16words they're kind of just there as you 5:18switch Pages they don't have to reload 5:22suddenly unlocking things like these 5:24active State animations between Pages 5:27plus things like fixed elements 5:30continuous animations exit animations 5:33and more but before we look at those 5:35let's have a look at managing multiple 5:37templates within a single 5:40project let's say we want to add some 5:43docks to our website these docks need a 5:46sidebar so our existing layout template 5:49doesn't really cut it so I've set up a 5:51second layout template called docks and 5:54it has a top bar a sideb and a footer 5:59and then all the content is positioned 6:01on the right hand side to now overwrite 6:04our existing layout template I can 6:06simply head over to the property panel 6:08and selected from the layout dropdown 6:12and as I switch between these you can 6:13see how my page layout and the content 6:16adapts and as we hover over our page 6:20outlines indicate which elements are 6:23part of the layout template and which 6:25elements we can freely edit here and we 6:28can also double click on any of these 6:31elements that are part of the template 6:34to instantly start editing so you can 6:37create multiple layout templates per 6:39project and pick specific pages and 6:41subpages to overwrite the main one so 6:45now let's give this one a preview 6:47elements like sidebars within layout 6:50templates become inherently stateful 6:52because they do not have to reload or 6:55remount across Pages any section here 6:58that I expand or collapse will stay as 7:00is when we switch pages instead of 7:02resetting to its original variant this 7:05is a huge unlock for documentation 7:08websites where as a visitor you can 7:10influence and control the information 7:13density as you browse the content now in 7:16closing I want to briefly mention a few 7:19of the new navigational patterns this 7:21feature unlocks first sites that feel 7:25like apps by combining layout animations 7:29with fixed elements and Page effects you 7:32can craft uniquely interactive websites 7:36second navigations with exit animations 7:40when switching pages instead of your 7:42navigation instantly jumping back to its 7:45default State you can have it gently 7:48animate back to its original design 7:51something you rarely see today as it's 7:53impossible to achieve in any other tool 7:56third continuous animations 7:59elements part of a layout template can 8:03be infinitely animating without any 8:06jumps as you navigate around your site 8:09and fourth stateful elements like we 8:12looked at earlier in the video 8:14components like sidebars that you can 8:16expand and collapse can now do so freely 8:20without switching back to its original 8:22variant when you switch Pages extremely 8:25useful for things like documentation 8:27websites and that's it for this video 8:30we're very excited about layout 8:32templates and what it means for 8:34Designing sites at skill directly in 8:37framer thanks for watching and see you 8:39in the next one 8:42[Music]

TeachesLayout Templates

Also coversBreakpoints Component Variants Components Custom Cursors Hover & Press Links Page Transitions Sizing Spacing Templates Variables

Watch on YouTube ↗

‹ Text Properties in Framer (Fundamentals Lesson 17)

Framer Update: Zooming, Layout, and more ›