Layout & Design

Welcome to Design Pages in Framer

Welcome to Design Pages in Framer

Welcome to Design Pages in Framer

·

1:33

·

14K views

·

About this lesson

Design Pages bring a fully freeform design workflow into Framer — so you can explore ideas, create graphics, and refine layouts without switching tools. Draw icons and illustrations, refresh logos, experiment with typography, and build social assets using powerful vector tools and P3 color support.

Design visuals for your site, transform them in 3D, and paste them directly into pages non-destructively. Test layouts, colors, and type for entire pages in one seamless space — no imports or messy handoffs.

Pair Design Pages with Wireframer to generate layout ideas instantly, then turn any design into a real, responsive page with a right-click.

Creative freedom, speed, and a smoother workflow. All free in Framer.

Sign up: https://framer.link/yt

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

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

0:00Design pages unlock the completely0:01[music] free form design experience0:03you'd expect from tools like Figma or0:06Sketch. You can design entire icon or0:09[music] illustration libraries from0:10scratch with powerful vector drawing0:12tools, the styling properties [music]0:13you know and love, and full support for0:16P3 colors. Refresh a logo [music] with0:18tons of unique open- source fonts. Bring0:21in a collaborator to whip up perfectly0:23on [music] brand social assets from your0:25carefully crafted styles and components.0:28then export in the formats and0:30resolutions you [music] need and even0:31design graphic assets for your site.0:34Then scale them proportionally or even0:36transform them in 3D [music] space and0:38paste them into your web pages0:40completely non-destructively.0:42Then test different layouts, colors,0:44[music] and typography for entire pages0:46of your site all in the same space. No0:49imports, no duplicated [music] files, no0:52messy handoffs, just total creative0:54freedom. And design pages [music] work0:56beautifully with Wireframe to generate0:59layout ideas instantly, which you can1:01then take, tweak, and evolve visually.1:04When you land on something you love, you1:06can rightclick and instantly [music]1:08turn it into a real responsive web page1:10ready to publish. Design pages are about1:13freedom [music]1:14speed, and creativity. And they're1:17completely free to use. So start1:19exploring [music] and bringing your next1:21big idea to life in Framer.

Watch on YouTube ↗

More in this topic

8 Framer shortcuts you're probably sleeping on4:19
8 Framer shortcuts you're probably sleeping on
Layout & Design3K views · 2 months ago
Framer Update: Stack Sorting and Bento Grids2:16
Framer Update: Stack Sorting and Bento Grids
Framer Update7K views · 2 months ago
Sharing Vector Sets Across Projects (Vectors Lesson 7)3:41
Sharing Vector Sets Across Projects (Vectors Lesson 7)
Layout & Design1K views · 3 months ago
Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)3:38
Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)
Layout & Design2K views · 3 months ago
Animating Vectors in Framer (Vectors Lesson 5)4:25
Animating Vectors in Framer (Vectors Lesson 5)
Layout & Design4K views · 3 months ago
Customizing Vectors with Variables in Framer (Vectors Lesson 4)4:59
Customizing Vectors with Variables in Framer (Vectors Lesson 4)
Layout & Design3K views · 3 months ago
Replace component instances site-wide in Framer1:39
Replace component instances site-wide in Framer
Layout & Design4K views · 4 months ago
Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)6:58
Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)
Layout & Design3K views · 4 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.