Agents, AI
Generation, layout, and styling with Framer Agents
Generation, layout, and styling with Framer Agents
Generation, layout, and styling with Framer Agents
Joseph
·
15:19
·
886 views
·
About this lesson
Framer's canvas agent designs directly on your project, using its content, structure, and style as context to build sections, pages, animations, and themes while you co-edit alongside it.
You'll learn how to direct agents with the context tool and @mentions, rebuild UI from a screenshot, branch for large responsive edits, clean up unbound text styles, and theme a site for light and dark mode. Because agents handle the tedious, repetitive work across an entire project at once, you can focus on the creative decisions instead of tweaking layers one at a time.
00:00 Intro
00:07 The new agent tab
00:36 Generating a services section
01:55 Curating icons and reverting
02:48 Building a full contact page
04:19 Refining stock images with prompts
04:30 A contact form from a screenshot
05:11 Staggered hero appear effects
06:31 Site-wide heading text animation
07:42 Making the site responsive with branching
09:53 Cleaning up unbound text styles
11:24 Refining type scale and color theming
13:39 Design pages, style guides, and hero explorations
Sign up: https://framer.link/yt
Follow: https://framer.link/yt-x
0:00Today I'm working on a website for a0:01design agency that's still got a ways to0:03go. So, let's jump in and see what we're0:06working with. Here in the new Framer,0:08you'll notice a beautifully streamlined0:10UI. And on the right sidebar, the0:12properties panel is now split into the0:14style tab we know and love and the0:16all-new agent tab, which is where our0:19chats with Framer agents take place.0:22We can choose our preferred model from0:23the drop-down. I'm fond of Opus 4.80:26myself. And then we can just start0:28writing our first prompt.0:29Our site here is already coming along0:31with pages for work case studies,0:33services, and even a CMS-powered blog.0:36I'm going to start small by asking the0:38agent to create a new services section0:42in0:43and I want to point this at a particular0:44frame on the canvas, so I'll grab the0:46new context tool below and click0:48directly on the main wrapper here on the0:51homepage, which inserts it into my0:53prompt. And you can insert as many0:55different layers into your prompt as you0:57want to, but let's keep going. Listing0:59the 13 services from and here I can1:03at-mention a page, in this case,1:05services each with a heading two, which1:09I can at-mention as well1:10and one-line description below1:13subtle, thin bottom border1:16generous spacing1:17full width.1:19I'll send it and the canvas agent gets1:21to work with real-time visual feedback1:24on which layers it's actively working1:26on.1:26And it's designing using the content,1:28structure, and style of my entire1:31project as context. We're also getting1:33helpful info in the chat letting us know1:36what the agent is actually doing. And I1:38can continue the conversation to iterate1:40or just make edits directly on the1:42canvas myself. It's easier for me to1:44just go in and rearrange some of these1:46myself1:47or even delete a few rather than trying1:49to type out an explanation.1:51But that's the whole idea. Agents and1:53myself co-editing together. But I will1:56take some help to add an icon1:59to each remaining item that best2:02represents the service.2:05And check it out. These aren't random2:06icons. The Canvas Agent actually curated2:08icons from a vector set that fit the2:11subject matter. And of course, styled2:13them to match.2:14We can also see a quick before and after2:16by clicking undo and redo.2:19And if I want to turn back time on even2:20sending this prompt, I can click revert2:23and then confirm.2:25Also, one little detail I want to add is2:27label this2:30section2:31and add a see all services link2:35that matches the other sections.2:38There we go.2:39And I didn't even really tell it which2:41page to link to, but based on the2:42context of our conversation, the Canvas2:44Agent understood to link through to the2:46full services page.2:48Cool. Now, I could just continue this2:50chat, but since I'm going to move on to2:52something completely different, I don't2:54need the context of this conversation.2:56Plus, I can just keep myself more2:58organized by clicking on this plus3:00button to start a brand new chat.3:02Now, I want to generate a whole new3:04page, and I can count on the Canvas3:05Agent to design it cohesively with the3:08rest of the site. I'll say, create a3:11contact page3:13with three office locations,3:16San Francisco, New York, and Amsterdam.3:19Include city,3:21address,3:22and email3:23with a landscape city photo side by3:26side.3:27Each with the clock component, which3:29I've already created, above the text at3:32its default size.3:33Match the header layout from at work.3:37Add any missing links to this page site3:40wide.3:42And since all the action is happening on3:44another page, I can click the follow3:46button to jump to where the agent is3:48currently working. And here we can see3:49the new page coming together.3:52And it's still working, but I know I3:53want the images on the right. So, I'm3:55just going to nudge these over while3:56it's still running.3:58And the layout and content are looking4:00good. It came up with some placeholder4:02information for the addresses and emails4:03I didn't provide, which is great for4:05now. And it went and found stock images4:07of each city. But this one doesn't4:09really scream San Francisco to me, so4:11I'm going to say replace with a more4:15iconic image of SF.4:19Okay, but more foggy.4:22Amateur fog. It's still thinking, but I4:24can queue up my next request. More4:27fog.4:28That's more like it.4:30We can also design from visual4:31reference. Agents are really good at4:34rebuilding functional web UI from a4:36picture.4:37So, let's try4:39add a contact form4:41that matches this.4:44And I can click the plus button here to4:45browse for a file to attach.4:48And I've got this screenshot colleague4:50sent me, so I'll add that4:53and click send.4:54It's building away.4:56And there we go. We've got a functional4:58form that's fully editable straight from5:01a screenshot. I just don't think we need5:03the top border on this frame since we've5:05got a bottom border on the message5:07field. So, I'm going to fix that real5:09quick.5:10Awesome.5:11Now, let's get into some animation back5:13on the home page.5:15Let's say I want this hero content to5:16animate in when the page loads.5:19It would typically be easier to just5:21select everything and add an appear5:22effect myself, but I'm going for5:24something specific that I think would5:26take longer by hand. So, I'm going to5:28head back to the agent tab,5:30create a new chat,5:32and try to add a subtle staggered appear5:36effect to each individual element of the5:40hero section5:42starting with the background5:44and then bringing in5:46the foreground content5:48from top to bottom.5:51Use a 1-second duration,5:54but stagger the delays by only 0.15:59second.6:00I'll let it do its thing.6:02Looks like it's done, so I'll press6:03command P to preview.6:05And there we go. The timing of each6:07layer is ever so slightly staggered.6:10I do see some clipping going on, which6:12could be one of several parent frames at6:14fault. So, rather than poking through6:15the hierarchy, I'll just say, "Make sure6:19parent frames don't clip anything."6:24There we go.6:25And6:26all fixed.6:28But again, it's tedious stuff,6:29repetitive stuff. That's where I'm going6:31to ask an agent to jump in. Like, "Add6:35subtle text animation6:38to every text layer containing a heading6:43across all pages.6:45Trigger when they come into view,6:48animate by character,6:50move up and fade in."6:54And let's take a look.6:56All right, the hero looks good. Not a6:57big fan of the blur, so we'll say, "Lose7:01the blur."7:03And7:04I'm digging this more.7:06But these long headings are taking way7:08too long in my opinion.7:10I'll let it know, "Long headings take7:13too long. Hero is fine, though."7:18And the agent says it switched from7:19animating by character to by word, so7:21let's take a look.7:23Animating by word is definitely the move7:24[clears throat] for these. But now7:26they're a tad rushed.7:28"Slow those down."7:30And7:32there we go.7:33Just needed to chat it out a little bit.7:35But I wasn't about to go and find every7:37single animated heading and tweak them7:39myself one at a time.7:42Now, things are looking good, but only7:44on desktop. So, naturally, I'm going to7:47ask the Canvas Agent to make the entire7:49site responsive. But, that is a big7:52batch of edits on a lot of pages. So,7:55this would be a great time to take7:56advantage of the new branching feature.7:59You may have noticed this new main label8:01at the top of the canvas. I can click it8:04to show all of the branches that exist8:06in this project, which right now is just8:08the main branch we've been looking at.8:10But, I can click the plus icon to create8:12a new branch to give myself a safe8:13little sandbox to experiment in without8:16affecting the main project until I'm8:18ready.8:19It gets a unique name, but I can right8:21click it and rename it something like8:24breakpoints.8:25It also shows that I'm the one who8:27created it since other editors in the8:28project can come jam on this with me or8:30might have questions about my edits.8:32So, now, with our new branch selected,8:35I'll create a new chat8:37and say, "Make every page responsive8:40across the entire site.8:43Create variants for any components that8:46need alternate layouts like the footer."8:49And I'll show you what I'm talking about8:50here. Since our footer is a component,8:52we're going to need variants for tablet8:54and phone. Right now, we just have8:56desktop, and it's not going to squash8:58down nicely.8:59So, I'll head back and click send.9:02And we're off. It's generating our9:04breakpoints, making the necessary layout9:06adjustments for tablet and phone.9:09And if we head over to the other pages,9:11work, looks good.9:13Services, mostly good, except we might9:16have a layer that looks like it's not9:17linked to the right text style. We'll9:19fix that in a minute. And the agent did9:21go ahead and make those footer variants9:23that I asked for.9:24But, back on the home page, not sure9:26about the hero.9:28The hero doesn't look good on phone. Fit9:33it to H1 and real only9:36with nice gaps.9:39Just needed a little adjusting, but9:41that's better. I can keep fiddling with9:42it later. I also want this services9:44section at the bottom, which I probably9:47should have done earlier.9:49Nice. I feel better. And we should9:50probably keep the cleanup going.9:52Let's tackle styling next.9:54This site has a whole lot of text going9:57on. So, I could show you agents9:59automatically creating text styles from10:01every unique text layer. But one, that's10:04easy. Plugins have been doing that kind10:06of thing for years. And two, that means10:09all of our rogue layers with font10:11mistakes would get codified as styles.10:15We don't want that. So, let's be10:17realistic. In this project, we already10:19have the text styles that we should be10:22using. But of course, there are going to10:24be layers scattered throughout the10:25project that aren't bound to a text10:27style like they should be.10:29And the properties might be a little10:30janky. So,10:32new chat,10:34list all of the text layers project-wide10:39that are not bound to a style. Exclude10:43any text layers sized to fit.10:47All right, it actually found a bunch.10:49And these are clickable, so I can go10:51have a good look for myself.10:54But finding them is easy. It'll take10:56some smarts to find the closest match10:58and apply it. Which the agent is11:00actually offering to do. So, I'll just11:02type yes.11:04And it's going through every text layer11:06on the site. And there we go. This11:07paragraph definitely just got fixed.11:10Along with layers in a bunch of other11:11pages and components.11:13Let me just double-check the style tab11:14for this layer.11:16And yep, it's got the body style applied11:18as expected.11:19And a quick undo redo shows it was in11:22fact pretty far off before.11:24Let's tighten up the styles themselves11:26with something like refine the contrast11:30between my heading sizes11:33using the nearest major third intervals.11:39And okay, but it looks like our big hero11:41H1 size actually got rounded down. So,11:44I'll say set at heading one11:48to the next larger interval.11:51Much, much better. True to the original,11:53but mathematically harmonious.11:56You get the idea. You could also have11:57Agent tidy up gaps and padding site-wide12:00or even clean up colors, creating12:02missing styles or merging styles12:04together that are too similar.12:07Speaking of colors, this particular site12:09might not be too colorful, but it could12:12use some theming. It was really only12:14designed for dark mode. If I toggle to12:16light mode,12:17nothing changes. So, let's start a new12:20chat12:21and say12:22theme the site for light and dark mode.12:26Use the current values for dark mode and12:30create new ones for light mode. Leave12:34static colors alone.12:37And there we go. The entire site got an12:39inverted theme for light mode and kept12:42our original style for dark mode.12:44And up here, it's leaving our static12:46colors in the hero area alone, so we12:48don't end up with black on black.12:50I'm just going to zoom in a little here,12:52and I can also say make all of the color12:56styles a slightly cool tone.13:00Reduce the contrast with no absolute13:04black13:05or absolute white.13:08There we go. It's subtle, but if I undo13:10and redo, you can see the results on the13:12canvas. Or, I can head over to the13:15assets panel13:16and clicking through my colors, you can13:18see that they're all in the hue of blue13:20now with just a hint of saturation. I13:23don't love it for this site, to be13:24honest, so I'm actually going to revert13:26it.13:27But since I'm happy with where we've13:28ended up here, I'll head back to the13:30branching popover13:31and click apply to main to merge this13:34branch.13:35And there we go. Our changes are13:36instantly integrated with the main site13:38design.13:39The last thing I want to mention is that13:41all of this works beautifully with13:43design pages, too. Whether it's13:44supplemental to your site or a design13:47project that isn't a website in the13:49first place. For my project here, I13:51could do something like create a13:54comprehensive style guide13:56of all my text and color styles14:00on a new design page.14:04And here we go. We get a design page14:06that's getting populated with a visual14:09guide to all of our styles.14:11I'll skip ahead so you don't have to14:12wait.14:13You could also create a sticker sheet of14:15all your components if you wanted to, or14:17we could explore some different design14:19directions.14:21I can grab this hero and say14:24create a new design page14:27with six drastically different layout14:30explorations14:31of this hero.14:33Use only the existing styles and color14:37styles on the site.14:39Try different liquid gradient shaders,14:43but keep exactly the same colors.14:48And it's created the new page. I'll14:50click follow.14:51And our explorations are starting to14:53generate on the canvas one by one.14:55The only thing not looking quite right14:57would be the colors, but it's not14:58completely finished yet.15:00Yep, there we go. It figured out the15:02colors. And now I've got six layout15:03variations, each with animated shaders15:06in seconds.
More in this topic
7:13Connect Framer to Claude Code, Codex, Cursor, and more
Agents2K views · 2 days ago
8:25Content, Components, and CMS with Framer Agents
Agents468 views · 2 days ago
1:16Framer 3.0 with Agents, Branching, and a new Community
Announcement25K views · 2 days ago
40:01Framer Event — Introducing Agents, Branching, and a new Community
Event17K views · 2 days ago
3:09Framer Update: Auto Translate
Framer Update4K views · 2 months ago
0:53Framer Update: Auto Rename
Framer Update5K views · 7 months ago
3:40Wireframer: Blogs and Changelogs with CMS
Framer Update5K views · 8 months ago
2:24Framer Update: Wireframer Icons and Insert Sections
Framer Update7K views · 11 months ago