How to Use Framer for Founders

Framer lets founders turn ideas into clickable prototypes without hiring a full design team. In this guide we walk through every step—from creating a new project to publishing a shareable link. The tutorial uses real‑world examples, code snippets, and screenshots so you can follow along on your own laptop.

1. Set up a Framer account
2. Navigate the canvas and create your first screen
3. Add interactive components
4. Extend with custom code
5. Publish and share
6. Pricing comparison
FAQ

1. Set up a Framer account

1.1 Register

Go to framer.com and click “Sign up”. You can use Google, GitHub, or email. The free tier gives you unlimited projects but limits published sites to 3.

1.2 Choose a workspace

After login, click “Create workspace”. Name it after your startup (e.g., “Acme Launch”). Workspaces keep files isolated for investors, engineers, or marketers.

Framer dashboard with Create Workspace button — Dashboard view – click “Create workspace” to keep projects organized.

2. Navigate the canvas and create your first screen

2.1 New project

Press “New file” → select “Blank canvas”. Framer opens a 1440 px wide frame by default. You can add breakpoints for mobile (375 px) and tablet (768 px) later.

2.2 Add a frame

Press F or click the Frame tool. Drag a rectangle onto the canvas. In the right panel set the size to 375 × 812 px for iPhone 14.

Frame tool panel — Setting dimensions for a mobile frame.

2.3 Insert basic UI

Use the left toolbar to add Text, Image, and Button components. For a landing page prototype, add a headline, a hero image, and a “Get early access” button.

// Example: Add a headline programmatically
import { Text } from "framer";
export function Headline() {
  return Welcome to Acme;
}

3. Add interactive components

3.1 Link navigation

Select the button, open the Properties panel, and set the Interaction to “On Click → Navigate to”. Choose the target screen you created earlier.

3.2 Form handling

Framer’s Form component captures input without backend code. Drag a Form onto the canvas, then add an Email field and a Submit button.

// Simple validation example
import { useForm } from "framer";

export function EmailForm() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => alert(`Thanks, ${data.email}!`);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="email" {...register("email", {required:true})} />
      {errors.email && <span>Enter a valid email</span>}
      <button type="submit">Join</button>
    </form>
  );
}

3.3 Animations

Framer’s Motion API adds spring‑based motion. To animate the hero image on load:

import { motion } from "framer-motion";

export function Hero() {
  return (
    <motion.img
      src="hero.png"
      initial={{opacity:0, y:50}}
      animate={{opacity:1, y:0}}
      transition={{type:"spring", stiffness:120}}
    />
  );
}

4. Extend with custom code

4.1 Open the Code editor

Click the { } icon in the top right. The editor splits the screen: design on the left, code on the right.

4.2 Add a reusable component

Create a file src/components/Badge.tsx and paste:

import { Frame } from "framer";

export function Badge({label, color="#0066ff"}) {
  return (
    <Frame
      height={24}
      background={color}
      radius={12}
      center
      style={{color:"#fff",fontSize:12,padding:"0 8px"}}
    >
      {label}
    </Frame>
  );
}

Drag the new Badge from the Components panel onto any screen. This speeds up branding across multiple mockups.

4.3 Fetch live data

Founders often need to show real metrics. Use fetch inside useEffect:

import { useEffect, useState } from "react";

export function LiveStat() {
  const [visits, setVisits] = useState(0);
  useEffect(() => {
    fetch("https://api.example.com/visits")
      .then(r=>r.json())
      .then(d=>setVisits(d.today));
  }, []);
  return <div>Today's visits: {visits}</div>;
}

5. Publish and share

5.1 Preview

Press P or click the Play button. The preview opens in a new tab with device toggles. Test on Chrome, Safari, and mobile simulators.

5.2 Publish to a custom domain

In the top bar click “Publish”. Choose “Custom domain” and type demo.acme.com. Framer will give you a CNAME record to add to your DNS provider. The free plan only allows framer.app subdomains.

5.3 Export React code

Click “Export” → “React”. Framer bundles each screen as a component and creates a src/pages folder. Download the zip and run npm install && npm run dev to see a live Vite app.

6. Pricing comparison

Below is a side‑by‑side view of Framer’s Free, Pro, and Enterprise plans as of June 2026.

Feature	Free	Pro	Enterprise
Published sites	3 (framer.app)	Unlimited (custom domain)	Unlimited + white‑label
Team members	1 editor	Up to 10 editors	Unlimited
Component library	Basic	Advanced + shared libraries	Enterprise‑grade governance
Code export	React (limited)	React + Vue + Svelte	All plus API access
Support	Community	Email, chat (24 h)	Dedicated manager, SLA
Price	$0	$20/editor /mo	Contact sales

FAQ

Do I need coding skills to use Framer?

No. Framer offers a visual canvas and a low‑code editor. You can build simple flows without code and add JavaScript only for advanced interactions.

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

Free includes unlimited projects but caps on published sites and component library. Pro costs $20 per editor per month and adds custom domains, team libraries, and priority support.

Can I export a Framer prototype to React?

Yes. Framer can generate clean React code for any screen. Export is a one‑click download of a zip file containing components and a starter Vite project.

Is Framer suitable for mobile‑first design?

Absolutely. The canvas has responsive breakpoints, and you can preview directly on iOS and Android simulators inside the app.

How does Framer compare to Figma for prototyping?

Figma excels at collaboration and design systems. Framer adds native animation and code export. For founders who need a quick, interactive demo, Framer is usually faster.

Use this guide to build a prototype that impresses investors, validates user flows, and saves weeks of development time. Start with a free account, follow the steps, and upgrade only when you need custom domains or team collaboration.