UIX Design Academy Framer Site Builder

// When should you use the UIX Design Academy Framer Site Builder?

Use this skill when you need to design and publish a modern landing page in Framer, starting from scratch, and want a repeatable, professional workflow covering design tokens, component architecture, layout structure, and animation — from first frame to final preview.

// What do you need before you start building your Framer landing page?

• Brand color hex code(s)required
  At minimum a primary brand color, a light background color, a dark text color, white, and black.
• Typeface namerequired
  The Google Font or system font to use for all headings and body text (e.g. Manrope).
• Page copyrequired
  All text content: headline, subheadline, body paragraphs, nav links, button labels, testimonial quote, footer links, and legal text.
• Visual assetsrequired
  Hero image(s), illustration(s), brand logos (SVGs preferred), and any decorative PNGs, exported at 2x.
• Section listrequired
  Ordered list of sections to build, e.g. Navbar, Hero, Trusted Logos, Cards, Feature, Testimonial, Footer.

// What core principles guide this Framer building workflow?

// How do you build a Framer landing page step by step?

1. 1

   Create a new blank Framer project and name it immediately

   Do not start with a template. Name the project before doing anything else to avoid losing work under an untitled file.

2. 2

   Switch to the Design canvas and rename the auto-created page 'Assets'

   All design system work lives here, not on the pages canvas. This is your single source of truth for colors and type.

3. 3

   Build the color palette: draw 100×100 rectangles, apply each brand hex, then save each as a named Color Style

   Required styles at minimum: White, Light, Brand (primary), Dark, Black. Apply a stroke to the white swatch so it is visible on canvas. Name styles exactly as you will reference them in conversation with teammates (e.g. 'brand', 'dark', 'light').

4. 4

   Build the typography scale using the Text tool and save each variant as a named Text Style

   Create H1–H6 using the chosen font in Bold. Recommended sizes: H1=64, H2=48, H3=32, H4=24, H5=20, H6=16. Letter spacing: H1 = -4, tapering toward 0 at smaller sizes. Line height: 1.1 for all headings. Body sizes: 18, 16, 14 — each in Regular and Bold. Line height 1.5 for body. Caption: 12pt, Uppercase transform, letter spacing +4, line height 1. Use slash-delimited naming for Text Styles to create folders: 'P/18/Regular', 'P/16/Bold', 'Caption/12/Regular'. Heading styles: 'H1' through 'H6'.

5. 5

   Import all visual assets: drag in PNGs and SVGs; accept Framer's prompt to create a Vector Set for SVG icon files

   Export images at 2x before importing. Organize imported assets on the Assets canvas. SVG icon sets (logos, illustration elements) become a single selectable asset accessible from the Assets panel on any page.

6. 6

   Navigate to Pages, select the Home page, and set up the desktop breakpoint as your working frame

   Framer creates the Desktop breakpoint by default. Build desktop layout first; mobile/tablet breakpoints are addressed after desktop is complete.

7. 7

   Build the Button component with Primary and Secondary variants, label Variable, and optional icon Variable

   Draw the button frame, add a text label, set radius to 99 (full pill). Convert to Component (Option+Command+K). Create a 'label' plain-text Variable so the button text is editable from the parent page. Create a 'show icon' visibility Variable defaulting to hidden. Add Small variants (Primary SM, Secondary SM) with reduced padding (12px top/bottom, 32px left/right) for navbar use. Add a Ghost variant with no border and no fill. Set up Hover states: Primary hover → black fill, white text, drop shadow; Secondary hover → 10% white fill overlay, drop shadow; Ghost hover → bold weight, black text.

8. 8

   Build the Icon Card component with icon, background color, and icon color Variables

   Frame: 80×80px, radius 20, white fill, drop shadow (Y=16, Blur=32, brand color at 50% opacity). Place a Material icon inside at 40×40. Convert to Component. Create Variables: 'icon' (icon picker), 'icon color' (fill), 'background' (fill). This lets you swap icon and colors per instance without entering the component.

9. 9

   Build the Nav Link component with a content Variable and a Bold/Black Hover state

   Single text element set to Fit Content in both dimensions. Convert to Component. Create a 'title' text Variable. Add Hover state: Bold weight, Black color. Use for all navigation links.

10. 10

    Build the Card component with icon, title, and description Variables

    Card frame: white fill, dark stroke (2px), radius 20, drop shadow (Y=4–8, Blur=0, dark color). Inside: icon badge (64×64, brand color, radius 12) + H4 title text + 16 Regular body text, all in a vertical Stack with 20px gap. Convert to Component. Create Variables: 'icon', 'title', 'description'. Set card width to Fill so it stretches within its parent container.

11. 11

    Build the Footer Column component with category title, up to five link rows, and a show-icon Variable per row

    Each row is a horizontal Stack: icon (Material, 20px, light color) + link text (14 Regular, light color). Stack all rows vertically with 20px gap. Title text: 14 Bold, white. Convert to Component. Create Variables: 'title', 'link 1'–'link 5', 'icon 1'–'icon 5', 'show icon 1'–'show icon 5' (visibility, default hidden). This allows social/contact columns to show icons while product columns hide them.

12. 12

    Build the Navbar section using the Section → Container → Content hierarchy

    Section: white fill, 20px top and bottom padding. Container: 1000px fixed width, horizontal Stack, Space Between distribution. Left: Logo SVG at 32px height. Center: Nav Links Stack (horizontal, 40px gap). Right: Actions Stack (horizontal, 12px gap) with Secondary SM and Primary SM button instances. Nav Links should use the Nav Link component so Hover states work.

13. 13

    Build the Hero section using the Section → Container → Content hierarchy

    Section: radial gradient fill (brand color → white, positioned top-left), 80px top and bottom padding. Container: 1000px, horizontal Stack, Space Between. Left content Stack (vertical, 40px gap): eyebrow text (Caption Bold, brand color) → Title Stack (eyebrow + H1, 8px gap) → H1 headline (fixed width ~450px) → paragraph subtext (P/16/Regular, fixed width ~400px) → Actions Stack (buttons, horizontal, 20px gap). Right: Image frame (550×550), containing the hero PNG, two white stroke rings (450px and 400px diameter at 50% and 25% opacity), and three floating Icon Card component instances positioned decoratively over the image. Set image frame overflow to visible so ring shadows are not clipped.

14. 14

    Build the Trusted Logos section

    Duplicate the Hero section shell. Remove inner content. White background, 80px top and bottom padding. Container: vertical Stack, Center distribution. Add an H4 title in brand color, centered. Add a Ticker component (press I, search 'ticker') containing all brand logo SVGs from the Vector Set at a consistent height (e.g. 40px), horizontal layout, 40–80px gap. Set logos to 90% opacity. Set ticker speed to ~25%, hover speed to ~10%. The Ticker sits outside the Container so logos scroll full-width. Assign this section a Scroll Section name: 'logos'.

15. 15

    Build the Cards (Capabilities) section

    Duplicate a section shell. Light color background, 80px padding. Container: vertical Stack, 40px gap. Top row: horizontal Stack, Space Between — left side has H2 headline + caption eyebrow; right side has paragraph subtext. Bottom row: horizontal Stack, Fill, containing three Card component instances with distinct icons, titles, and descriptions. Set card widths to Fill. Add a decorative bottom-curve PNG (exported 2x, width set to Fill) at the bottom of the section to create a rounded transition to the next section. Assign Scroll Section name: 'cards'.

16. 16

    Build the Feature section

    Duplicate the Hero section shell. White background, 80px padding. Container: horizontal Stack, Space Between. Left: vertical Stack with icon badge, H2 headline (fixed width), paragraph, Secondary button + Ghost button in an Actions Stack. Right: feature illustration image with a ring and decorative color blob. Set overflow visible on all parent frames so drop shadows on the icon card are not clipped. Assign Scroll Section name: 'feature'.

17. 17

    Build the Testimonial section

    Duplicate a section shell. Add the flipped bottom-curve PNG at the top (use the Flip plugin: Command+K → 'flip' → flip on Y axis) to create a mirrored wave. Container: horizontal Stack. Left: testimonial image. Right: vertical Stack containing rating stars (Star SVGs in a horizontal Stack, converted to a Rating component, duplicated ×5), H3–H4 quote text (line height 1.4, fixed width), and a horizontal Stack with a small logo + vertical separator (1px wide, 1FR height, 25% opacity) + author name and company text. Assign Scroll Section name: 'testimonial'.

18. 18

    Build the Footer section

    Duplicate a section shell. Dark background color, no top padding (curve image sits flush). Container: vertical Stack, 40px gap. Top row (horizontal Stack, Space Between): Left sub-stack (logo + tagline paragraph + email form component) and Right sub-stack (3–4 Footer Column component instances in a horizontal Stack, 80px gap). Bottom row: 1px horizontal separator frame (Fill width, dark/light color at 25% opacity), then a horizontal Stack (Space Between) with copyright text on left and legal links (Terms, Cookie Settings) on right — links underlined, 50% opacity, +3px underline offset. Legal link text: 14 Regular, light color.

19. 19

    Add Appear animations to Navbar elements with staggered Spring delays

    Logo: Appear → Slide In Left, Spring, duration 0.8, bounce 0.2, delay 0. Nav links stack: Appear → Slide In Bottom, Spring, duration 0.8, bounce 0.4, delay 0.2. CTA actions stack: Appear → Slide In Right, Spring, duration 0.8, bounce 0.4, delay 0.4.

20. 20

    Add Appear animations to Hero section elements with staggered delays

    Eyebrow text: Appear → Slide In Left, Spring, duration 0.8, bounce 0.2, delay 0.4. H1 headline: Appear → Text → Stagger (by Word), Spring, duration 0.4, bounce 0.4, delay 0.2. Subtext paragraph: Appear → Fade In, Ease Out, duration 1.0, delay 0.8. Actions Stack (buttons): Appear → Slide In Bottom, Spring, bounce 0.6, delay 0.4. Hero image: Appear → Scale In (start scale 1.4, opacity 0), Ease Out, duration 0.6, delay 0.6. Rings: Appear → Scale In (start scale 0, opacity 0), Physics spring (stiffness ~500, damping 25), delays 0.2 and 0.4. Icon Cards: Appear → Slide In (from card's directional offset), Ease Out, duration 0.6, opacity starts at 1 (visible on arrival), delays 0.6–0.8.

21. 21

    Add Loop animations to the floating Icon Cards in the Hero

    Each Icon Card gets a Loop effect on top of its Appear effect. Loop mode: Mirror. Y offset values should differ per card to create organic, non-synchronized vertical floating (e.g. card 1: Y=−10, card 2: Y=+20, card 3: Y=+6). Duration: 4 seconds. Easing: Linear. This creates a continuous, slow floating effect.

22. 22

    Add Scroll Section-triggered animations to all remaining sections

    For each section (logos, cards, feature, testimonial, footer): (1) Assign the Section frame a unique Scroll Section name. (2) For child elements, add Appear effects with trigger set to 'Section In View', referencing their parent section name, replay OFF, exit OFF. Use Slide In Top or Slide In Bottom for structural text and CTAs. Use Physics spring (damping 50, mass 5) for cards entering from left/right/bottom. Use Ease Out for text blocks and images. Set trigger position to 'center of viewport' as the default. Cards section: heading Ease Out 0.4s, individual cards from left/right/bottom with Physics spring. Feature section: icon Slide In Top, image Scroll Transform (scale 1.4→1, opacity 0→1, triggers when section bottom hits viewport). Logos section: title Slide In Top, ticker Slide In Bottom.

23. 23

    Preview at every major milestone using Command+P and Command+R to reload

    Check: (1) all animations fire in correct order, (2) no drop shadows are clipped — if they are, set overflow to Visible on the clipping parent frame, (3) spacing between sections is consistent, (4) hover states on all buttons and nav links work correctly.

// What does this Framer workflow look like in real projects?

// What common mistakes should you avoid when building in Framer?

• Skipping the Assets canvas design system phase and applying raw hex colors or font sizes directly — this makes global updates impossible and breaks style consistency.
• Forgetting to save Color Styles and Text Styles before using them — raw values applied directly to elements cannot be bulk-updated later.
• Not converting repeating elements to Components before duplicating them — you end up with disconnected instances that must be edited one-by-one.
• Not creating Variables for every property that will differ across component instances — without Variables you must double-click into each component to make changes, losing the efficiency of component-driven design.
• Setting parent frame overflow to Clip (default) when child elements have drop shadows or extend beyond their bounds — shadows get cut off; set overflow to Visible on the immediate clipping parent.
• Using Fill width on headline and body text in the hero section — this causes text to reflow unexpectedly at different container widths; set critical text blocks to Fixed width after the layout is established.
• Adding scroll-triggered animations to child elements without first assigning a named Scroll Section to their parent Section frame — the animation has no spatial anchor and fires at unpredictable scroll positions.
• Making all animations the same speed and direction — identical timing reads as mechanical; stagger delays and vary slide directions (left/right/top/bottom) to make the sequence feel designed.
• Setting bounce too high (above 0.6) on text or image animations — overshooting looks cartoonish; reserve high bounce (0.6–0.8) for small, lightweight UI elements like icon cards or buttons.
• Placing the Ticker component inside the 1000px Container — logos will be constrained to the container width and won't scroll full-width; the Ticker must be a direct child of the Section frame.

// What key Framer terms should you know?

Design Canvas

Framer's dedicated design-mode page (separate from Pages) where the color palette, typography scale, and imported assets are created before any page is built.

Assets Page

The renamed Design canvas page that stores all color swatches, typography samples, and imported images/SVGs as the project's single source of truth.

Color Style

A named, reusable color token saved in Framer's Styles panel. Applied via the style name (e.g. 'brand', 'dark') rather than a raw hex value.

Text Style

A named, reusable typography token combining font family, weight, size, letter spacing, line height, and color. Organized in slash-delimited folders: 'P/16/Regular', 'H1', 'Caption/12/Regular'.

Typography Scale

The complete set of heading (H1–H6) and body (18/16/14 Regular+Bold, Caption) text sizes defined and saved as Text Styles before page building begins.

Vector Set

Framer's optimized SVG asset container, created automatically when importing SVG files. Stores multiple SVG icons or logos as a single addressable asset.

Component

A reusable, self-contained UI element in Framer created with Option+Command+K. Has Variants and Variables that allow per-instance customization from the parent panel.

Variable

A named, editable property on a Component (text content, color, icon, visibility) that can be changed per instance without entering the component.

Variant

An alternative visual state of a Component (e.g. Primary, Secondary, Ghost, Small, Hover) defined inside the component editor.

Stack

Framer's auto-layout container, created with Option+Command+Return. Controls direction (horizontal/vertical), distribution (start/center/space-between), alignment, and gap between children.

Section → Container → Content

The three-layer page hierarchy: Section (full-width, holds background and padding), Container (fixed 1000px width, holds distribution logic), Content (the actual design elements). Duplicating a Section shell gives the correct structure instantly.

Appear Effect

Framer's on-load animation system. Triggered when the element enters the viewport or when a named Scroll Section enters the viewport. Configured with presets (Slide In Left/Right/Top/Bottom, Fade In, Scale In, Text Stagger), easing (Spring/Ease Out/Physics), duration, bounce, and delay.

Scroll Section

A named anchor assigned to a Section frame via the Scroll Section panel. Child elements reference this name in their Scroll Animation triggers so animations fire when that specific section reaches the viewport.

Spring

Framer's physics-based easing type for Appear animations. Produces a natural overshoot and return. Key parameters: duration, bounce (0=none, 1=max), and optionally Physics mode (stiffness, damping, mass).

Physics Spring

A sub-mode of Spring animation using stiffness (~500), damping (~25–50), and mass (~1–5) instead of duration/bounce. Used for more organic, weight-sensitive motion like rings expanding or cards sliding in.

Loop Effect

A continuous, repeating animation applied on top of an Appear effect. Used for floating icon cards in the hero. Mirror mode makes the element oscillate back and forth. Each element should have a unique Y offset and duration to avoid synchronized motion.

Scroll Transform

An animation tied to the user's scroll position rather than a trigger event. Used for the feature image to scale from 1.4× down to 1× and fade in as the section scrolls into view.

Ticker

Framer's built-in scrolling marquee component (found by pressing I and searching 'ticker'). Used for the logo strip. Speed and hover-pause speed are configurable. Must be placed outside the fixed-width Container to scroll full-width.

Eyebrow Text

The small label above a headline, typically in Caption Bold style with brand color. Sets context before the main H1 (e.g. 'Agency', 'New', 'Features').

Ghost Button

A button variant with no fill and no border — text only. Created as a Variant inside the Button component alongside Primary and Secondary.

Show Icon Variable

A visibility Variable on the Button component's icon element, defaulting to hidden. Enables icons to be shown only on specific button instances (e.g. a chevron on a 'See Plans' ghost button) without affecting the default state.

// FREQUENTLY ASKED QUESTIONS