New interface

The first thing you’ll notice: things are not where they used to be. I won’t lie that it took me a minute to find CMS the first time I opened 3.0.

The Canvas Got a Makeover. So Did the Toolbar.

CMS, Localization, Analytics, Settings used to live on the top toolbar. Now they’ve all packed up and moved into one dropdown on the left. The main editing area, now called Canvas, lives in that same dropdown, right alongside the rest.

More clicking sounds annoying. The good news is there are shortcuts that let you switch between panels instantly, so you barely need the dropdown at all once they became a muscle memory.

Muscle memory will catch up faster than you’d think. Learn the numbers once, and you’ll stop hunting for menus.

The Right Panel Looks Different. Switch Tabs to See Style Settings.

If you opened Framer 3.0 and thought, “Wait, where’s my style panel?” You’re not alone.

Style settings are now a tab. When nothing is selected, the Agent panel shows by default. My guess is Framer wants you to try the new AI features first. The good news is as long as you select an element, the style panel for your selection will switch on automatically.

Everything else in Style works just like it did before. All your old customization guides? Still valid.

The CMS Panel Got a Glow-Up

Can’t find Edit Fields or Plugins? They used to sit in the top bar. Now they’re tabs in the left panel, right next to Collections.

Two quick things before you go poking around:

• In the Fields tab, double check which CMS collection you’re editing first, before you start editing anything.

• Plugins is where the bulk-import tools now live — worth knowing if you’re migrating a bunch of content instead of typing it in row by row.

Branching: Test Changes Without Touching Production

So What Is Branching, Exactly? Think of it as a way to experiment on your site without any risk of breaking what’s already live. You make your changes on a separate branch, and your live site stays untouched until that branch is applied to main.

Branching is a Pro and Enterprise feature. That tracks, since it’s really built for teams working together. Multiple teammates, or multiple AI agents, can now work on separate branches at the same time without colliding. Main keeps publishing as normal the whole time. Publish a branch on its own and you get a shareable preview URL. You can even branch off an existing branch, not just off main.

Still on Free or Basic? The old method still works fine. Just duplicate the section or component before you touch it, same as always. Slightly more manual, same peace of mind.

Creating a branch only takes a few clicks:

1. Open the Framer project you want to experiment with.

2. Find the current branch name in the top navigation (usually “main”).

3. Select “New Branch” from the branch menu.

4. Give your branch a name that describes the experiment.

5. Start editing without affecting your live website.

A few things worth knowing about Branching:

1. Publishing a branch ≠ publishing your website. You get a shareable preview URL for that branch, while the live site doesn’t budge.

2. Applying a branch ≠ publishing your website. Your site only changes once you publish main itself.

3. Changed your mind after applying a branch? You can revert it from version history, and it lands back in a draft — reviewable, reusable, not gone.

Agent: Making AI Practical for Template Customization

You’ve probably seen videos like “I built a site with AI in 10 minutes”, right? Honestly, I’ve tried. I have never once succeeded. The site could show up within ten minutes, sometimes less, but it never actually looks like what I had in my head, with design.md or not.

If you’ve genuinely cracked this, congrats. Feel free to skip ahead, since the rest of this might be too basic for you. If you’ve hit the same wall I have, here are the five practices that are actually working for me.

1. Give Agents the Repetitive Work. Keep the Creative Work for Yourself.

Say you want to add a Team section. The normal workflow: build a CMS collection for your team (optional, but I’d do it), fill in everyone’s info, then build the section on the page. We’ve covered building CMS manually before — this time, let’s have Agent do it. The trick is listing every field, with its exact type, don’t leave anything to guesswork:

Create a Team CMS collection with fields: Name, Slug, Role (plain text), Photo (image), Bio (rich text), LinkedIn (link) and Email (link)

Handing off repetitive work to Agent sounds like a dream, right? Here’s the catch — it only actually works if you’ve done a little prep first. Like naming each team member’s photo file with their actual name before uploading, so Agent doesn’t guess who’s who.

Honest tip: if something’s quick enough to do by hand, spending time explaining it to Agent (and spending credits to run it) isn’t automatically the win it sounds like.

2. Don’t Start with a Blank Canvas

AI is genuinely powerful, but it can’t read your mind. Describing exactly what you want, clearly and completely, in one shot? Way harder than it sounds.

That’s why starting from a good template is still the move, especially if you’re not a web expert. Working from a template means Agent can build new pages or sections using your existing components and design system, instead of making up its own.

A few tips that’ll help you collaborate better with Agent:

• Select the layer or section first, before you type anything. The more context Agent has, the fewer weird mistakes it makes.

• Use @ mentions to point straight at your existing pages, CMS collections, components, text styles, and color styles.

• Type / to pull in existing skills — like creating a breakpoint — so you’re not typing out the whole process every time

Now that the Team collection exists, let’s go back to our example. Instead of typing “create a new Team section” and hoping for the best, try this instead:

Create a new 'Team' section in @about page after 'Services' section, with a @Heading 2 and a one line description below. Listing 6 team members from @team in 3x2 grid layout, each team member card layout vertically, with a 3:4 ratio photo, a name with @Title text style, and a position with @body text style below. Using @lightest gray as bg color of each team member card. Generous spacing, full width.

Will it come out pixel-perfect? Probably not. But it’ll have everything you actually wanted to say in it, which makes it so much easier to tweak into what you actually want instead of starting the whole conversation over. Same workflow works beautifully for projects, testimonials, blog posts etc.

3. Add a visual reference to your prompt.

That covers what to say. Sometimes what to show matters just as much. Text gets you most of the way there, but a picture closes the gap. Screenshot part of a site you like and mark up what should change. Or sketch something rough yourself, even a few boxes and arrows, and jot down what each piece is meant to be. Drop that into the prompt alongside your text. Words tell Agent what you want. A picture shows it exactly. Give it both, and you’ll spend a lot less time going back and forth to fix what got lost in translation.

4. Break big requests into small prompts.

Cramming too many tasks into one prompt wastes credits and makes it harder to check the results. One task per prompt is the better trade for both sides.

5. Let Agent audit before you publish.

Before anything goes live, Agent can do a pass I used to do by hand: scanning the whole site for the stuff that’s tedious to catch but easy to fix. Ask it to check for broken external links. Have it find and replace a phrase across every page instead of hunting file by file. Point it at every image missing alt text and let it generate some.

It won’t replace your own final look-over. But it’ll clear out the boring stuff first, so your review time goes toward the things that actually need your judgment.

Out of Credits? Connect Your Own AI Agent

Already paying for Claude Code, Codex, Cursor, Antigravity CLI, or Windsurf? You don’t have to be boxed in by Framer’s built-in credit limits. You can connect your existing tools directly. Once you’re connected, the AI runs through your own subscription, completely separate from what Framer meters.

1. Run npx @framer/agent setup in your terminal.

2. Grab your invite link (not the preview link, not the remix link. It’s under Invite → Project link → Copy.)

3. Type /framer with the invite link, and hit enter.

4. Approve the external agent when it asks.

5. Prompt it the same way you’d prompt Agent — build, change, fix, whatever you need.

If the invite link doesn’t connect, try the API route instead: Site Settings → General → API key → Add → Copy, then hand that key to whichever external agent you’re using. If it asks you to pick a folder to work from, any folder is fine — pick whatever works for the project.

How Many Credits Do You Get?

Credit numbers below reflect what’s publicly known at the time of writing. Framer adjusts plans and limits — always confirm current numbers on Framer’s official pricing page before you plan around them.

Based on Framer’s published numbers, here’s roughly what common operations cost:

If you remember nothing else, remember this. The interface reshuffled, but your workflow didn’t. Everything’s one dropdown or one shortcut away now. Branching is a real safety net if you’re on Pro or Enterprise, and duplicating still has your back if you’re not. And Agent? It’s genuinely useful, but only once you stop expecting it to read your mind. Start from a template, be painfully specific — with words and visuals both — keep prompts to one task at a time, and let it handle the boring audits.

That’s Framer 3.0, the parts that actually touch your day-to-day. Go poke around — and if you hit something weird I didn’t cover here, drop it in the comments. I’ll probably turn it into the next post. ❤︎

If you’ve grabbed the free WordWiz Framer template lately, you’re probably ready to tweak it to fit your brand and launch your new website. For those who haven’t discovered it yet, WordWiz is a creative website template crafted for copywriting professionals, content studios, and brand narrative agencies.

It’s designed to work seamlessly even as every detail gets customized, keeping designs polished and content front and center. Even so, new users may encounter a few small snags when updating images, featuring projects or using components in formatted text areas in the CMS detail page

This guide breaks down how to adjust those trickier template sections. Simple, step-by-step tips work for even total Framer newbies.

Image Saturate

Most images in the WordWiz template automatically adopt a black and white style. This keeps the template’s design consistent right from the start.

You can easily adjust this look for existing images or any new ones added. Use the Saturate control in the Style settings.

• Set it to 0% for black and white.

• Set it to 100% to keep the image’s original color.

Work Section in Homepage

The homepage work section is designed to stay tidy and focused. Only the first tag of each project appears here. This keeps things uncluttered and lets your best work take center stage.

Select four of your projects and mark them as Featured in the Work CMS. The content in this section will update automatically.

CMS Detail Row

Inserting extra detail rows adds structured information to your detail page. The process is straightforward and smooth.

• Click the tag to open the editing panel.

• Move your cursor to the position where you want to insert the new row.

• Click the plus icon and search for 2 column row, then select it.

Having trouble placing your cursor between rows or at the end, and the plus button looks unclickable? Try this quick trick.

• Select the row adjacent to where you want to insert the new one.

• Click outside the pop-up editing panel to close it.

• Use the left or right arrow keys on your keyboard to position the cursor correctly.

• You may not see the cursor, but the plus button will become clickable once the cursor is in the right place.

A quick tip helps preserve polished design. Remember to check if the top detail row has a top border. The bottom border is enabled by default.

If you notice a line that appears thicker than others, check the borders of adjacent rows. A top row with a bottom border and the row below with a top border will create a thicker line where they meet.

And that’s it. These small tweaks let you customize WordWiz to your preferences, without losing the elegant, minimalist feel that sets the template apart.

I hope this guide will help you get your site up and running smoothly. If you love your finished WordWiz site, don’t hesitate to share what you build with the world!

Happy launching!

But there’s one last step people often skip before hitting publish: making sure every final setting is locked in. Tweaking your metadata, double-checking form destinations, and connecting your domain so everything works when you go live.

That’s exactly what this post is for. By the end, you’ll feel confident hitting publish. Let’s dive in.

Layout Templates Consistent Structure Simplify Workflows

When building multi-page sites some elements repeat across pages like navigation footers and call-to-action components. Layout templates solve this perfectly by centralizing all shared components in one place.

Update global elements once and the change applies sitewide. This eliminates repetitive edits and preserve consistent design across all pages.

Templates come with global settings by default, and still let you customize or remove them per page whenever you need. Pages automatically take on shared layout structures, so you only need to craft content unique to each page. Here’s how to work with them:

To apply layout template on a page:

• Select the breakpoint on your page

• Go to the properties panel on the right

• Click the plus icon next to Layout Template

• Choose the template you want to apply

• The template will take effect immediately

To remove layout template from a page:

• Select the breakpoint on the page

• Open the properties panel on the right

• Find the applied Layout Template name

• Click the minus icon to remove it

• The page will return to its standalone state

Contact Forms Collect Inputs Finalize Experiences

Set up where submissions go

Framer includes fully native form functionality. You can route submissions to email, webhooks (third party platforms), or Google Sheets with no external tools.

• Select the top-level form frame

• Find the ‘Send To’ field on the right panel

• Fill in the required information for your chosen method

• Set sender name, email subject, and additional details if needed

Set up a post-submission redirect

When someone submits the form, they want to know it worked. A post‑submission redirect sends them to a thank‑you page or URL of your choice, keeping the experience clean and intentional.

Setting up a redirect to a thank‑you page is optional. If the template you’re working with doesn’t come with a thank‑you page, that’s fine too. Most submit buttons include a success state that confirms the submission went through.

If you’d like to set this up, here’s how:

• Select the top-level form frame on the canvas

• Scroll down to find the ‘Redirect’ field on the right panel

• Enter the target URL or select a page within your project

Performance Optimize Speed Elevate Accessibility

A fast, accessible site delivers a smoother experience for visitors while making your content easier to find online. Simple media adjustments can significantly make a big difference in performance and visibility.

Add alt text to images

Alt text is one of the simplest yet most impactful steps for accessibility and SEO. It describes images for screen readers and helps search engines understand your content. The best practice is write clear, simple descriptions and avoid keyword stuffing.

Compress media files

Large images and videos slow your site down. Compress them (under 5MB) before uploading to Framer to save bandwidth and keep things fast.

Use SVG for logos

For logos and icons, SVG files are ideal. They scale infinitely without losing quality, ensuring sharp visuals across all screen sizes, from mobile to desktop.

Site & Page Settings Refine Metadata Lift SEO

Global site settings establish your site’s identity, while page-specific settings let you tailor individual pages for search and visibility. Metadata is how you tell search engines what your site is about, and it directly impacts both usability and visibility.

Global Identity Setup

Site settings apply to every page, setting the foundation for your site’s appearance and functionality.

• Open the settings icon in the top toolbar

• Review and update site title and description

• Set the correct site language for better accessibility and SEO

• Upload favicon, social preview image, and Apple touch icon

Page Search Optimization

Page settings override global values when needed, letting you customize how each page appears in search results and navigation.

• Select any page from the left page list

• Set a clear and unique page title for search engines and browser tabs. Should be unique, keyword-relevant, concise (<60 chars).

• Write a concise page description for better search results. summarizing page content. Should be concise (~160 chars)

• Check or uncheck show in search engines to control indexing

• Review the auto-generated page URL for clarity and consistency

That’s a wrap on the Framer template customize series. You now have all the tools to polish your SEO settings, make your forms work as intended, improve your site performance, and launch a high-performing site with confidence.

All that’s left is to connect your domain, hit publish, and share what you’ve built with the world.

Still not sure where to start yet? Take a look and grab a template here — there are free options for you to play with.

Thank you for following along. Happy creating! Happy launching!

But one question keeps coming up for people at this stage: you click around, make a tweak, and suddenly every copy of that component across the site changes. Or you stare at a complex nav bar component, see almost no editable fields, and think “how do I even change this?”

I get it. Components feel like a trap once you’ve already stabilized your template. But here’s the thing — modifying components doesn’t have to be scary. They’re just reusable, global building blocks. It just takes knowing a few basic rules and steps.

This post is the answer to that question. I’m going to walk you through exactly how to edit Framer template components safely. You’ll learn how to swap your own content without breaking anything, edit nested parts of complex components, adjust variants to match your brand, and even create new variants if the existing ones don’t fit.

By the end, you’ll stop fearing components and start using them to make your template feel truly yours. Let’s dive in.

What you need to know first

When you need to apply similar elements across multiple parts of your site, components let you skip repeating work. As a “global” element, any changes made to this component will be applied to all copies (also known as “instances”) across the website.

You might be wondering: If that’s true, why do all the testimonial cards in the template use the same component but show different text and images? That’s where the magic of variables comes in. Let’s break it down.

How to edit basic properties

The secret behind each recommendation card displaying different information lies in the fact that the template creator has pre-set variables for the component.

The secret that each testimonial cards can display different information is that template creators preset variables inside the component. For properties that set as variables, you can swapping in your own content safely and fast on the right properties panel, without enter the component editing mode:

The secret to those unique testimonial cards? Template creators pre-set variables for the component. For any property marked as a variable, you can swap in your own content fast and safely, without needing to enter component edit mode. Here’s how:

1. Select the component on the canvas

2. Look at the properties panel on the right

3. Replace content to match your brand

These changes will only apply to this instance of the component.

How to edit complicate components

Sometimes you select a component and only see a variant picker on the right. This situation usually occurs when a component is too complex to list all variables simply in the right properties panel. To tweak these nested parts:

1. Double-click the component instance to open the component editing canvas

2. Tweak the component based on your needs

3. Click the “Back” arrow in the top-left to return to the template.

Complex components still work like global elements. Any changes you make here will show up on every instance of the component.

How to switch variants

Variants enable multiple states or styles of a component within a single definition. Most components in a template come with multiple variants. These might be different styles or layouts optimized for different screen sizes. To switch variants:

1. Select the component instance

2. Find the “Variant” dropdown in the right properties panel

3. Choose the variant that fits your content

Need a style that isn’t already there? You can create a new variant too. Here’s how:

1. Double-click the component instance to open the component editing canvas

2. Select the existing variant that’s closest to the style you want

3. Click the “+” button next to the variant to create a new one

4. Tweak the new variant’s style

5. Rename the new variant with a meaningful name

All variants tie back to the “Primary” variant. Tweak the Primary one, and every other variant will update too.

When creating a new variant, pick one without states (the ones without ·hover or ·pressed suffixes).

How to add variables

Variables make component instances highly customizable without breaking the link to the main component. In some cases, to make components better serve your content, you may need to add certain variables within the component. Here’s how:

1. Double-click to open the component edit canvas

2. Drag the property you need from the top menu bar to where you want it

3. Select the new element

4. Click the “+” next to its property in the right panel to create a variable

5. Double-check that the new element looks good in all variants

How to create a new component

If you need something the template doesn’t have

• Create your new element on the canvas

• Right-click the stack and select “Create component”

• Assign a unique name to this component

• When you need to use it, simply drag the element from the Assets panel to use it anywhere in the website

Bonus tip: Duplicate components before tweaking them

Ever hesitated to tweak a component because you weren’t sure if you wanted to keep the change or just test the effect? Here’s how to keep the original template component intact while you experiment:

• Duplicate the component you want to change

• Assign it a unique name to separate it from the original one

This way, you can always go back to the original version if you need to.

You did it! You can now swap content in components without breaking every instance. You can tweak nested parts of complex nav bars or cards. You can adjust variants to fit your brand, and even make new ones if you need.

Remember how components felt like a trap at the start? Now they’re your go-to tool for making your template feel unique. Grab a template to try these component tips out for yourself. See if these skills will make your site customization faster and more intentional.

Don’t want to miss future Framer tips? Follow along! And feel free to drop your finished designs or ask for help in the comments!

She thought she was editing one page, but she was actually tweaking a template that governs every item in her CMS. That’s the tricky thing about CMS detail pages. They aren’t standalone pages. Delete an element, and it’s gone everywhere. Add content without linking it to a CMS field, and every entry winds up with the same static piece.

It’s easy to miss this at first, but understanding it is key to smooth CMS management. Let’s unpack dynamic content and how to use these templates effectively.

Dynamic content

The key to dynamic content is linking these media and text elements to specific CMS fields. Add content directly to the template without this link, and that same static piece will show up on every generated page.

Non-CMS elements

Add any non-CMS element to your template, and it will appear on every single CMS page. You might run into a common issue here. Maybe you add an image or a text that’s not linked to a CMS field, only to find it popping up where it shouldn’t across your collection.

That’s when the conditional visibility feature comes in handy. It lets you control which pages these non-CMS elements appear on.

Conditional visibility

Most templates come with conditional visibility preset for non-CMS elements, which saves you extra setup work. For instance, an image linked to an image field will only display if that field contains an image. No more empty spaces or unwanted elements.

Conditional visibility lets elements show or hide depending on whether the relevant CMS content exists. It’s a simple tool that makes your pages feel more polished and adaptable to different content types.

Setting up the condition takes just a few steps:

• Pick the element you want to manage

• Apply a variable to its visible property

• Choose the relevant CMS content to base your rule on

• Select “is set” as the condition

Format text field

If the conditional visibility setup feels like overkill, there’s a simpler way to edit your CMS detail pages. This works perfectly if you don’t have strict styling requirements and want to avoid most non-CMS element headaches.

That simpler solution is the format text field. It works a lot like Notion, letting you use different heading hierarchies, body text, images, videos and more.

Best of all, it’s a dynamic field. You won’t have to worry about content you create here showing up on other CMS detail pages.

This option is ideal for blog-style CMS collections where simple formatting is enough. It’s not a great fit though when you want more creative, personalized layouts that require precise design control.

Update CMS detail page after adding new fields

Framer automatically populates your template with fields from your chosen collection when you first create it. Once the detail page is built though, any new fields you add to the CMS won’t show up automatically. You’ll need to add them to the template manually.

Here’s how to update your page:

• Add the new field to your CMS collection (check out how to add new fields)

• Add content to the new field for every collection item

• Go to the canvas, insert a new element and connect it to the new CMS field via variables

Add new CMS detail page

There are times when the preset CMS options don’t meet your project’s needs. Maybe you’ve built a new CMS collection and now you’ll likely need a detail page to showcase each item’s full content.

Here’s how to add a new CMS detail page to your site:

• Access the Pages tab in your project canvas

• Click the plus icon and select New CMS Page

• Choose the CMS collection you want to link

• Select either an index page (for listing multiple items) or a detail page (for single item layouts)

To wrap up, we’ve covered everything you need to navigate Framer CMS detail pages without the headaches. You now know they work as reusable templates where every change ripples across your collection. You’ve learned how dynamic content links to CMS fields to keep pages unique and how non CMS elements can be controlled with conditional visibility.

We also walked through simpler shortcuts like the format text field for basic layouts and steps to update or add new detail pages when your CMS grows. These small but crucial insights will save you hours of troubleshooting and help you build more flexible sites.

I hope this post made Framer CMS feel less intimidating and more approachable. Grab a template to dive in and put these tips to the test. You’ll see how much smoother your content management becomes.

Don’t want to miss future Framer tips? Follow along! And feel free to drop your finished designs or ask for help in the comments!

Before you start editing your CMS, here’s a tip to save you hassle. Wait to delete example items until your own content is fully prepared. Rushing this step can disrupt how collection lists render across your site.

Once you’ve got your content fully prepared, it’s time to add it to your CMS.

Add item

To add a new item to a CMS collection,

1. Click CMS in the top menu bar.

2. Select the CMS collection you want to edit.

3. Click ‘New Item’ to add your content manually or import a CSV file.

Need to create a new collection? Simply click ‘add’ at the end of the collection list.

Order

if you want to reorder your items, you can either drag and drop them manually, or click on the column label at the top like date or title to sort them automatically based on the content in that field.

Edit fields

In the template, you’ll find pre-built CMS collections. If the fields in your content management system collection could contain everything you need, that would be perfect. But in many cases, you’ll want to tweak them to match your specific requirements, and here’s how to do it:

1. Click CMS in the top menu bar.

2. Click the three dots icon next to the CMS collection you want to edit.

3. Click ‘Edit fields’ from the menu.

Within the CMS fields editing panel, you can:

• Reorder fields using drag and drop to arrange them in a logical flow.

• Remove any fields you don’t need by right-clicking them and selecting the delete option.

• Add new fields by clicking the plus icon in the top right of the fields panel

Most Commonly Used Fields:

Text:

• Plain text field: Best for short content such as names or titles

• Formatted text field: Ideal for longer content like blog articles

Image:

• Image field: Support a single image such as a blog cover or profile photo

• Gallery field: For multiple images like product details or portfolio galleries.

Other properties:

• Date: Display a custom date

• Link: Used to insert internal or external links.

• Toggle: Usually used to mark items as featured or highlight specific content.

• Number: Useful when you want to manually order items in the collection.

Related to other CMS collections:

• Reference: Creates a connection to one item in another collection.

• Multi-reference: Links to multiple items in another collection.

Bonus tip:

1. Organize fields with the ‘divider’ to group related items and improve clarity.

2. Mark important fields as required by toggling the ‘required’ option to yes. This reminds anyone adding new items to the collection to fill in essential information.

Draft

Draft functionality helps teams avoid publishing unfinished work. It keeps content visible in editor and preview modes without making it live.

Remove draft status by unmarking the draft option, or dragging CMS items to the ‘all’ section, then publish the site.

Content style

For CMS collection list, we only need to design out the first item, and Framer will automatically apply those changes to every item in the list.

Managing Content Display with Collection List Properties

CMS are great for showcasing content but their default setup might feel limiting. With collection list properties, you can fine-tune everything from which items appear to their order. This flexibility ensures your collection displays exactly as you envision.

• Source: Defines which CMS collection the list pulls data from.

• Sorting: Controls item order using fields like date title or a custom number field.

• Filters: Narrow down displayed items based on field values (e.g., showing only featured posts).

• Pagination: Splits large collections into smaller, manageable chunks for display.

• Limit: Controls the number of items shown.

• Start Offset: Skips a specified number of items to avoid duplicates or create staggered layouts.

Whether you’re testing Framer for your workflow or fixing your current CMS setup, fire up the starter template. Apply these CMS steps to your own content snippets and see firsthand how well it fits your site’s needs. You’ll either confirm it’s a match or smooth out your existing collection. Either way, you’re moving forward with your project.

Don’t want to miss future Framer tips? Follow along! And feel free to drop your finished designs or ask for help in the comments!

A color change that doesn’t apply across pages, a font update that throws off spacing, and suddenly frustration grows as the template gets more muddled than cohesive.

That’s why I decided to kick off this Framer guide. It focuses on the most practical, actionable hacks to turn a template from “good” into “custom-built-for-your-brand.” You don’t need to be a Framer master to make a template truly your own.

Let’s start by walking through the core style adjustments: colors, text, and links.

Color styles

Color is the backbone of brand recognition, but it can slip out of control easily. A consistent palette makes the website feel tied to your brand the second someone lands on it. Nailing this step lays the groundwork for every other visual tweak.

• Step 1: Find color styles in Asset panel

• Step 2: Update each color style with your brand colors

• Step 3.1: If your brand has more colors than the current palette

  • 1) Add a new color style in the Asset panel;

  • 2) Identify which colors you want to replace;

  • 3) Navigate to elements using those old colors, then reassign them to your new brand color styles

• Step 3.2: If your brand uses fewer colors than the current palette:

  • 1) Find which colors you want to replace;

  • 2) Go to elements using these colors, then reassign them to your new brand color styles

• Step 4: Scan all pages to verify colors are applied consistently

• Step 5: Use the Find tool to search for unused color styles

• Step 6: Delete any unused color styles to streamline your Asset panel

Text styles

Typography is one of the foundational property in your brand identity. It shapes how your audience perceives your brand. Aligning text styles with your brand ensures the site looks like it belongs to your brand.

• Step 1: Find text styles in the Asset panel

• Step 2: Update each text style to match your brand typography

• Step 3: Adjust font sizes across Desktop, Tablet, and Phone views to ensure readability across devices

• Step 4: Review all pages to confirm fonts are applied correctly

• Step 5: Use the Find tool to check for unused text styles

• Step 6: Delete any unused text styles to keep your Asset panel clutter-free

Bonus Tip: If you can’t find the your brand typography in Framer Font list, you can upload fonts in your workspace setting, and the font will show after reloading the file.

Link styles

In many cases, we wrap links in Button (which we’ll talk more about it in components update guide later), Different from Button, link style is apply to text that contained a link. It would be better update after color palette has been updated.

• Step 1: Find and locate where link styles are applied

• Step 2: Update the default and hover state color

• Step 3: Preview to test that links look and function as intended

Now that you’ve got these core style tweaks down, ready to play around? Grab the starter template and explore Framer to test out your new style skills, and watch your brand come to life on the page.

Don’t want to miss future Framer tips? Follow along! And feel free to drop your designs or ask for help in the comments!