Framer Guide for Indie Hackers

Framer is a design‑to‑code platform that lets indie hackers turn ideas into interactive prototypes fast. This guide walks you through Framer’s core concepts, setup steps, everyday workflows, advanced patterns, and the mistakes most newcomers make. Follow the sections below to build a launch‑ready UI without hiring a front‑end team.

Table of contents

• Conceptual Overview
• Setup and Account Basics
• Core Workflows
• Advanced Patterns
• Common Mistakes & How to Fix Them
• FAQ

Conceptual Overview

Framer blends visual design with React‑based code. Think of it as three layers:

• Canvas – Drag‑and‑drop frames, components, and interactions.
• Code editor – Write JavaScript/TypeScript for custom logic.
• Publish – Export static HTML or use Framer’s hosting.

Indie hackers benefit from rapid iteration. You can test a UI in minutes, gather user feedback, and then add real data connections without leaving the platform.

Setup and Account Basics

1. Create a free account

Go to framer.com and sign up with Google or email. The free tier allows unlimited projects, but publishing is limited to yourproject.framer.app.

2. Choose a plan

Plan	Price	Key Limits
Free	$0	Custom domains: No; Team seats: 1; Export: Static only
Pro	$25/mo per seat	Custom domains, unlimited collaborators, premium components, API access
Enterprise	Contact sales	SSO, dedicated support, on‑prem hosting

3. Install the desktop app (optional)

The desktop client syncs offline changes. Download from the account dashboard, install, and log in with the same credentials.

Core Workflows

1. Building a landing page

1. Create a new “Website” project.
2. Drag a Section component onto the canvas.
3. Insert Heading, Paragraph, and Button components.
4. Style with the right‑hand panel – fonts, colors, spacing.
5. Set the button’s Link property to /signup.

2. Adding real data with Supabase

Framer supports fetch calls directly in the code editor. Example:

import { useEffect, useState } from "react";

export default function GuestList() {
  const [guests, setGuests] = useState([]);
  useEffect(() => {
    fetch("https://xyz.supabase.co/rest/v1/guests", {
      headers: { apikey: "YOUR_PUBLIC_KEY" }
    })
      .then(r=>r.json())
      .then(setGuests);
  }, []);
  return (
    <ul>{guests.map(g=><li key={g.id}>{g.name}</li>)}</ul>
  );
}

Paste this into a Code Component and drop it onto the canvas.

3. Prototyping interactions

Click a component, choose Interactions, then select On Click → Navigate or On Hover → Animate. Framer automatically generates CSS keyframes, so you can preview on desktop and mobile instantly.

Advanced Patterns

1. Component libraries

Framer Marketplace offers ready‑made UI kits. The “Indie Starter Kit” includes a pricing table, testimonial carousel, and sign‑up modal. Install it, then customize colors to match your brand.

2. Conditional rendering

Use React’s conditional logic inside a Code Component:

{isLoggedIn ? <Dashboard /> : <LoginForm />}

This lets you toggle between states without re‑loading the page.

3. Server‑side rendering (SSR) via Vercel

Export your project as a Next.js app (Pro plan). Connect the GitHub repo to Vercel, set the build command to npm run build, and deploy. You get fast SSR and automatic CDN.

4. Dark mode toggle

Add a global state:

import { useState } from "react";

export const ThemeContext = React.createContext();

export function ThemeProvider({children}) {
  const [mode, setMode] = useState("light");
  return (
    <ThemeContext.Provider value={{mode, setMode}}>
      {children}
    </ThemeContext.Provider>
  );
}

Wrap your root component, then read mode to switch CSS variables.

Common Mistakes & How to Fix Them

1. Ignoring responsive breakpoints

Framer’s canvas defaults to desktop width. Use the “Device” dropdown to design for 375 px (mobile). Apply flex or grid containers to ensure elements adapt.

2. Over‑loading pages with large images

Upload images under 500 KB, use WebP, and enable “Lazy Load” in project settings. This cuts load time from 4 s to under 2 s on 3G.

3. Relying on the free plan for production

Free projects cannot use custom domains, which hurts credibility. Upgrade to Pro before you start marketing.

4. Forgetting to set SEO metadata

Open the “Page Settings” panel. Fill title, description, and og:image. Search engines index these fields.

5. Hard‑coding API keys

Store keys in Framer’s Environment Variables (Project Settings → Secrets). Reference them with process.env.MY_KEY to keep them out of the client bundle.

FAQ

Do I need to know React to use Framer?

No. Framer offers a visual editor that works without code. However, learning basic React helps when you need custom components.

Can I host a Framer prototype on my own domain?

Yes. Framer provides export options for static sites and a built‑in publishing feature that lets you map a custom domain.

What is the price difference between Framer’s Free and Pro plans?

Free includes unlimited projects but limits publishing to framer.app subdomains. Pro costs $25/month per seat and adds custom domains, team collaboration, and premium components.

Is Framer suitable for building a full‑stack SaaS product?

Framer excels at front‑end UI and prototyping. For full‑stack logic you’ll still need a backend (e.g., Supabase, Firebase) and integrate via APIs.

How do I avoid performance issues with large image assets in Framer?

Compress images before upload, use WebP format, and enable Framer’s lazy‑load option in project settings.

Framer can turn a sketch into a live site in hours. Follow this guide, avoid the pitfalls, and you’ll have a polished front‑end ready for users and investors. Happy hacking!