Event, Plugins

Framer Event — Fall 2024, Introducing Plugins, and CMS References

Andy

15:34

21K views

Oct 2, 2024

About this lesson

Join us live on October 2nd for an overview of our latest features, exciting product announcements, and community highlights. Watch live & revisit what we announced at https://framer.link/fall

0:00Welcome to the Framer fall event. Today 0:04we're going to dive into our most 0:05exciting release of the year, which says 0:08a lot because it's been a big year of 0:10shipping features that help designers 0:13build incredible sites in an interface 0:16that's familiar and easy to use. We're 0:19also going to catch up on some of the 0:20biggest features we've shipped since our 0:22spring event to make sure you're getting 0:24as much out of Framer as you can. And of 0:27course, stick around till the end for 0:29exclusive free fall event swag and a 0:32very special announcement that could 0:34just put a lot of money in your pocket.0:37Now, let's take a look at some of the 0:39most important releases since our last 0:41event that you need to know about.0:44We now offer native forms in Framework 0:47with over 10 input types and a fully 0:49custom free form editing experience,0:52plus secure data handling through email,0:55Google Sheets, or web hooks. This means 0:58that you can build forms that look and 1:00work exactly how you want, faster and 1:03easier than ever before.1:07You can now take your text animations 1:09even further with built-in text effects 1:11in Framer, giving you incredible levels 1:14of control and real-time previews,1:17enabling captivating, motion-rich 1:19designs that bring everything together 1:21with a stunning level of polish. This 1:25year, our CMS has gotten some incredible 1:27upgrades. Our enhanced CMS now supports 1:30up to a 100,000 items per collection.1:33We've introduced CMS pageionation with 1:36infinite scrolling and load more 1:38options, making your content heavy pages 1:41faster and more userfriendly. We also 1:44released helpful new styling options for 1:46rich text and images, making it fast and 1:49easy to create global styles for things 1:51like block quotes and inline images.1:55Drafts for pages, CMS items, and local 1:59are now available for pro and enterprise 2:01workspaces in Framer, letting teams 2:03update their sites and keep works in 2:05progress private.2:07With support for gradient masks along 2:10with alpha and luminance masking, this 2:12recently added option opens up endless 2:14possibilities for unique and 2:16eye-catching designs.2:19If you care about typography, you care 2:21about open type, which is now supported 2:23in Framer, giving you access to so many 2:26important and powerful options like 2:28liatures, stylistic alternates,2:31contextual alternates, and much, much 2:34more. Plus, we've released additional 2:36features like text balance that help 2:38make your copy as beautiful as possible 2:40by eliminating things like ragged edges,2:43widows, and orphans.2:47Over the past few months, we've 2:48optimized Framer from the ground up with 2:50things like AVIF image support,2:53significantly reducing file size without 2:55reducing quality. Animations now load 2 2:58and 12 to six times faster. Projects in 3:00Framer load 30% faster. And we've 3:03started rendering your sites in ways no 3:05other tools can with above the fold 3:07optimizations. Framer pre-renders your 3:10site on the server to determine what 3:12images should be prioritized and what 3:14can be lazy loaded, making initial load 3:16times up to 90% faster.3:20The Framer marketplace is a vibrant and 3:22growing collection of free and premium 3:25website templates. And we recently gave 3:27it a big upgrade with a new design,3:30dedicated creator pages, and on the back 3:32end, a completely new creator dashboard 3:35to handle analytics, template 3:37submission, and monetization. And 3:40there's a lot more to come throughout 3:41the rest of the year. Now, let's talk 3:44about education. With Framer Academy,3:47we're creating the most comprehensive 3:49free framer education anywhere on the 3:52internet. Let's hear a bit more about it 3:54from Joseph. Thanks, Andy. The Framer 3:57community is filled with talented 3:59creators who go above and beyond to 4:01share their expertise through tutorials.4:04Folks like Nandy from Framer University,4:06Tim Gabe, Ryan Hayward, Matt Jumper, and 4:09Dan Hollik take time to break down 4:12complex concepts, demonstrating how to 4:14use Framer to its fullest potential. And 4:17our own Framer Academy is already a gold 4:19mine of framer education that's only 4:21going to get bigger and better. Now,4:24we're ramping things up with a ton of 4:26new courses in the pipeline with me,4:28Joseph, as your instructor. I'm bringing 4:31you new lessons each week, starting with 4:33our new Framer fundamentals course,4:35where we're building upon your existing 4:37design chops. You'll develop the muscle 4:39memory to navigate framer projects 4:41quickly, understand the mental models 4:43associated with layout and responsive 4:45design, take a look at the crazy number 4:48of built-in elements that can be added 4:49to your site, and see just how quick and 4:52frictionless it is to take your site 4:54live. We're also revamping the academy 4:57site itself to make it easier to find 4:59what you're looking for, jump in right 5:01where it makes sense for you, and keep 5:03the learning going with follow-up 5:04lessons that make the most sense for 5:06you. Whether you're a web designer 5:08learning a new tool or a designer who's 5:10never built a website in your life,5:12you're going to learn a whole heck of a 5:14lot. You're not going to watch me rush 5:16through building things really fast or 5:18have to memorize a bunch of seemingly 5:20arbitrary steps. You're going to learn,5:22I mean really learn, and walk away truly 5:26understanding the how and the why behind 5:29everything we do. So head to 5:31framer.com/academy 5:33and follow us on YouTube X and Instagram 5:36to stay uptodate with new lessons as 5:38they come out. Happy learning. And now 5:42back over to Andy. All right, that's it 5:45for the recap. We know you're excited,5:47so let's talk about what's new and what 5:50we're releasing today.5:53[Music]6:05Today, we're launching Framer plugins, a 6:07completely new ecosystem of tools to 6:10accelerate your design process,6:12integrate with critical products, and 6:14make it easier than ever to accomplish 6:16even more with Framer sites. The Framer 6:19team and builders in the community have 6:21been hard at work on some incredibly 6:23useful plugins for you to start playing 6:25with and using right away. All 6:28discoverable from the Framer marketplace 6:30in the brand new plugin section, as well 6:33as through the plugins menu in Framer.6:36And right now, we're going to take a 6:37lightning tour through some of our 6:38favorite plugins to give you an idea of 6:41what's possible, starting with some new 6:43ways to use the Framer CMS that we think 6:45you're going to love. Let's take a look.6:48The Notion plugin lets you sync your 6:50Notion databases with our CMS, making it 6:53super simple to blog in Notion and 6:55publish in Framer. If you don't use 6:58Notion, you can do the exact same thing 7:01with our Google Sheets plugin, importing 7:03content directly from your spreadsheets.7:07And if you need to get data out of 7:09Frame, our CMS export plugin does just 7:12that, creating a handy CSV that you can 7:15use anywhere. Plugins create huge new 7:17opportunities in your design process as 7:20well. For example, the blocks plugin 7:23unlocks hundreds of pre-made components,7:26eliminating the need to manually build 7:28common design elements, letting you 7:30instead focus on bringing your full 7:32vision to life. Phosphor Icons gives you 7:36access to over 9,000 free-touse,7:39carefully crafted icons in a fast and 7:42helpful visual browsing experience. Our 7:45Asky plugin is perfect for adding some 7:48unique wow factor to your designs, and 7:51we know you're going to love 7:53experimenting with it. And we've got 7:55more playful visual plugins like 7:57Doodles, which works like a pencil tool,7:59letting you draw anything and insert it 8:01right on the canvas. And dither for 8:04adding a variety of dithering effects to 8:06your images, bringing back a retro feel 8:09for your modern sites. Plugins also make 8:13bringing advanced animations into your 8:15site faster and easier.8:18The Rive plugin brings your sites to 8:20life in new ways with incredible 8:22powerful and interactive animations.8:26And Lahi files allows you to create,8:29edit, and insert Lahi animations 8:31directly in Framer, giving you blazing 8:33fast, highquality, complex animations.8:37and plugins are incredibly powerful when 8:39it comes to publishing analytics and 8:41gated content. Google Search Console 8:44lets you quickly set up and view your 8:46search data to see if your pages got 8:48indexed or discover and correct 8:51potential errors that could hurt your 8:53SEO. The HubSpot plugin is great for 8:56embedding HubSpot forms and implementing 8:59advanced tracking, widgets, events, and 9:02more. And for those looking to add 9:04membership features to their sites,9:06Framer O provides a noode solution for 9:08creating membersonly content right in 9:11Framer.9:13Plugins can also make tedious parts of 9:15the design process less painful.9:18Renamer lets you batch rename layers on 9:20your canvas in one fell swoop, saving 9:23you time and keeping your work 9:25consistent.9:27Tidy Up can help make large projects 9:29more manageable when you have lots of 9:32frames on your canvas.9:34All of these plugins and many more are 9:37available to start using today. You can 9:39learn more about them and install them 9:41right from the brand new plugin section 9:43of the Framer marketplace. And if you 9:45want to get started building your own 9:47plugins, that's easy, too. Just head to 9:49framer.com/developers 9:51to check out the documentation and start 9:53building.9:55Plugins are opening up a whole new world 9:58for the framework experience, and we're 10:00super excited for you to start using 10:01them. But that's not all the excitement 10:04we have in store for today. We're also 10:06releasing something very special and 10:08highly requested. Let's take a closer 10:11look with Joseph.10:13[Music]10:22We're super excited to introduce CMS 10:24collection references, a powerful new 10:27set of features to grab items from one 10:28CMS collection directly from another and 10:31pass all the right content into your 10:33designs. So many of you have been 10:36waiting for this and we think you're 10:37going to love what it unlocks for your 10:39sites while remaining super easy to use.10:42Let's take a look at how easy it is to 10:43set up a basic CMS reference with a 10:46simple example based on our built-in 10:48sample blog, which we've freshly updated 10:50with reference fields that you can play 10:52with right away. Our primary CMS 10:54collection would be the blog post 10:56themselves. But within each blog post,10:58we need to reference who the author is.11:00In the past, we'd have to create a field 11:02to either manually type the name of the 11:04author or choose one from an option drop 11:06down. But what about each author's 11:09avatar image, their location, perhaps 11:12even a bio? We would have to manually 11:14add each piece of data to each blog 11:16post. Not very efficient. And god forbid 11:19we need to update an author's 11:20information across tens or hundreds of 11:23blog posts. This is where CMS references 11:26come in. All we need to do is set up 11:28another CMS collection for our authors 11:31where each collection item contains all 11:34of the information we might need for 11:36each author. Now, from our blog post 11:39collection, rather than adding a plain 11:41text field or an option field, we can 11:43choose to add a reference field and 11:46choose which collection we want to pull 11:48from. In this case, authors.11:51Now, our reference field lets us choose 11:53from any of the items in the author's 11:55collection. Here, it may look like we're 11:58just pulling in the name, but we're 11:59actually now hooked into all of the 12:01content within this CMS item. In fact,12:04we've also added an edit button to jump 12:06directly to the reference item in its 12:08own respective collection. All right,12:10now let's look at how easy it is to 12:12display this content in our designs. On 12:15this page, we have a collection list for 12:16our blog posts, where selecting the 12:18first item now shows a handy new plus 12:20button to add content from any field in 12:23this collection, which now includes any 12:25reference fields. In our case, the 12:27reference field is authors. And when I 12:29hover over it, I see all of the fields 12:32nested within that collection. I'll 12:35choose name, then head back for the 12:37avatar, and bam, we're grabbing content 12:39from the author's collection based on 12:41what's referenced in the articles 12:43collection, which also means that any 12:45changes made in the author's collection 12:47will automatically propagate to every 12:49single article that references it. Game 12:52changer. We've also added a new 12:54multi-reference field for those 12:55situations where you want to display 12:57several items from a reference 12:58collection like categories, tags,13:01contributors, or in this case some 13:03specific list items. Now, when we have a 13:06collection list on a page, we can filter 13:08down to show only the items included in 13:11the multi-reference field. And to save 13:13you a few steps, dropping in a 13:15referenced collection from the insert 13:16panel will add these filters 13:18automatically.13:20You can also nest references as many 13:22levels deep as you'd like. For example,13:24here I've got a meetups collection,13:27multi-referencing from a collection of 13:29hosts, but then each host is referencing 13:32a collection of cities. And in our 13:35design, we're able to pull all of the 13:36matching content up the chain and into 13:39our design. You can create as many CMS 13:42references as you need to get the job 13:44done without having to worry about 13:45hitting any limits. So, go crazy. We 13:48can't wait to see what you build. Now,13:51back over to Andy. So, we have plugins 13:54to open up an entirely new set of 13:56experiences and possibilities within 13:58Framework with huge implications for 14:00designers and developers alike. We have 14:02CMS references providing deeply dynamic 14:05capabilities within our constantly 14:07improving CMS. And we've got one last 14:12thing.14:15[Music]14:21This year, we're taking the Framer Site 14:23of the Year awards to new heights. Not 14:25only with newly designed stunning 14:27physical awards, but also we're upping 14:30the ante with $100,000 in cash awards.14:34That's right, 100 grand reserved not 14:36just for the top 1, 2, or three winners.14:39We'll be doing out cash, awards, and 14:42bragging rights to the top 10 best 14:44framer sites submitted, meaning you have 14:47more chances than ever to claim a top 14:49spot in the framer gallery and get 14:51recognized and rewarded for your 14:53incredible work. So, keep an eye on our 14:55social channels and your inbox for 14:57official details surrounding the site of 14:59the year awards. And in the meantime,15:01head over to framer.com to grab some 15:03free fall event stickers. then go get 15:06familiar with plugins and keep making 15:08great stuff. Thanks for joining us 15:10today. As always, we'll see you on the 15:13internet.15:15[Music]

Also coversCMS Pages / Dynamic Content Collection Lists Collections Components Form Inputs Frames Hover & Press Plugins Responsive Design Templates Text Effects Transitions & Easing Typography Visitor Analytics

Watch on YouTube ↗

‹ Framer Plugins — Available now

Framer Update: Themed Favicons and Apple Touch Icon ›