Frequently Asked Questions About UIX Design Academy Framer Site Builder
21 answers covering everything from basics to advanced usage.
// Basics
What is the Design canvas in Framer and why build there first?
The Design canvas is Framer's dedicated design-mode page, separate from Pages, where you create your color palette, typography scale, and imported assets before building any page. Building here first — on a page you rename 'Assets' — gives you a single source of truth. It eliminates back-and-forth with external tools and ensures every style exists as a token before you apply it.
What is a Vector Set in Framer?
A Vector Set is Framer's optimized SVG asset container, created automatically when you import SVG files and accept the prompt. It stores multiple SVG icons or logos as a single addressable asset accessible from the Assets panel on any page. It's ideal for logo strips and icon collections used across a Ticker or throughout the site.
What are Variables and Variants in Framer components?
Variants are alternative visual states of a component (Primary, Secondary, Ghost, Small, Hover), defined inside the component editor. Variables are named editable properties — text content, color, icon, or visibility — that you change per instance from the parent panel without entering the component. Together they make a single component flexible enough to cover every use across your page.
Do I need to build mobile layouts, and when?
Yes, but build the desktop layout completely first. Framer creates the Desktop breakpoint by default; you address mobile and tablet breakpoints only after desktop is finished. Because everything is built with Stacks and styles, the responsive foundation is already in place, so adapting breakpoints becomes adjusting stack directions, gaps, and text widths rather than rebuilding.
// How To
How do I build a reusable Button component in Framer?
Draw a button frame, add a text label, set radius to 99 for a full pill, then convert to a Component with Option+Command+K. Create a 'label' plain-text Variable and a 'show icon' visibility Variable defaulting to hidden. Add Small variants with reduced padding for the navbar, a Ghost variant with no fill or border, and Hover states for each — like a black fill on Primary hover.
How do I set up the typography scale correctly?
Use the Text tool to create H1–H6 in Bold with your chosen font (H1=64 down to H6=16), setting letter spacing from -4 on H1 tapering toward 0 and line height 1.1 for headings. Add body sizes 18, 16, 14 in Regular and Bold at line height 1.5, plus a 12pt uppercase Caption. Save each as a Text Style using slash-delimited names like 'P/16/Bold' to create folders.
How do I make logos scroll full-width across the page?
Use Framer's built-in Ticker component (press I and search 'ticker'), add all your brand logo SVGs from the Vector Set at a consistent height, and crucially place the Ticker outside the fixed-width 1000px Container as a direct child of the Section frame. Set speed to about 25% and hover speed to about 10%. If you leave it inside the Container, logos get constrained and won't scroll full-width.
How do I stagger animations so they feel designed?
Add incremental delays to sequence elements from background to foreground — typically 0.2s, 0.4s, 0.6s, 0.8s. Vary the slide direction too: logo slides in from left, nav links from bottom, CTAs from right. Use Spring for lightweight elements and Ease Out for large images and text blocks. Identical timing and direction reads as mechanical, so variation is what makes the sequence feel intentional.
How do I preview my work correctly while building?
Preview at every major milestone using Command+P to open the preview and Command+R to reload it. Check that animations fire in the correct order, no drop shadows are clipped, section spacing is consistent, and all button and nav link hover states work. Frequent previewing catches overflow, timing, and spacing issues early, before they compound across multiple sections.
// Troubleshooting
Why are my drop shadows getting cut off in Framer?
Your parent frame's overflow is set to Clip, which is the default. When child elements have drop shadows or extend beyond their bounds — like the hero image rings or floating Icon Cards — set overflow to Visible on the immediate clipping parent frame. Check this during preview at every milestone, since clipped shadows are one of the most common issues in this workflow.
Why is my hero text reflowing unexpectedly at different widths?
You've likely set headline or body text to Fill width, which causes it to reflow as the container resizes. For critical hero text blocks, set them to Fixed width after the layout is established — around 450px for the H1 and 400px for the subtext. Fill width is fine for cards that should stretch, but not for headlines you want to control precisely.
Why do my scroll animations fire at unpredictable positions?
You've added scroll-triggered animations to child elements without first assigning a named Scroll Section to their parent Section frame, so the animation has no spatial anchor. Fix it by giving each Section a unique Scroll Section name, then set each child's Appear trigger to 'Section In View' referencing that name. Set the trigger position to the center of the viewport as a reliable default.
My animation looks cartoonish and bouncy — how do I fix it?
You've set bounce too high on the wrong elements. Keep bounce above 0.6 only for small, lightweight UI like icon cards and buttons. For text and image animations, lower the bounce or switch to Ease Out for a clean deceleration. The goal is subtle motion that makes the design feel alive and professional, not to showcase the animation tool.
// Comparisons
How does this workflow compare to a generic 'just start dragging elements' approach?
A generic approach applies raw hex values and font sizes directly and duplicates loose elements, making global updates impossible and consistency fragile. This workflow enforces styles before styling, components before duplication, and a strict Section → Container → Content hierarchy. The result is a site refactorable from single panels, where changing your brand color or headline copy takes one edit instead of dozens.
How does Framer compare to Webflow for this kind of landing page?
Both are no-code visual builders, but this workflow leans on Framer's specific strengths: native Appear, Scroll, and Loop animations with Spring physics, an integrated Design canvas for design systems, and component Variables editable from the parent panel. Webflow offers deeper CMS and class-based CSS control. For a fast, heavily animated marketing landing page built from scratch, Framer's animation and component model make this workflow especially efficient.
When should I duplicate a section versus building a new one from scratch?
Always duplicate the nearest structural match rather than building from scratch when an existing section already has the correct Section → Container structure. Delete its inner content and adapt it. This preserves padding, background, and spacing consistency automatically. Building fresh risks inconsistent padding and misaligned containers, which then require manual correction to match the rest of the page.
// Advanced
How do I create the floating effect on hero icon cards?
Layer a Loop effect on top of each icon card's Appear effect. Set the Loop mode to Mirror so the element oscillates back and forth, and give each card a unique Y offset (e.g. -10, +20, +6) so they float out of sync. Use a 4-second duration with Linear easing. The varied offsets create organic, non-synchronized vertical floating rather than a mechanical uniform bounce.
What is a Scroll Transform and when do I use it?
A Scroll Transform ties an animation to the user's scroll position rather than a trigger event. In this workflow it's used on the feature image to scale from 1.4× down to 1× and fade in as the section scrolls into view, triggering when the section's bottom hits the viewport. Use it when you want motion that responds continuously to scrolling, not a one-time entrance.
How do I make a footer column show icons for social links but hide them for product links?
Build the Footer Column component with 'show icon 1' through 'show icon 5' visibility Variables, each defaulting to hidden. On your social or contact column instance, toggle the relevant show-icon Variables on; on product columns, leave them off. This lets one component serve every footer column while controlling icon visibility per row from the parent panel.
How do I create a curved transition between two sections?
Add a decorative bottom-curve PNG (exported at 2x, width set to Fill) at the bottom of a section to create a rounded transition into the next. For a mirrored wave at the top of a following section, duplicate the curve and use the Flip plugin — Command+K, search 'flip', flip on the Y axis. This gives smooth, designed section-to-section transitions.
What's the difference between Spring and Physics Spring easing?
Spring uses duration and bounce parameters (0 = none, 1 = max) to produce a natural overshoot and return, ideal for buttons and text. Physics Spring is a sub-mode using stiffness (~500), damping (~25–50), and mass (~1–5) instead, giving more organic, weight-sensitive motion. Use Physics Spring for rings expanding or cards sliding in where you want realistic momentum rather than a fixed-duration bounce.