Framer - No-Code Website Builder z Profesjonalnymi Animacjami

Czym jest Framer?

Framer to rewolucyjna platforma do tworzenia stron internetowych bez pisania kodu, która łączy moc profesjonalnego narzędzia designerskiego z prostotą publikacji jednym kliknięciem. Założona w 2013 roku przez Koen Bok i Jorn van Dijk, Framer przeszedł transformację z narzędzia do prototypowania (Framer Classic) do pełnoprawnego website buildera, który dziś konkuruje z Webflow, Squarespace i Wix.

To co wyróżnia Framer na tle konkurencji to niezrównana jakość animacji. Pod spodem Framer wykorzystuje Framer Motion - najpopularniejszą bibliotekę animacji dla React, z której korzystają tysiące deweloperów na całym świecie. Dzięki temu strony tworzone w Framer mają animacje klasy produkcyjnej - płynne 60fps transitions, micro-interactions i hover effects, które zwykle wymagałyby tygodni pracy programisty.

Framer generuje prawdziwy, zoptymalizowany kod React, co przekłada się na doskonałą wydajność i SEO. Strony są automatycznie hostowane na globalnej sieci CDN, osiągając wyniki Lighthouse często powyżej 95/100.

Dlaczego Framer?

Kluczowe zalety

Design-first Approach - Projektuj jak w Figma, publikuj jak WordPress
Animacje premium - Framer Motion pod spodem daje jakość produkcyjną
Zero kodu - Wszystko przez visual editor
Wbudowany CMS - Blog, portfolio, produkty bez zewnętrznych narzędzi
Hosting included - CDN, SSL, custom domains w pakiecie
SEO-ready - Meta tags, OG images, sitemap automatycznie
Responsive - Breakpoints i auto-layout jak w Figma
Components - Wielokrotnie używalne bloki z variants

Framer vs Webflow vs Squarespace vs Wix

Cecha	Framer	Webflow	Squarespace	Wix
Animacje	Najlepsze	Bardzo dobre	Podstawowe	Podstawowe
Learning curve	Łatwy	Trudny	Łatwy	Łatwy
CMS	Prosty, elastyczny	Zaawansowany	Prosty	Prosty
Custom code	Tak (React)	Tak (HTML/JS)	Ograniczony	Velo
SEO	Świetne	Świetne	Dobre	Średnie
Performance	95+ Lighthouse	80-95	70-85	60-80
Cena (start)	$5/mo	$14/mo	$16/mo	$16/mo
Target	Designers, Devs	Developers	Małe biznesy	Beginners

Rozpoczęcie pracy z Framer

Tworzenie konta i projektu

Code

TEXT

1. Przejdź na framer.com
2. Zarejestruj się (Google, GitHub lub email)
3. Kliknij "New Project"
4. Wybierz template lub zacznij od zera

Interfejs Framer:
┌─────────────────────────────────────────────────────┐
│  [Layers]  │     Canvas      │  [Properties]        │
│            │                 │                      │
│  • Page 1  │   ┌─────────┐   │  Layout:             │
│    • Frame │   │         │   │  ├── Width: Auto     │
│      • Nav │   │  Your   │   │  ├── Height: Auto    │
│      • Hero│   │  Design │   │  └── Direction: V    │
│      • CTA │   │         │   │                      │
│            │   └─────────┘   │  Fill: #FFFFFF       │
│            │                 │  Effects: Shadow     │
│  [Assets]  │   [Breakpoints] │  [Interactions]      │
└─────────────────────────────────────────────────────┘

Podstawowe elementy

Code

TEXT

FRAMER ELEMENTS:

📦 Frame (F)
   └── Kontener - odpowiednik <div>
   └── Auto-layout: Row/Column
   └── Constraints i responsive

📝 Text (T)
   └── Rich text editing
   └── Typography styles
   └── Google Fonts built-in

🖼️ Image (I)
   └── Drag & drop upload
   └── Optimized delivery
   └── Alt text dla SEO

🔗 Link
   └── Page navigation
   └── External URLs
   └── Scroll to section

🧩 Components
   └── Reusable elements
   └── Variants
   └── Overrides

📹 Video
   └── Self-hosted
   └── YouTube/Vimeo embed
   └── Autoplay, loop

🖥️ Code Component
   └── Custom React components
   └── npm packages

Layout i Responsive Design

Auto-layout (Stack)

Code

TEXT

Framer Stack = CSS Flexbox

┌─────────────────────────────────────────────────────┐
│  STACK PROPERTIES                                    │
│                                                      │
│  Direction:                                         │
│  ├── Horizontal (Row)    → → →                     │
│  ├── Vertical (Column)   ↓                         │
│  └── Wrap                → → ↓ →                   │
│                                                      │
│  Alignment:                                         │
│  ├── Start   [■ ■ ■        ]                       │
│  ├── Center  [   ■ ■ ■     ]                       │
│  ├── End     [        ■ ■ ■]                       │
│  └── Space Between [■    ■    ■]                   │
│                                                      │
│  Distribution:                                      │
│  ├── Start   ↑ ■ ■ ■                               │
│  ├── Center  ■ ■ ■                                 │
│  └── End     ■ ■ ■ ↓                               │
│                                                      │
│  Gap: 16px                                          │
│  Padding: 24px                                      │
└─────────────────────────────────────────────────────┘

Breakpoints

Code

TEXT

RESPONSIVE BREAKPOINTS:

Desktop (default): 1200px+
├── Tablet: 810px - 1199px
├── Mobile: 390px - 809px
└── Custom: dowolna wartość

Ustawienia per breakpoint:
- Visibility (show/hide elements)
- Layout direction
- Font sizes
- Spacing
- Image sizes

Przykład Card:
Desktop: Row layout, 3 columns
Tablet: Row layout, 2 columns
Mobile: Column layout, 1 column

Constraints

Code

CSS

/* Odpowiednik CSS constraints w Framer */

/* Fill Container (stretch) */
.element {
  width: 100%;
  height: 100%;
}

/* Hug Content (fit-content) */
.element {
  width: fit-content;
  height: fit-content;
}

/* Fixed */
.element {
  width: 200px;
  height: 100px;
}

/* Relative (%) */
.element {
  width: 50%;
  min-width: 200px;
  max-width: 600px;
}

Animacje w Framer

Hover Effects

Code

TEXT

┌─────────────────────────────────────────────────────┐
│  HOVER INTERACTIONS                                  │
│                                                      │
│  1. Zaznacz element                                 │
│  2. Properties → Interactions → Hover               │
│  3. Ustaw zmiany:                                   │
│                                                      │
│  Transform:                                         │
│  ├── Scale: 1.05                                    │
│  ├── Rotate: 5deg                                   │
│  ├── X/Y offset: 0, -4px                           │
│                                                      │
│  Style:                                             │
│  ├── Opacity: 0.9                                   │
│  ├── Background: #darkerColor                       │
│  ├── Shadow: larger                                 │
│                                                      │
│  Transition:                                        │
│  ├── Type: Spring / Tween                          │
│  ├── Duration: 0.3s                                 │
│  ├── Ease: ease-out                                 │
└─────────────────────────────────────────────────────┘

Page Transitions

Code

TEXT

TRANSITION TYPES:

1. Instant
   └── Brak animacji (default dla linków)

2. Fade
   └── Opacity: 1 → 0 → 1
   └── Duration: 0.3s

3. Slide
   └── Directions: left, right, up, down
   └── Push lub overlay

4. Scale
   └── Scale: 1 → 0.95 → 1
   └── Z głębokością

5. Custom
   └── Kombinacja powyższych
   └── Staggered animations

Scroll Animations

Code

JavaScript

// Framer scroll animations (visual editor)

// Scroll Into View - animacja przy scrollowaniu
{
  "trigger": "onScrollIntoView",
  "initial": {
    "opacity": 0,
    "y": 50
  },
  "animate": {
    "opacity": 1,
    "y": 0
  },
  "transition": {
    "duration": 0.6,
    "ease": "easeOut"
  }
}

// Parallax Effect
{
  "trigger": "onScroll",
  "parallax": {
    "speed": 0.5,  // 0 = static, 1 = scroll speed
    "direction": "up"
  }
}

// Scroll Progress Animation
{
  "trigger": "onScrollProgress",
  "transform": {
    "rotate": [0, 360],  // Start to end values
    "scale": [1, 1.2]
  }
}

Variants i States

Code

TEXT

COMPONENT VARIANTS:

Button Component:
├── Variant: Primary
│   ├── Background: #3366FF
│   ├── Color: white
│   └── States: default, hover, pressed, disabled
├── Variant: Secondary
│   ├── Background: transparent
│   ├── Border: #3366FF
│   └── States: default, hover, pressed, disabled
└── Variant: Ghost
    ├── Background: transparent
    ├── Color: #3366FF
    └── States: default, hover, pressed, disabled

Każdy state może mieć inne:
- Kolory
- Shadows
- Scale
- Opacity
- Border

Framer CMS

Collections

Code

TEXT

CMS STRUCTURE:

Collection: Blog Posts
├── Title (text, required)
├── Slug (auto-generated)
├── Content (rich text)
├── Cover Image (image)
├── Author (reference → Authors)
├── Category (reference → Categories)
├── Published Date (date)
├── Tags (multi-reference → Tags)
└── Featured (boolean)

Collection: Authors
├── Name (text)
├── Avatar (image)
├── Bio (text)
└── Social Links (link)

Collection: Categories
├── Name (text)
├── Color (color)
└── Icon (image)

Dynamic Pages

Code

TEXT

DYNAMIC PAGE SETUP:

1. Create Collection (np. "Blog Posts")
2. Add fields (title, content, image, etc.)
3. Create CMS Page:
   - New Page → CMS Page
   - Connect to Collection

4. Design template:
   ┌─────────────────────────────────────────┐
   │  {coverImage}                           │
   │                                         │
   │  {title}           {publishedDate}      │
   │                                         │
   │  {content}                              │
   │                                         │
   │  Author: {author.name}                  │
   │  Tags: {tags}                           │
   └─────────────────────────────────────────┘

5. URL structure: /blog/{slug}

6. Collection List (na stronie głównej):
   - Display: Grid/List
   - Filter: category == "Tech"
   - Sort: publishedDate DESC
   - Limit: 6

CMS Filters i Sorting

Code

JavaScript

// Filtrowanie collection list

// Po wartości pola
{
  "filter": {
    "field": "category",
    "operator": "equals",
    "value": "Technology"
  }
}

// Po boolean
{
  "filter": {
    "field": "featured",
    "operator": "equals",
    "value": true
  }
}

// Po dacie
{
  "filter": {
    "field": "publishedDate",
    "operator": "lessThan",
    "value": "now"
  }
}

// Sortowanie
{
  "sort": {
    "field": "publishedDate",
    "direction": "desc"
  },
  "limit": 10
}

Custom Code w Framer

Code Components

Code

TypeScript

// Tworzenie custom component w Framer
// Components → New Component → Code Component

import { addPropertyControls, ControlType } from "framer"

interface Props {
  text: string
  backgroundColor: string
  onClick: () => void
}

export function CustomButton(props: Props) {
  const { text, backgroundColor, onClick } = props

  return (
    <button
      onClick={onClick}
      style={{
        backgroundColor,
        color: "white",
        padding: "12px 24px",
        border: "none",
        borderRadius: "8px",
        fontSize: "16px",
        fontWeight: 600,
        cursor: "pointer",
        transition: "transform 0.2s, box-shadow 0.2s",
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.transform = "translateY(-2px)"
        e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)"
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = "translateY(0)"
        e.currentTarget.style.boxShadow = "none"
      }}
    >
      {text}
    </button>
  )
}

// Property Controls - edytowalne w UI
addPropertyControls(CustomButton, {
  text: {
    type: ControlType.String,
    title: "Button Text",
    defaultValue: "Click me",
  },
  backgroundColor: {
    type: ControlType.Color,
    title: "Background",
    defaultValue: "#3366FF",
  },
  onClick: {
    type: ControlType.EventHandler,
  },
})

Używanie npm packages

Code

TypeScript

// Przykład z zewnętrzną biblioteką
import { motion } from "framer-motion"
import confetti from "canvas-confetti"

export function CelebrationButton({ text }: { text: string }) {
  const handleClick = () => {
    confetti({
      particleCount: 100,
      spread: 70,
      origin: { y: 0.6 },
    })
  }

  return (
    <motion.button
      onClick={handleClick}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      style={{
        background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
        color: "white",
        border: "none",
        padding: "16px 32px",
        borderRadius: "12px",
        fontSize: "18px",
        fontWeight: "bold",
        cursor: "pointer",
      }}
    >
      {text}
    </motion.button>
  )
}

Code Overrides

Code

TypeScript

// Code Overrides - modyfikacja istniejących elementów
// Assets → Code → New Override

import type { ComponentType } from "react"

// Animacja przy scroll
export function withScrollAnimation(Component: ComponentType): ComponentType {
  return (props: any) => {
    return (
      <Component
        {...props}
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5 }}
      />
    )
  }
}

// Counter animation
export function withCounter(Component: ComponentType): ComponentType {
  return (props: any) => {
    const [count, setCount] = React.useState(0)

    React.useEffect(() => {
      const target = 1000
      const duration = 2000
      const steps = 60
      const increment = target / steps
      let current = 0

      const timer = setInterval(() => {
        current += increment
        if (current >= target) {
          setCount(target)
          clearInterval(timer)
        } else {
          setCount(Math.floor(current))
        }
      }, duration / steps)

      return () => clearInterval(timer)
    }, [])

    return <Component {...props} text={count.toLocaleString()} />
  }
}

SEO i Performance

SEO Settings

Code

TEXT

PAGE SEO SETTINGS:

1. Page Settings → SEO
   ├── Title: "Your Page Title | Brand"
   ├── Description: "Meta description (155 chars)"
   ├── Open Graph Image: 1200x630px
   └── Favicon: 32x32px

2. Site Settings → SEO
   ├── Site Title
   ├── Site Description
   ├── Default OG Image
   ├── Robots.txt (auto)
   └── Sitemap.xml (auto)

3. Advanced:
   ├── Canonical URL
   ├── No-index option
   └── Custom meta tags

Performance Optimization

Code

TEXT

FRAMER PERFORMANCE FEATURES:

1. Automatic optimizations:
   ├── Image compression (WebP)
   ├── Lazy loading
   ├── Code splitting
   ├── Tree shaking
   └── Minification

2. CDN hosting:
   ├── Global edge network
   ├── Automatic SSL
   └── HTTP/2

3. Core Web Vitals:
   ├── LCP: < 2.5s (Largest Contentful Paint)
   ├── FID: < 100ms (First Input Delay)
   └── CLS: < 0.1 (Cumulative Layout Shift)

4. Tips for better performance:
   ├── Optimize images before upload
   ├── Limit animations on mobile
   ├── Use system fonts when possible
   ├── Minimize code components
   └── Enable caching for CMS

Integracje

Built-in Integrations

Code

TEXT

NATIVE INTEGRATIONS:

Analytics:
├── Google Analytics 4
├── Plausible
├── Fathom
└── Custom scripts

Forms:
├── Framer Forms (native)
├── Formspree
├── Typeform embed
└── Tally

E-commerce:
├── Stripe (payments)
├── Gumroad
├── Lemonsqueezy
└── Shopify (embed)

Marketing:
├── Mailchimp
├── ConvertKit
├── HubSpot
└── Intercom

Authentication:
├── Clerk
├── Auth0
└── Custom OAuth

Framer Forms

Code

TEXT

FRAMER FORMS SETUP:

1. Add Form component
2. Configure fields:
   ├── Text Input
   ├── Email Input
   ├── Textarea
   ├── Select/Dropdown
   ├── Checkbox
   ├── Radio buttons
   └── File upload

3. Success/Error states:
   ├── Success message
   ├── Redirect URL
   └── Error handling

4. Submissions:
   ├── Email notification
   ├── Webhook integration
   └── Framer dashboard

Przykład:
┌─────────────────────────────────────────┐
│  Contact Us                             │
│                                         │
│  Name:     [________________]           │
│  Email:    [________________]           │
│  Message:  [________________]           │
│            [________________]           │
│                                         │
│  [Submit]                               │
└─────────────────────────────────────────┘

Custom Embed

Code

HTML

<!-- Embedding external content -->

<!-- YouTube -->
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="100%"
  height="400"
  frameborder="0"
  allowfullscreen
></iframe>

<!-- Calendly -->
<div class="calendly-inline-widget"
  data-url="https://calendly.com/YOUR_LINK"
  style="min-width:320px;height:630px;">
</div>

<!-- Custom scripts in <head> -->
<script>
  // Google Tag Manager, etc.
</script>

Publishing i Domains

Publishing Options

Code

TEXT

PUBLISH FLOW:

1. Preview
   └── framer.app preview link
   └── Share with clients for review

2. Publish to framer.site
   └── yoursite.framer.site (free)
   └── Instant deployment

3. Custom Domain
   └── Add domain in settings
   └── Update DNS records:
       A Record: @ → 76.76.21.21
       CNAME: www → cname.framer.website
   └── SSL automatic

4. Staging vs Production
   └── Publish to staging first
   └── Review changes
   └── Promote to production

Domain Configuration

Code

TEXT

DNS SETTINGS:

For apex domain (example.com):
Type: A
Name: @
Value: 76.76.21.21

For www subdomain:
Type: CNAME
Name: www
Value: cname.framer.website

For subdomains (blog.example.com):
Type: CNAME
Name: blog
Value: cname.framer.website

SSL Certificate:
└── Automatic provisioning
└── Let's Encrypt
└── Auto-renewal

Templates i Components

Framer Templates

Code

TEXT

TEMPLATE CATEGORIES:

Landing Pages:
├── SaaS
├── Agency
├── Product launch
├── App download
└── Coming soon

Portfolio:
├── Designer
├── Developer
├── Photographer
├── Artist
└── Freelancer

Business:
├── Startup
├── Corporate
├── Restaurant
├── Real estate
└── Consulting

Blog/Magazine:
├── Personal blog
├── News site
├── Documentation
└── Knowledge base

E-commerce:
├── Product showcase
├── Digital products
└── Services

Component Libraries

Code

TEXT

POPULAR COMPONENT PACKS:

Buttons:
├── Primary, Secondary, Ghost
├── With icons
├── Loading states
└── Sizes: sm, md, lg

Cards:
├── Product cards
├── Blog cards
├── Pricing cards
├── Team cards
└── Testimonial cards

Navigation:
├── Navbar (desktop)
├── Mobile menu
├── Sidebar
├── Breadcrumbs
└── Pagination

Forms:
├── Contact form
├── Newsletter signup
├── Login/Register
└── Search

Sections:
├── Hero sections
├── Feature grids
├── Pricing tables
├── FAQ accordions
├── Footer variants
└── CTA sections

Framer dla zespołów

Collaboration Features

Code

TEXT

TEAM FEATURES:

1. Real-time editing
   └── Multiple editors
   └── Cursor presence
   └── Live changes

2. Comments
   └── Pin to elements
   └── Thread discussions
   └── @mentions
   └── Resolve/reopen

3. Version history
   └── Auto-save
   └── Named versions
   └── Restore previous

4. Permissions:
   └── Owner (full access)
   └── Editor (edit + publish)
   └── Viewer (view only)
   └── Commenter

Branching (Beta)

Code

TEXT

BRANCHING WORKFLOW:

Main branch (production)
│
├── Feature branch: "new-homepage"
│   └── Make changes
│   └── Preview independently
│   └── Merge when ready
│
└── Feature branch: "pricing-update"
    └── Isolated environment
    └── No conflicts
    └── Safe experimentation

Cennik

Plan	Cena	Zawartość
Free	$0/mo	1 projekt, framer.site subdomain
Mini	$5/mo	Custom domain, basic analytics
Basic	$15/mo	CMS, forms, more pages
Pro	$30/mo	Advanced CMS, password protection
Team	Custom	Collaboration, branching, SSO

Co zawiera każdy plan:

Free:

1 projekt
framer.site subdomain
Unlimited pages (no CMS)
Basic templates
Community support

Mini ($5/mo):

Custom domain
1,000 monthly visits included
Basic analytics
Remove Framer badge

Basic ($15/mo):

Everything in Mini
10,000 monthly visits
CMS (3 collections)
Forms (100 submissions/mo)
Sitemap, robots.txt

Pro ($30/mo):

Everything in Basic
50,000 monthly visits
Unlimited CMS collections
Password protection
Staging environment
Advanced analytics

FAQ - Najczęściej zadawane pytania

Czy Framer jest lepszy od Webflow?

To zależy od potrzeb. Framer jest lepszy w animacjach i łatwiejszy do nauki. Webflow oferuje bardziej zaawansowany CMS i większą kontrolę nad kodem. Dla landing pages i portfolio - Framer. Dla dużych stron z CMS - Webflow.

Czy mogę eksportować kod z Framer?

Nie, Framer nie oferuje eksportu kodu. Strony są hostowane na platformie Framer. Możesz jednak używać custom code components i integracji.

Czy Framer jest dobry dla SEO?

Tak, Framer generuje semantyczny HTML, automatyczne sitemaps, meta tags i ma świetną wydajność. Strony często osiągają 90+ w Lighthouse.

Czy mogę użyć Framer do sklepu internetowego?

Framer nie jest pełną platformą e-commerce, ale możesz integrować Stripe dla płatności lub embedować Shopify produkty. Dla prostych digital products wystarczy.

Jak szybko mogę nauczyć się Framer?

Podstawy w 1-2 dni. Jeśli znasz Figma, przejście jest naturalne. Zaawansowane funkcje (CMS, code components) wymagają więcej czasu.

Czy Framer działa offline?

Nie, Framer wymaga połączenia z internetem. Projekty są przechowywane w chmurze.

Czy mogę przenieść stronę z Webflow do Framer?

Nie ma automatycznej migracji. Trzeba odtworzyć design ręcznie. Struktura i koncepty są podobne, więc przejście nie jest trudne.

Podsumowanie

Framer to nowoczesna platforma website builder oferująca:

Design-first approach z interfejsem jak Figma
Najlepsze animacje dzięki Framer Motion
Wbudowany CMS dla blogów i portfolio
Hosting i CDN w cenie
SEO-ready z automatycznym sitemap
Custom code dla zaawansowanych potrzeb
Responsive design z breakpoints

Idealne rozwiązanie dla designerów i marketerów, którzy chcą tworzyć piękne, szybkie strony bez kodowania.

Framer - no-code website builder with professional animations

What is Framer?

Framer is a revolutionary platform for creating websites without writing code that combines the power of a professional design tool with one-click publishing simplicity. Founded in 2013 by Koen Bok and Jorn van Dijk, Framer has undergone a transformation from a prototyping tool (Framer Classic) into a full-fledged website builder that today competes with Webflow, Squarespace and Wix.

What sets Framer apart from the competition is its unmatched animation quality. Under the hood, Framer uses Framer Motion - the most popular animation library for React, used by thousands of developers worldwide. Thanks to this, websites built with Framer have production-grade animations - smooth 60fps transitions, micro-interactions and hover effects that would typically require weeks of developer work.

Framer generates real, optimized React code, which translates into excellent performance and SEO. Sites are automatically hosted on a global CDN network, achieving Lighthouse scores often above 95/100.

Why Framer?

Key advantages

Design-first approach - Design like in Figma, publish like WordPress
Premium animations - Framer Motion under the hood delivers production quality
Zero code - Everything through the visual editor
Built-in CMS - Blog, portfolio, products without external tools
Hosting included - CDN, SSL, custom domains in the package
SEO-ready - Meta tags, OG images, sitemap automatically
Responsive - Breakpoints and auto-layout like in Figma
Components - Reusable blocks with variants

Framer vs Webflow vs Squarespace vs Wix

Feature	Framer	Webflow	Squarespace	Wix
Animations	Best	Very good	Basic	Basic
Learning curve	Easy	Difficult	Easy	Easy
CMS	Simple, flexible	Advanced	Simple	Simple
Custom code	Yes (React)	Yes (HTML/JS)	Limited	Velo
SEO	Excellent	Excellent	Good	Average
Performance	95+ Lighthouse	80-95	70-85	60-80
Price (start)	$5/mo	$14/mo	$16/mo	$16/mo
Target	Designers, Devs	Developers	Small businesses	Beginners

Getting started with Framer

Creating an account and project

Code

TEXT

1. Go to framer.com
2. Sign up (Google, GitHub or email)
3. Click "New Project"
4. Choose a template or start from scratch

Framer interface:
┌─────────────────────────────────────────────────────┐
│  [Layers]  │     Canvas      │  [Properties]        │
│            │                 │                      │
│  • Page 1  │   ┌─────────┐   │  Layout:             │
│    • Frame │   │         │   │  ├── Width: Auto     │
│      • Nav │   │  Your   │   │  ├── Height: Auto    │
│      • Hero│   │  Design │   │  └── Direction: V    │
│      • CTA │   │         │   │                      │
│            │   └─────────┘   │  Fill: #FFFFFF       │
│            │                 │  Effects: Shadow     │
│  [Assets]  │   [Breakpoints] │  [Interactions]      │
└─────────────────────────────────────────────────────┘

Basic elements

Code

TEXT

FRAMER ELEMENTS:

📦 Frame (F)
   └── Container - equivalent of <div>
   └── Auto-layout: Row/Column
   └── Constraints and responsive

📝 Text (T)
   └── Rich text editing
   └── Typography styles
   └── Google Fonts built-in

🖼️ Image (I)
   └── Drag & drop upload
   └── Optimized delivery
   └── Alt text for SEO

🔗 Link
   └── Page navigation
   └── External URLs
   └── Scroll to section

🧩 Components
   └── Reusable elements
   └── Variants
   └── Overrides

📹 Video
   └── Self-hosted
   └── YouTube/Vimeo embed
   └── Autoplay, loop

🖥️ Code Component
   └── Custom React components
   └── npm packages

Layout and responsive design

Auto-layout (Stack)

Code

TEXT

Framer Stack = CSS Flexbox

┌─────────────────────────────────────────────────────┐
│  STACK PROPERTIES                                    │
│                                                      │
│  Direction:                                         │
│  ├── Horizontal (Row)    → → →                     │
│  ├── Vertical (Column)   ↓                         │
│  └── Wrap                → → ↓ →                   │
│                                                      │
│  Alignment:                                         │
│  ├── Start   [■ ■ ■        ]                       │
│  ├── Center  [   ■ ■ ■     ]                       │
│  ├── End     [        ■ ■ ■]                       │
│  └── Space Between [■    ■    ■]                   │
│                                                      │
│  Distribution:                                      │
│  ├── Start   ↑ ■ ■ ■                               │
│  ├── Center  ■ ■ ■                                 │
│  └── End     ■ ■ ■ ↓                               │
│                                                      │
│  Gap: 16px                                          │
│  Padding: 24px                                      │
└─────────────────────────────────────────────────────┘

Breakpoints

Code

TEXT

RESPONSIVE BREAKPOINTS:

Desktop (default): 1200px+
├── Tablet: 810px - 1199px
├── Mobile: 390px - 809px
└── Custom: any value

Settings per breakpoint:
- Visibility (show/hide elements)
- Layout direction
- Font sizes
- Spacing
- Image sizes

Card example:
Desktop: Row layout, 3 columns
Tablet: Row layout, 2 columns
Mobile: Column layout, 1 column

Constraints

Code

CSS

/* CSS constraints equivalent in Framer */

/* Fill Container (stretch) */
.element {
  width: 100%;
  height: 100%;
}

/* Hug Content (fit-content) */
.element {
  width: fit-content;
  height: fit-content;
}

/* Fixed */
.element {
  width: 200px;
  height: 100px;
}

/* Relative (%) */
.element {
  width: 50%;
  min-width: 200px;
  max-width: 600px;
}

Animations in Framer

Hover effects

Code

TEXT

┌─────────────────────────────────────────────────────┐
│  HOVER INTERACTIONS                                  │
│                                                      │
│  1. Select element                                  │
│  2. Properties → Interactions → Hover               │
│  3. Set changes:                                    │
│                                                      │
│  Transform:                                         │
│  ├── Scale: 1.05                                    │
│  ├── Rotate: 5deg                                   │
│  ├── X/Y offset: 0, -4px                           │
│                                                      │
│  Style:                                             │
│  ├── Opacity: 0.9                                   │
│  ├── Background: #darkerColor                       │
│  ├── Shadow: larger                                 │
│                                                      │
│  Transition:                                        │
│  ├── Type: Spring / Tween                          │
│  ├── Duration: 0.3s                                 │
│  ├── Ease: ease-out                                 │
└─────────────────────────────────────────────────────┘

Page transitions

Code

TEXT

TRANSITION TYPES:

1. Instant
   └── No animation (default for links)

2. Fade
   └── Opacity: 1 → 0 → 1
   └── Duration: 0.3s

3. Slide
   └── Directions: left, right, up, down
   └── Push or overlay

4. Scale
   └── Scale: 1 → 0.95 → 1
   └── With depth

5. Custom
   └── Combination of the above
   └── Staggered animations

Scroll animations

Code

JavaScript

// Framer scroll animations (visual editor)

// Scroll Into View - animation on scroll
{
  "trigger": "onScrollIntoView",
  "initial": {
    "opacity": 0,
    "y": 50
  },
  "animate": {
    "opacity": 1,
    "y": 0
  },
  "transition": {
    "duration": 0.6,
    "ease": "easeOut"
  }
}

// Parallax Effect
{
  "trigger": "onScroll",
  "parallax": {
    "speed": 0.5,  // 0 = static, 1 = scroll speed
    "direction": "up"
  }
}

// Scroll Progress Animation
{
  "trigger": "onScrollProgress",
  "transform": {
    "rotate": [0, 360],  // Start to end values
    "scale": [1, 1.2]
  }
}

Variants and states

Code

TEXT

COMPONENT VARIANTS:

Button Component:
├── Variant: Primary
│   ├── Background: #3366FF
│   ├── Color: white
│   └── States: default, hover, pressed, disabled
├── Variant: Secondary
│   ├── Background: transparent
│   ├── Border: #3366FF
│   └── States: default, hover, pressed, disabled
└── Variant: Ghost
    ├── Background: transparent
    ├── Color: #3366FF
    └── States: default, hover, pressed, disabled

Each state can have different:
- Colors
- Shadows
- Scale
- Opacity
- Border

Framer CMS

Collections

Code

TEXT

CMS STRUCTURE:

Collection: Blog Posts
├── Title (text, required)
├── Slug (auto-generated)
├── Content (rich text)
├── Cover Image (image)
├── Author (reference → Authors)
├── Category (reference → Categories)
├── Published Date (date)
├── Tags (multi-reference → Tags)
└── Featured (boolean)

Collection: Authors
├── Name (text)
├── Avatar (image)
├── Bio (text)
└── Social Links (link)

Collection: Categories
├── Name (text)
├── Color (color)
└── Icon (image)

Dynamic pages

Code

TEXT

DYNAMIC PAGE SETUP:

1. Create Collection (e.g. "Blog Posts")
2. Add fields (title, content, image, etc.)
3. Create CMS Page:
   - New Page → CMS Page
   - Connect to Collection

4. Design template:
   ┌─────────────────────────────────────────┐
   │  {coverImage}                           │
   │                                         │
   │  {title}           {publishedDate}      │
   │                                         │
   │  {content}                              │
   │                                         │
   │  Author: {author.name}                  │
   │  Tags: {tags}                           │
   └─────────────────────────────────────────┘

5. URL structure: /blog/{slug}

6. Collection List (on the main page):
   - Display: Grid/List
   - Filter: category == "Tech"
   - Sort: publishedDate DESC
   - Limit: 6

CMS filters and sorting

Code

JavaScript

// Filtering collection list

// By field value
{
  "filter": {
    "field": "category",
    "operator": "equals",
    "value": "Technology"
  }
}

// By boolean
{
  "filter": {
    "field": "featured",
    "operator": "equals",
    "value": true
  }
}

// By date
{
  "filter": {
    "field": "publishedDate",
    "operator": "lessThan",
    "value": "now"
  }
}

// Sorting
{
  "sort": {
    "field": "publishedDate",
    "direction": "desc"
  },
  "limit": 10
}

Custom code in Framer

Code components

Code

TypeScript

// Creating a custom component in Framer
// Components → New Component → Code Component

import { addPropertyControls, ControlType } from "framer"

interface Props {
  text: string
  backgroundColor: string
  onClick: () => void
}

export function CustomButton(props: Props) {
  const { text, backgroundColor, onClick } = props

  return (
    <button
      onClick={onClick}
      style={{
        backgroundColor,
        color: "white",
        padding: "12px 24px",
        border: "none",
        borderRadius: "8px",
        fontSize: "16px",
        fontWeight: 600,
        cursor: "pointer",
        transition: "transform 0.2s, box-shadow 0.2s",
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.transform = "translateY(-2px)"
        e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)"
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = "translateY(0)"
        e.currentTarget.style.boxShadow = "none"
      }}
    >
      {text}
    </button>
  )
}

// Property Controls - editable in the UI
addPropertyControls(CustomButton, {
  text: {
    type: ControlType.String,
    title: "Button Text",
    defaultValue: "Click me",
  },
  backgroundColor: {
    type: ControlType.Color,
    title: "Background",
    defaultValue: "#3366FF",
  },
  onClick: {
    type: ControlType.EventHandler,
  },
})

Using npm packages

Code

TypeScript

// Example with an external library
import { motion } from "framer-motion"
import confetti from "canvas-confetti"

export function CelebrationButton({ text }: { text: string }) {
  const handleClick = () => {
    confetti({
      particleCount: 100,
      spread: 70,
      origin: { y: 0.6 },
    })
  }

  return (
    <motion.button
      onClick={handleClick}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      style={{
        background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
        color: "white",
        border: "none",
        padding: "16px 32px",
        borderRadius: "12px",
        fontSize: "18px",
        fontWeight: "bold",
        cursor: "pointer",
      }}
    >
      {text}
    </motion.button>
  )
}

Code overrides

Code

TypeScript

// Code Overrides - modifying existing elements
// Assets → Code → New Override

import type { ComponentType } from "react"

// Scroll animation
export function withScrollAnimation(Component: ComponentType): ComponentType {
  return (props: any) => {
    return (
      <Component
        {...props}
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5 }}
      />
    )
  }
}

// Counter animation
export function withCounter(Component: ComponentType): ComponentType {
  return (props: any) => {
    const [count, setCount] = React.useState(0)

    React.useEffect(() => {
      const target = 1000
      const duration = 2000
      const steps = 60
      const increment = target / steps
      let current = 0

      const timer = setInterval(() => {
        current += increment
        if (current >= target) {
          setCount(target)
          clearInterval(timer)
        } else {
          setCount(Math.floor(current))
        }
      }, duration / steps)

      return () => clearInterval(timer)
    }, [])

    return <Component {...props} text={count.toLocaleString()} />
  }
}

SEO and performance

SEO settings

Code

TEXT

PAGE SEO SETTINGS:

1. Page Settings → SEO
   ├── Title: "Your Page Title | Brand"
   ├── Description: "Meta description (155 chars)"
   ├── Open Graph Image: 1200x630px
   └── Favicon: 32x32px

2. Site Settings → SEO
   ├── Site Title
   ├── Site Description
   ├── Default OG Image
   ├── Robots.txt (auto)
   └── Sitemap.xml (auto)

3. Advanced:
   ├── Canonical URL
   ├── No-index option
   └── Custom meta tags

Performance optimization

Code

TEXT

FRAMER PERFORMANCE FEATURES:

1. Automatic optimizations:
   ├── Image compression (WebP)
   ├── Lazy loading
   ├── Code splitting
   ├── Tree shaking
   └── Minification

2. CDN hosting:
   ├── Global edge network
   ├── Automatic SSL
   └── HTTP/2

3. Core Web Vitals:
   ├── LCP: < 2.5s (Largest Contentful Paint)
   ├── FID: < 100ms (First Input Delay)
   └── CLS: < 0.1 (Cumulative Layout Shift)

4. Tips for better performance:
   ├── Optimize images before upload
   ├── Limit animations on mobile
   ├── Use system fonts when possible
   ├── Minimize code components
   └── Enable caching for CMS

Integrations

Built-in integrations

Code

TEXT

NATIVE INTEGRATIONS:

Analytics:
├── Google Analytics 4
├── Plausible
├── Fathom
└── Custom scripts

Forms:
├── Framer Forms (native)
├── Formspree
├── Typeform embed
└── Tally

E-commerce:
├── Stripe (payments)
├── Gumroad
├── Lemonsqueezy
└── Shopify (embed)

Marketing:
├── Mailchimp
├── ConvertKit
├── HubSpot
└── Intercom

Authentication:
├── Clerk
├── Auth0
└── Custom OAuth

Framer Forms

Code

TEXT

FRAMER FORMS SETUP:

1. Add Form component
2. Configure fields:
   ├── Text Input
   ├── Email Input
   ├── Textarea
   ├── Select/Dropdown
   ├── Checkbox
   ├── Radio buttons
   └── File upload

3. Success/Error states:
   ├── Success message
   ├── Redirect URL
   └── Error handling

4. Submissions:
   ├── Email notification
   ├── Webhook integration
   └── Framer dashboard

Example:
┌─────────────────────────────────────────┐
│  Contact Us                             │
│                                         │
│  Name:     [________________]           │
│  Email:    [________________]           │
│  Message:  [________________]           │
│            [________________]           │
│                                         │
│  [Submit]                               │
└─────────────────────────────────────────┘

Custom embed

Code

HTML

<!-- Embedding external content -->

<!-- YouTube -->
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="100%"
  height="400"
  frameborder="0"
  allowfullscreen
></iframe>

<!-- Calendly -->
<div class="calendly-inline-widget"
  data-url="https://calendly.com/YOUR_LINK"
  style="min-width:320px;height:630px;">
</div>

<!-- Custom scripts in <head> -->
<script>
  // Google Tag Manager, etc.
</script>

Publishing and domains

Publishing options

Code

TEXT

PUBLISH FLOW:

1. Preview
   └── framer.app preview link
   └── Share with clients for review

2. Publish to framer.site
   └── yoursite.framer.site (free)
   └── Instant deployment

3. Custom Domain
   └── Add domain in settings
   └── Update DNS records:
       A Record: @ → 76.76.21.21
       CNAME: www → cname.framer.website
   └── SSL automatic

4. Staging vs Production
   └── Publish to staging first
   └── Review changes
   └── Promote to production

Domain configuration

Code

TEXT

DNS SETTINGS:

For apex domain (example.com):
Type: A
Name: @
Value: 76.76.21.21

For www subdomain:
Type: CNAME
Name: www
Value: cname.framer.website

For subdomains (blog.example.com):
Type: CNAME
Name: blog
Value: cname.framer.website

SSL Certificate:
└── Automatic provisioning
└── Let's Encrypt
└── Auto-renewal

Templates and components

Framer templates

Code

TEXT

TEMPLATE CATEGORIES:

Landing Pages:
├── SaaS
├── Agency
├── Product launch
├── App download
└── Coming soon

Portfolio:
├── Designer
├── Developer
├── Photographer
├── Artist
└── Freelancer

Business:
├── Startup
├── Corporate
├── Restaurant
├── Real estate
└── Consulting

Blog/Magazine:
├── Personal blog
├── News site
├── Documentation
└── Knowledge base

E-commerce:
├── Product showcase
├── Digital products
└── Services

Component libraries

Code

TEXT

POPULAR COMPONENT PACKS:

Buttons:
├── Primary, Secondary, Ghost
├── With icons
├── Loading states
└── Sizes: sm, md, lg

Cards:
├── Product cards
├── Blog cards
├── Pricing cards
├── Team cards
└── Testimonial cards

Navigation:
├── Navbar (desktop)
├── Mobile menu
├── Sidebar
├── Breadcrumbs
└── Pagination

Forms:
├── Contact form
├── Newsletter signup
├── Login/Register
└── Search

Sections:
├── Hero sections
├── Feature grids
├── Pricing tables
├── FAQ accordions
├── Footer variants
└── CTA sections

Framer for teams

Collaboration features

Code

TEXT

TEAM FEATURES:

1. Real-time editing
   └── Multiple editors
   └── Cursor presence
   └── Live changes

2. Comments
   └── Pin to elements
   └── Thread discussions
   └── @mentions
   └── Resolve/reopen

3. Version history
   └── Auto-save
   └── Named versions
   └── Restore previous

4. Permissions:
   └── Owner (full access)
   └── Editor (edit + publish)
   └── Viewer (view only)
   └── Commenter

Branching (Beta)

Code

TEXT

BRANCHING WORKFLOW:

Main branch (production)
│
├── Feature branch: "new-homepage"
│   └── Make changes
│   └── Preview independently
│   └── Merge when ready
│
└── Feature branch: "pricing-update"
    └── Isolated environment
    └── No conflicts
    └── Safe experimentation

Pricing

Plan	Price	Includes
Free	$0/mo	1 project, framer.site subdomain
Mini	$5/mo	Custom domain, basic analytics
Basic	$15/mo	CMS, forms, more pages
Pro	$30/mo	Advanced CMS, password protection
Team	Custom	Collaboration, branching, SSO

What each plan includes:

Free:

1 project
framer.site subdomain
Unlimited pages (no CMS)
Basic templates
Community support

Mini ($5/mo):

Custom domain
1,000 monthly visits included
Basic analytics
Remove Framer badge

Basic ($15/mo):

Everything in Mini
10,000 monthly visits
CMS (3 collections)
Forms (100 submissions/mo)
Sitemap, robots.txt

Pro ($30/mo):

Everything in Basic
50,000 monthly visits
Unlimited CMS collections
Password protection
Staging environment
Advanced analytics

FAQ - frequently asked questions

Is Framer better than Webflow?

It depends on your needs. Framer is better at animations and easier to learn. Webflow offers a more advanced CMS and greater control over code. For landing pages and portfolios - Framer. For large sites with CMS - Webflow.

Can I export code from Framer?

No, Framer does not offer code export. Sites are hosted on the Framer platform. However, you can use custom code components and integrations.

Is Framer good for SEO?

Yes, Framer generates semantic HTML, automatic sitemaps, meta tags and has excellent performance. Sites often achieve 90+ in Lighthouse.

Can I use Framer for an online store?

Framer is not a full e-commerce platform, but you can integrate Stripe for payments or embed Shopify products. For simple digital products it is sufficient.

How quickly can I learn Framer?

The basics in 1-2 days. If you know Figma, the transition is natural. Advanced features (CMS, code components) require more time.

Does Framer work offline?

No, Framer requires an internet connection. Projects are stored in the cloud.

Can I migrate a site from Webflow to Framer?

There is no automatic migration. You need to recreate the design manually. The structure and concepts are similar, so the transition is not difficult.

Summary

Framer is a modern website builder platform offering:

Design-first approach with an interface like Figma
Best-in-class animations thanks to Framer Motion
Built-in CMS for blogs and portfolios
Hosting and CDN included in the price
SEO-ready with automatic sitemap
Custom code for advanced needs
Responsive design with breakpoints

The ideal solution for designers and marketers who want to create beautiful, fast websites without coding.