Event, Layout & Design

Framer Event — Introducing Design Pages. A better way to design and explore on the Framer canvas.

7:00

22K views

Sep 16, 2025

About this lesson

Join us September 16 at 10AM PDT for a short but game changing feature drop. Add the event to your calendar → https://www.framer.com/events/

MB01CNQA5GSYTRJ

0:00[Music]0:14Today, we're unveiling one of the 0:16biggest shifts in how you'll work in 0:18Framer moving forward. Framer has always 0:21been the fastest way to go from an idea 0:23to a live site if you're starting right 0:26in Framer. But sometimes you just want 0:29to explore. You need to iterate a lot 0:32and get feedback before you commit to a 0:34direction. This year, whether you've 0:36noticed it or not, we've been shipping 0:38critical updates to our design 0:40experience. Completely revamped vector 0:42editing, perfect for creating beautiful 0:45icons, editing existing SVGs, along with 0:49creating and managing large icon sets.0:54Totally re-engineered image and asset 0:57exporting so that things you make in 0:59Framer can easily go anywhere in 1:01whatever format or scale you need. We 1:05added support for P3 colors, gradients,1:08and animation, so you can take full 1:10advantage of modern displays with 1:12richer, more vibrant visuals. We shipped 1:15small quality of life improvements like 1:18the scale tool for quickly resizing 1:20complex compositions without wrecking 1:23layout or spacing. We continue to build 1:26out curated font and icon collections,1:29providing highquality defaults that make 1:31good design the path of least 1:33resistance. And with real 3D transforms,1:36Framer gives you native CSS depth and 1:39perspective with nesting that just 1:42works. However, despite all these 1:45foundational releases, at the end of the 1:47day, ideation and exploration has still 1:50mostly been happening in Figma, which 1:52means imperfect imports to Framer, lots 1:55of back and forth between tools, and a 1:57slower, less enjoyable experience for 2:00everyone involved. So, today that 2:02changes 2:14In the past, if I wanted to explore 2:16different ideas in Framer, I had to 2:18create separate web pages, each one 2:20locked into its own break points and 2:22structure. That made it really difficult 2:24to create iterations or variations of a 2:26design side by side. And if you've ever 2:29tried doing this in other web builders,2:31you know it's really difficult, if not 2:33impossible. They just don't have the 2:35fidelity or creative tools to support 2:37real design exploration. But Framer is 2:41different. With design pages, I now have 2:43a free form canvas built for exploring 2:45multiple ideas at a time. So I can try 2:48different layouts, typography, and 2:50visuals all in Framer. No messy imports,2:53exports, or redundant frames. Just a 2:55clean workspace with all of the design 2:57tools I might need. And with all of my 3:00explorations in design pages, I can 3:02easily compare, test smaller, bold 3:05changes, or even branch into a 3:07completely new direction without losing 3:09momentum. I can actually see Joseph's in 3:12there right now messing with one of the 3:14designs. Yeah, I'm just tweaking the 3:16headline placement here. The cool thing 3:18is I can do this live while Justin's 3:20walking through, so exploration and 3:22feedback can happen at the same time. No 3:25exporting, no waiting for a new file.3:27We're both right here making it happen.3:30Now, exactly. It's nice because every 3:33variation lives right here, side by 3:35side, all in one place. I really like 3:38this version that Joseph just put 3:40together. So, let's promote it to a web 3:42page. I'll right click on the design,3:44hit create web page, and just like that,3:47we now have a real web page where we can 3:49start adding our break points, turning 3:51the visual exploration into a fully 3:54responsive web design in just a few 3:56clicks.3:57The nice thing is the original doesn't 3:59go away. It's still in design pages with 4:02the rest. So, we can always come back 4:04and revisit later. And design pages go 4:07beyond the web. You can just as easily 4:09use them for social images, organizing 4:12icon sets, or even style guide 4:14explorations, the kind of work that 4:16usually gets scattered across different 4:18tools. Now, all in Framer. Also, we 4:22understand that setting up grids,4:23spacing, and layout rules can take time.4:26time you'd rather spend exploring brand 4:27visuals, typography, and style. You 4:30know, the fun stuff. So, we made sure 4:32Wireframer works seamlessly with design 4:35pages. Let's jump back over to Joseph,4:37who has an example ready for us to check 4:39out.4:40So, I just asked Wirefire to create 4:42three simple portfolio page designs in 4:45dark mode. Instantly, it started 4:47creating them, placing each layout side 4:49by side on the canvas, and letting me 4:52know what it's doing every step of the 4:54way. In the end, I've got three unique 4:56layouts ready to iterate and make my 4:58own. No blank canvas, no wasted time.5:02And that's what makes Wireframer and 5:03design pages such a good combo. You get 5:06a quick start and a few solid directions 5:08to explore and start shaping into 5:11something real.5:14Okay, let's recap for a second. Design 5:17pages are all about freedom of 5:19exploration, speed of execution, and 5:21keeping everything in one place. But 5:24there's something we haven't told you 5:26yet. You see, while others offer free 5:29plans that are extremely limited and 5:31make it harder for you to just design 5:33and collaborate and get stuff done,5:36we've made design pages completely,5:38totally, 100% free. Not just like a few 5:43free projects and then you have to pay 5:44free. It's just free. Unlimited 5:47projects, unlimited design pages, and 5:50side projects. There's no catch. Think 5:52about what this unlocks. Agencies can 5:55finally show proof of work inside Framer 5:57with every iteration visible. Solo 6:00designers can start a project as 6:01casually as a mood board and then 6:03promote the winning direction to a web 6:05page in a single click. Teams can 6:08comment, mention, and co-edit 6:09explorations live together. And when you 6:12don't know where to begin, Wireframer 6:15inside design pages gives you multiple 6:17layouts instantly. No blank canvas, just 6:21momentum. We're confident you'll be 6:23spending a lot more time in Framer, a 6:25lot earlier in your process, and we 6:27can't wait to see what you build. So, go 6:29get started, and as always, we'll see 6:32you on the internet.6:37[Music]6:44What?6:46What the 6:48[Music]

Also coversAI Generation Collections Frames Grids Responsive Design Spacing Themes Typography

Watch on YouTube ↗

‹ Introducing Design Pages

Using Events for nested interactions in Framer (Animation Lesson 13) ›