Field Notes · Craft
Framer makes it easy to start — and just as easy to build a mess.
Framer makes building a beautiful site feel effortless — which is exactly where beginners get into trouble. A site that looks great in the editor isn’t always well-built. Here are the 18 most common mistakes, and how to avoid them.
Topic
Craft & Structure
Read Time
12 min
Level
Beginners
Updated
Jul 2026
01 / The Premise
You’re not building pages — you’re building systems
With an intuitive interface, a responsive layout system, and built-in animations, Framer lets you build a beautiful website in a few hours, even as a complete beginner. But a website that looks great in the editor isn’t necessarily well-built. As projects grow, poor structure, duplicated work, and performance issues become increasingly hard to manage.
After working on everything from small landing pages to enterprise sites with thousands of CMS items, the same beginner mistakes appear again and again. The difference between a project that stays enjoyable to maintain and one that becomes a burden is almost always structure.
What beginners build
Pages, one at a time
Duplicated sections
Manual, repeated edits
Untitled layers
What experienced builders build
Reusable components
A shared design system
Variables for everything
A planned CMS
Layouts that adapt
The rule of thumb
If something appears more than twice, make it a component.
Most beginner pain comes from repetition. Reusable components, variables, and slots don’t just save time — they keep every future change to one place instead of ten.
02 / Foundations
Mistakes that break your foundation
These are the early decisions that quietly shape everything else. Get them right and the rest of the project stays manageable.
01
Design without a system
Creating new sizes, colors, and spacing on the fly leads to 14 font sizes, three shades of the same grey, and buttons that never quite match. Before you place a single section, define your typography scale, color palette, spacing steps, corner radius, and shadows. With a system in place, every new page snaps into consistency instead of becoming another thing to fix later.
02
Ignoring components
Duplicating sections feels faster in the moment, but it means maintaining dozens of identical copies by hand. The rule is simple: if an element appears more than twice — a nav bar, a card, a CTA, an FAQ row — turn it into a component. Then a single edit updates every instance across the site, and your project stays light and easy to change.
Appears more than twice? → Make it a component.
Truly one-off? → Keep it inline.
03
Designing mobile last
Perfecting the desktop layout and only opening mobile at the end hides broken columns, overflowing text, and buttons too small to tap. Responsive design works best when it happens as you build, not as a cleanup pass. Check every section across desktop, tablet, and mobile while it’s fresh, so problems get solved in seconds instead of unraveling later.
04
Duplicating per breakpoint
Hiding and showing separate desktop, tablet, and mobile versions of the same section means every edit has to happen three times — and sooner or later the versions drift apart. Instead, build one layout and let stacks, fill sizing, and constraints adapt it to each screen. One responsive layout is faster to make, easier to maintain, and far less likely to break.
05
Nesting too many stacks
Stacks inside stacks inside stacks bury your elements and make even small changes feel like surgery. Every wrapper should earn its place by controlling alignment, spacing, or direction. A good test: if removing a stack changes nothing on the canvas, you never needed it — flatten the structure and your layers stay readable.
06
Misusing Fill, Fixed & Fit
Stretched cards, over-wide paragraphs, and elements that won’t line up almost always come down to sizing. Take time to understand Fill, Fit, Fixed, Max Width, and constraints, and how they interact inside a stack. Once these click, the majority of your responsive bugs disappear without a single hack.
Should it stretch to fill space? → Fill.
Should it hug its content? → Fit.
Needs an exact size? → Fixed.
07
Uploading huge images
Full-resolution PNGs straight from the camera or export can weigh several megabytes each and drag down every page. Resize images to the size they actually display, then compress them before uploading. Use JPG for photos, PNG only when you need transparency, and SVG for icons and logos so they stay crisp at any scale.
Photograph? → JPG.
Needs transparency? → PNG.
Icon or logo? → SVG.
08
Replacing everything with video
Looping background video in every section looks impressive but quickly balloons page weight and battery use. Before reaching for video, ask whether the motion communicates something a still image can’t. If the answer is no, use an image — and when video is truly worth it, compress it and keep the clips short.
09
Using variants for everything
Variants are powerful but often misunderstood. Creating a new one for every color, size, spacing, or icon change buries a component in dozens of states that are hard to maintain. Reserve variants for real changes in structure or behavior — hover states, horizontal vs. vertical layouts, with or without an image, expanded vs. collapsed — and let variables handle styling values like color, radius, spacing, typography, and opacity.
Different layout or interaction? → Create a variant.
Same layout, different values? → Use variables.
The rule of thumb
Design for the smallest screen first, then let it grow.
Most layout bugs hide on mobile until launch day. Start narrow, get the essentials right, and scaling up to tablet and desktop becomes the easy part.
03 / Scaling & Polish
Mistakes that surface as you grow
As a project gets bigger and closer to launch, these are the habits that keep it fast, accessible, and easy to maintain.
10
Leaving layers untitled
Frame 34, Group 12, and Rectangle 17 might make sense while you’re building, but they turn a project into a maze a week later — or for anyone else who opens it. Name layers as you go, using their role: Hero, Navigation, Pricing Card, Footer. Clean naming makes components, handoff, and future edits dramatically easier.
11
Ignoring performance until launch
Waiting to check speed until after publishing surfaces oversized media, layout shifts, and render-blocking assets far too late to fix comfortably. Treat performance as part of the build, not a final chore. Run Lighthouse, PageSpeed Insights, and browser DevTools throughout so small issues get caught before they compound.
12
Skipping real devices
The editor preview looks flawless, and then a real phone shows wrapped headings, awkward gaps, and tap targets that overlap. Emulators and preview modes only approximate the real thing. Test on an actual phone, a tablet, and a large monitor before you publish, so what you ship matches what you designed.
13
Building everything from scratch
Rebuilding navigation, sliders, accordions, and forms that already exist is a slow way to learn the hard way. Experienced creators have already solved these patterns cleanly. Study well-made templates and components to understand better structure — then adapt those ideas instead of reinventing them each time.
14
Not using variables
Updating brand colors, spacing, or timing by hand across dozens of pages is slow and almost guarantees inconsistencies. Variables let you define a value once and reuse it everywhere. Set up variables for brand colors, spacing steps, corner radius, animation duration, and opacity, and site-wide changes become a single edit.
15
A messy CMS structure
Collections built without a plan lead to duplicated fields, awkward filtering, and content that’s painful to reorganize later. Think through your structure first: what repeats, how items relate, and where Reference fields connect collections together. A little planning up front keeps the CMS flexible as your content grows.
16
Overusing animations
When every heading fades, every image slides, and every button bounces, the motion stops feeling special and starts getting in the way. Animation should guide attention, not compete for it. Use it intentionally — gentle fades, subtle movement, and small hover micro-interactions — so the effects that remain actually mean something.
17
Forgetting accessibility
Low contrast, tiny touch targets, and missing alt text quietly exclude real people from using your site. Accessibility isn’t an add-on; it’s part of doing the job well. Check color contrast, font sizes, tap targets, keyboard navigation, and focus states as you build — most fixes are small and improve the experience for everyone.
18
Not using slots
Making a brand-new component every time the content changes slightly leaves you with a pile of near-identical duplicates. Slots solve this by letting one flexible component accept different content while keeping its structure. Build a single well-made component with slots, and it can power many layouts without multiplying your maintenance.
The rule of thumb
Decide your system before you place a single section.
Typography, color, spacing, and radius chosen up front stop a project from sprawling into fourteen font sizes and buttons that never quite match.
04 / Habits
A quick pre-flight checklist
Define styles, colors, and spacing first
Reuse components instead of copying
Design mobile as you build, not last
Make layouts responsive, not duplicated
Keep your layer structure shallow
Master Fill, Hug, and constraints
Compress images before uploading
Use video only when it adds value
Name every meaningful layer
Create variables for shared values
Plan your CMS before building
Test on real devices before launch
The rule of thumb
If it feels slow to change, your structure is wrong.
Good structure makes edits boring. When one small change means touching ten places, that’s your signal to reach for components, variables, and slots.
05 / Takeaway
The best projects are built as systems
Most beginners think they’re building pages. Experienced Framer users know they’re building systems — and every decision affects how easy the site is to maintain months from now.
The best Framer projects aren’t always the most visually impressive. They’re the ones that stay organized, perform well, and remain enjoyable to work on long after launch.
06 / Availability — 07 / Contact
Open Channel
Hiring for Q4
One founder, fully embedded. I take on a small number of partners each quarter, so every system gets the attention it deserves.
© 2026 The Good People Studio LLC · Wyoming, USA · Worldwide