Framer Update, Layout & Design

Introducing Design Pages

3:08

18K views

Sep 16, 2025

About this lesson

Introducing Design Pages, a new way to design and iterate in Framer. This update turns Framer from a web builder into a true design tool. Design Pages give you a freeform canvas to explore in, with all the tools you might need, like vector editing, P3 colors, image exporting, advanced masking, and much more. Experiment and play without having to think about responsiveness. Turn any iteration into a Web Page with a single click. Adding Breakpoints is so much easier when starting with Design Pages. No imports, no copy-pasting. Wireframer now works with Design Pages as well, so you can generate unique layouts side-by-side. Best of all, Design Pages are completely free to use. Unlimited projects, unlimited pages. Only in Framer. https://framer.com/updates/design-pages/

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00In the past, if I wanted to explore 0:02different ideas in Framer, I had to 0:04create separate web pages, each one 0:06locked into its own breakpoints and 0:08structure. That made it really difficult 0:10to create iterations or variations of a 0:12design side by side. And if you've ever 0:15tried doing this in other web builders,0:17you know it's really difficult, if not 0:19impossible. They just don't have the 0:21fidelity or creative tools to support 0:23real design exploration. But Framer is 0:27different. With design pages, I now have 0:29a free form canvas built for exploring 0:31multiple ideas at a time. So, I can try 0:33different layouts, typography, and 0:36visuals, all in Framer. No messy 0:38imports, exports, or redundant frames.0:41Just a clean workspace with all of the 0:43design tools I might need. And with all 0:46of my explorations in design pages, I 0:48can easily compare, test smaller, bold 0:51changes, or even branch into a 0:53completely new direction without losing 0:55momentum. I can actually see Joseph's in 0:58there right now messing with one of the 0:59designs. Yeah, I'm just tweaking the 1:02headline placement here. The cool thing 1:04is I can do this live while Justin's 1:06walking through. So exploration and 1:08feedback can happen at the same time. No 1:11exporting, no waiting for a new file.1:13We're both right here making it happen 1:16now. Exactly. It's nice because every 1:19variation lives right here, side by 1:21side, all in one place. I really like 1:24this version that Joseph just put 1:26together. So, let's promote it to a web 1:28page. I'll right click on the design,1:30hit create web page, and just like that,1:33we now have a real web page where we can 1:35start adding our break points, turning 1:37the visual exploration into a fully 1:40responsive web design in just a few 1:42clicks. The nice thing is the original 1:45doesn't go away. It's still in design 1:47pages with the rest. So, we can always 1:49come back and revisit later. And design 1:52pages go beyond the web. You can just as 1:55easily use them for social images,1:57organizing icon sets, or even style 2:00guide explorations. The kind of work 2:01that usually gets scattered across 2:03different tools now all in framework.2:07Also, we understand that setting up 2:08grids, spacing, and layout rules can 2:11take time. Time you'd rather spend 2:12exploring brand visuals, typography, and 2:15style. You know, the fun stuff. So, we 2:18made sure Wireframer worked seamlessly 2:20with design pages. Let's jump back over 2:22to Joseph, who has an example ready for 2:24us to check out.2:26So, I just asked Wireframe to create 2:28three simple portfolio page designs in 2:31dark mode. Instantly, it started 2:33creating them, placing each layout side 2:35by side on the canvas, and letting me 2:38know what it's doing every step of the 2:40way. In the end, I've got three unique 2:42layouts ready to iterate and make my 2:44own. No blank canvas, no wasted time.2:47And that's what makes Wireframer and 2:49Design Pages such a good combo. You get 2:52a quick start and a few solid directions 2:54to explore and start shaping into 2:56something real.3:03[Music]

Also coversAI Generation Breakpoints Frames Grids Responsive Design Spacing Themes Typography

Watch on YouTube ↗

‹ Framer Update: Fit Image

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