Event

Framer Event — Spring 2025, New AI Tools, reimagined Vector Editing, and Funnels with AB testing

15:26

36K views

May 21, 2025

About this lesson

New AI Tools, reimagined Vector Editing, and Analytics updates with A/B testing, funnels, and click tracking. Available right now. See everything at https://framer.link/hoW6KL0

0:00down. I'm so 0:02fresh.0:04Yeah. Hey,0:08baby. I'm 0:12[Music]0:16so rich.0:19Welcome back to our second annual spring 0:22event. We have an amazing lineup of 0:25brand new features to show to you today.0:27Plus, three of you are winning a free 0:29framer themed Creator Micro 2 by Work 0:32Louder. So, stick around till the end 0:34for more details on that. Now, it's been 0:38a big 6 months since our last event. And 0:40in that time, more people than ever have 0:43jumped in and started building with 0:44Framer, which makes sense. It's faster.0:47It takes fewer people, and you only have 0:49to take a glance at the Framer gallery 0:51to see that the end result can be 0:53absolutely stunning. This also makes it 0:56understandable why now over 30% of Y 0:59Combinator startups are choosing to 1:01launch with 1:02Framer. We've also seen amazing growth 1:05on the Framer marketplace with over 200 1:08plugins now available since our launch 1:10in the fall and of course a completely 1:13revamped experience for customers and 1:15creators with templates with huge 1:18payouts happening every single month for 1:20template creators around the world. On 1:23the product side of things, since our 1:24last event, we've shipped over 35 1:27updates. That's more than one per week 1:29if you're keeping count at home. Our new 1:32analytics now give you more detailed 1:34visibility into your traffic, reducing 1:37and even for some completely eliminating 1:39the need to rely on external analytics 1:42platforms. We also continue to make 1:44major updates to our CMS. Improvements 1:47to galleries, onpage navigation,1:50sorting, and a brand new mobile 1:52experience that makes editing or 1:54publishing on the go super easy. And on 1:57the design front, we've introduced a ton 2:00of game-changing features. We launched 2:02layout templates to give you guaranteed 2:05consistency and easy global changes for 2:07your sites. selection colors for making 2:10fast changes or clearing up subtle color 2:13inconsistencies that have a way of 2:16spreading throughout your 2:18projects. All of this is part of our 2:20commitment to making Framer the best 2:23platform for designers to build 2:24professional sites at any scale. But 2:27today, we're here to talk about what's 2:30next for designers and the people they 2:32work with. We've got four new releases 2:34to share that include a little something 2:37for everyone that we think you're going 2:39to love. And as always, this isn't a 2:41preview event. None of this is coming 2:43soon. Everything we show you today will 2:46be available today. There's a lot to 2:48cover, so let's get 2:58started. Today, analytics take a massive 3:02leap forward in Framer, starting with 3:05funnels. When analyzing conversion 3:07rates, you need something specific to 3:10track. That's why you'll now see a 3:12tracking ID field when selecting linked 3:14elements like buttons. Framework will 3:17suggest an ID based on context, but you 3:20can change it to whatever you like.3:22Since we have multiple buttons linking 3:24to the get started page, we'll assign 3:26unique IDs to each. Then we'll head over 3:29to analytics and create a new 3:34funnel. To track clicks, we simply add 3:37the IDs we've already set up. This gives 3:40us a clear picture of how our page is 3:42performing, which is great because now 3:45it's time to optimize with AB testing in 3:49Framer. When you start a test, Framer 3:52will create a duplicate variant 3:54automatically. Let's say we want to test 3:56a dark version of this page. We'll make 3:58the changes directly on that variant.4:01Then hit configure. Just like with 4:03funnels, we'll define the steps we want 4:05to measure. When you're ready, publish 4:08the site. Half of your visitors will see 4:10the control variant. The other half will 4:12see the test variant. Framework begins 4:15collecting results immediately. If 4:17enough data is collected, the winner is 4:19automatically chosen at 90% certainty.4:23If not, you'll get an estimate of how 4:25long it'll take based on current 4:26traffic. When you're confident, stop the 4:29test and apply the winning variant. This 4:31is the fastest and simplest way to go 4:33deeper with analytics and testing. No 4:36code required. Advanced analytics are 4:39free to try on every business plan and 4:41fully available on all enterprise 4:44plans. If you've been on the fence as to 4:47whether or not you should be running 4:48your marketing site on Framer, let these 4:51updates be your sign. It's time. Next,4:54we've been hard at work on some serious 4:57updates, and we've got Joseph to give 4:59you a look.5:08Today, we're excited to introduce a 5:10complete reimagining of vector editing 5:13in Framer, allowing you to seamlessly 5:15draw and edit paths anywhere on the 5:17canvas. Build and scale cohesive icon 5:20libraries, and create next level 5:22animations and micro interactions 5:25without ever leaving Framer or writing a 5:28single line of code. The new vector menu 5:30gives you everything you need to create 5:32and edit logos, icons, and illustrations 5:36directly on the canvas. anywhere you can 5:38insert layers. We know you love 5:40designing from scratch in Framer, so 5:42proper native vector editing is key for 5:44keeping your workflow clean. And as your 5:46projects grow, keeping cohesive sets of 5:49graphics organized and easily accessible 5:52can become more of a challenge. Which is 5:54exactly why we're introducing vector 5:56sets. A vector set now allows you to 5:59bundle together groups of vector 6:01graphics, giving you a brand new 6:03browsing and search experience, and a 6:06dedicated canvas to create and edit 6:08beautifully consistent sets of icons,6:10along with the added power and 6:12flexibility of variables to make your 6:14icons even more customizable. You'll 6:17find a new vectors section on the assets 6:19panel where you can insert, edit, or 6:22create new vector sets. Or if you've 6:24already started drawing on the canvas,6:26you can just rightclick and choose 6:28create vector set. Or if you've already 6:30got a set of SVG icons on your computer,6:33you can now drag them directly onto the 6:35canvas, and Framer will turn them into a 6:37new vector set automatically in one 6:40step. You'll be brought into a dedicated 6:42canvas with all the vector tools you 6:44might need and an add button to continue 6:46growing the set. And when you insert a 6:49vector set on a page, you'll get a whole 6:51new visual browsing and search 6:53experience that makes it incredibly easy 6:56to find the right icon. Vector sets also 6:59support variables like stroke color or 7:02opacity, for example, to give you as 7:04much flexibility as you need to 7:06customize each instance of an icon. And 7:08by combining multiple properties, you 7:10can easily create duo tone or 7:12multicolored icons from a single vector 7:14set. And of course, each instance is 7:17easily scalable. We've also gone ahead 7:20and revamped the icon sets available in 7:22the insert menu, all with the new 7:24browsing 7:25experience. Vector sets also unlock a 7:28brand new animation effect, the stroke 7:30effect, which gives you entirely new 7:32properties to animate the length, gap,7:35and offset of a path. Plus, three unique 7:38ways to make it loop, unlocking a whole 7:40new level of animation in Frame. You can 7:44create an infinite logo animation, bring 7:46icons and illustrations to life, or 7:49create beautiful micro interactions with 7:51just a few clicks. And that's vectors.7:54Inline editing, vector sets, and brand 7:57new stroke animations, and all new 8:00design experience now in Framer.8:04This completely rebuilt experience for 8:07Vectors lays a lot of groundwork for 8:09more design focused features to come 8:11that we can't wait to share with you.8:14But for now, we'd like to share 8:16something else we're excited 8:18[Music]8:24about. Introducing Wireframer, a fresh 8:28new way to kick off your next site in 8:30Framer. Unlike other AI tools that try 8:33to do everything, Wireframer focuses on 8:36generating clear, purpose-built layouts 8:38that focus on structure, not style,8:41helping you move fast while leaving the 8:44aesthetics in your hands. Here's how it 8:46works. You can type in your own prompt 8:49or choose from one of our presets. Let's 8:52start by generating a landing page. It's 8:55fast, like really fast. The result is 8:58clean, minimal, and fully responsive.9:01And once you generate something,9:03Wireframer will actually suggest edits 9:05to help you explore different layout 9:07ideas. Think copy changes, additions,9:10alternative sections, and more. It's all 9:13designed to help you iterate quickly 9:15without starting over. And those 9:17suggestions aren't one and done. You can 9:20always follow up with your own requests 9:22to explore more options. Let's say we 9:24want an interactive navigation that 9:26expands and collapses on mobile. Done.9:30Framer not only selects the right 9:31section, it makes it responsive out of 9:33the box. Since Wireframer is built 9:36specifically for Framer, layouts just 9:39work. No extra steps needed. And just 9:42like that, we've got a responsive,9:44interactive landing page ready for us to 9:46customize and publish. Also, Wireframer 9:50isn't just for one pagers. At any point,9:53add another page and keep building. Your 9:56whole site starts here. No matter what 9:58you're working on, Wireframer gives you 10:00a smart place to start. Build landing 10:03pages portfolios blogs teasers 10:06personal sites, you name it. This is 10:09only the beginning. With time,10:11Wireframer will keep evolving with more 10:14layouts, more variations, and more 10:16possibilities because everything happens 10:19in 10:21Framer. We can't wait for you to get 10:24your hands on this. But AI isn't just 10:26helpful for whole pages. Sometimes you 10:29have a specific idea that you know is 10:31possible, but you just don't have the 10:33technical knowhow to get it done. That's 10:36where our next release comes 10:39[Music]10:49in. Ever had an idea for custom 10:52components but felt blocked by code?10:54You're not alone. That's why we built 10:57Workshop to turn ideas into working 11:00components just by describing them.11:02Let's try it out. We can launch Workshop 11:05straight from the component panel or the 11:07quick menu. It opens a chat where we can 11:09build anything we can think of. And if 11:12we're not sure where to start, there are 11:13example prompts to help spark new ideas.11:17Let's start with one of the examples and 11:19create an analog style clock that shows 11:21the real local time. Once the prompt is 11:24submitted, Workshop generates our new 11:26component in seconds, dropping it onto 11:29our canvas, complete with built-in 11:31properties that we can tweak to our 11:34liking. Want to add more styling,11:36properties, effects, or functionality.11:39Just keep the conversation going. We can 11:41tell Workshop what we want to change or 11:43add, and it'll update the component in 11:45real time. It even suggests ways to make 11:48your component better. So, you're not 11:50just building faster, you're building 11:52smarter. Workshop also makes it easy to 11:55create effects that used to feel out of 11:57reach, like an image card with an 11:59interactive 3D tilt. Just describe what 12:02you want and it builds it for you. Like 12:05magic, but real. We can keep enhancing 12:09and experimenting by adding details to 12:11the prompt, like asking for a screen 12:12reflection or glow on hover with an 12:15adjustable intensity. Workshop instantly 12:18updates the component with those changes 12:20so you can keep pushing your ideas 12:23further. If something ever feels off,12:26just let Workshop know or roll back to a 12:29previous version. And while there's no 12:31need to touch code, the full component 12:34lives within the assets panel, ready to 12:36edit or reuse like any other code 12:38component in Framer. Workshop is just 12:42getting started. From bold creative 12:44ideas to powerful utility components,12:47you can build it all right now. And as 12:49the AI continues to improve, so will the 12:52possibilities. Whether it's standout 12:54visuals or smart functionality, Workshop 12:57gives everyone the tools to bring big 12:59ideas to 13:02life. We're really excited about these 13:05AI features. For page building, the 13:08speed, simplicity, and neutral design 13:11approach feels like the ideal balance 13:13that gives you the superhuman speed that 13:15AI has to offer, while also giving you 13:18much more direct creative control than 13:21other AI powered siteb building 13:22experiences. Component generation makes 13:25your more technical or wild ideas 13:27possible, faster, and easier. And we 13:30think you're going to love building with 13:32both of them. And just a note on the use 13:34of AI and framer. Design has matured a 13:37lot over the past decade. As an 13:39industry, we've moved beyond being 13:41territorial about design patterns. And 13:44more than ever, it feels like we're all 13:45speaking a similar visual language,13:48using the same kit of parts to create 13:50new and meaningful experiences that are 13:52familiar to the end user. Taking that 13:54into consideration, our approach to AI 13:57isn't about replacing the designer. It's 14:00about using these common shared patterns 14:02to provide great starting points and 14:04automating repetitive design tasks so 14:07you can spend more time focusing on what 14:09makes your work unique. It's about 14:12giving you all the tools to execute at 14:14your best and making those tools 14:16entirely optional. Everything we've 14:19talked about today is part of a bigger 14:21vision. One that lets designers do more 14:23of their work inside Framer, marketers 14:26get more out of our platform, and just 14:28removing bottlenecks for teams in 14:30general when it comes to publishing and 14:32updating sites. We think the future is 14:34incredibly bright for designers and 14:36builders of all kinds, and we can't wait 14:39to see what you build. Now, if you want 14:41a chance to win that Framer themed 14:43Creator Micro 2 keyboard, here's what to 14:46do. Just post your favorite announcement 14:48from today on X or Instagram and include 14:51our handle frame and we'll pick three 14:53random winners on Friday, May 23rd.14:56Bonus points if you tell people what 14:58you're going to build with these 14:59features, but that doesn't increase your 15:00odds of winning. It's just fun. And 15:03that's it for this year's spring event.15:06Thank you so much for joining us today.15:08Until next time, we'll see you as always 15:11on the internet.15:14[Music]15:16Hey,15:18[Music]

Also coversA/B Testing AI Generation Animating Vectors Component Variants Components Frames Hover & Press Keyboard Shortcuts Layout Templates Links Plugins Responsive Design SEO Audit Templates Variables Vector Sets Visitor Analytics

Watch on YouTube ↗

‹ Vectors: A complete reimagining of vector editing in Framer with Vector Sets and Animations

Publishing and connecting a domain in Framer ›