How to Use Framer for Developers

Framer is a powerful prototyping tool that lets developers build interactive UI with real React code. In this tutorial we walk through installing Framer, creating a first project, adding code components, and exporting clean JSX. Follow each step and you’ll have a working prototype in under an hour.

1. Install Framer
2. Create a New Project
3. Add Code Components
4. Build Animations with Motion
5. Export JSX for React
6. Framer vs. Alternatives
FAQ

1. Install Framer

Framer runs as a desktop app on macOS, Windows, and Linux. You can also use the web version, but the desktop client gives better performance.

Download the installer

Go to framer.com/download.
Select your OS and click Download.

Run the installer

# macOS (brew)
brew install --cask framer

# Windows (PowerShell)
winget install Framer.Framer

After installation, launch Framer and sign in with your GitHub or Google account.

2. Create a New Project

When you open Framer, you see the welcome screen. Click New Project and choose Blank Canvas.

Framer welcome screen — Figure 1: Selecting a blank canvas starts a fresh project.

Rename the project to dev‑prototype by clicking the title at the top left.

Project settings

Canvas size: 1440 × 1024 (desktop) – you can add mobile frames later.
Units: pixels.
Enable Code Components under Settings → Advanced.

3. Add Code Components

Framer lets you write React components directly in the editor. We’ll create a simple button that toggles a modal.

Step‑by‑step

Right‑click the canvas → Insert → Code Component.
Name it ToggleButton.
Replace the default code with the snippet below.

import * as React from "react";
import { motion } from "framer-motion";

export function ToggleButton({ onClick, isOpen }) {
  return (
    <motion.button
      onClick={onClick}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      style={{
        padding: "12px 24px",
        background: isOpen ? "#0066cc" : "#e0e0e0",
        color: isOpen ? "#fff" : "#000",
        border: "none",
        borderRadius: 4,
        cursor: "pointer"
      }}
    >
      {isOpen ? "Close" : "Open"} Modal
    </motion.button>
  );
}

Save the component. Framer instantly renders a live preview on the canvas.

Using the component

Drag the new ToggleButton from the left panel onto the canvas. Then create a Modal component using the same method and link them with a simple state.

import * as React from "react";
import { ToggleButton } from "./ToggleButton";
import { motion, AnimatePresence } from "framer-motion";

export function Demo() {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <ToggleButton onClick={() => setOpen(!open)} isOpen={open} />
      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            style={{
              position: "fixed",
              top: "50%",
              left: "50%",
              transform: "translate(-50%, -50%)",
              background: "#fff",
              padding: "24px",
              boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
              borderRadius: 8
            }}
          >
            <h3>Hello from Framer!</h3>
            <p>This modal is built with real React code.</p>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}

4. Build Animations with Motion

Framer’s motion library is built into the environment. You can add scroll‑based or gesture‑based animations without extra dependencies.

Scroll‑linked opacity

import { useViewportScroll, motion } from "framer-motion";

export function FadeOnScroll() {
  const { scrollYProgress } = useViewportScroll();
  return (
    <motion.div
      style={{
        opacity: scrollYProgress,
        height: "200vh",
        background: "linear-gradient(#fff, #0066cc)"
      }}
    >
      <h2 style={{marginTop:"150vh", textAlign:"center"}}>Scroll fades in</h2>
    </motion.div>
  );
}

Drop FadeOnScroll onto the canvas and preview in the browser. The background fades as you scroll.

5. Export JSX for React

When your prototype works, you can copy the clean JSX and paste it into any React project.

Copying code

Select the component in the left panel.
Click the three‑dot menu → Copy JSX.

The copied code includes all imports and props, ready for create‑react‑app or Next.js.

Example integration

In a Next.js page pages/index.js:

import { Demo } from "../components/Demo";

export default function Home() {
  return (
    <main style={{padding:"2rem"}}>
      <Demo />
    </main>
  );
}

Run npm run dev and you’ll see the same interactive prototype you built in Framer.

6. Framer vs. Alternatives

Developers often compare Framer with Figma, Adobe XD, and Webflow. The table below focuses on features that matter to code‑centric teams.

Feature	Framer	Figma	Webflow
Live React code	✅ Full JSX editing	❌ No code editing	✅ Export clean HTML/CSS, limited JS
Animation library	✅ Framer Motion built‑in	❌ Plugins only	✅ Interactions UI
Team collaboration	✅ Real‑time, comment	✅ Real‑time, comment	✅ Real‑time, comment
Free tier limits	Unlimited prototypes, limited premium components	Unlimited frames, limited version history	2 projects, limited CMS items
Export formats	JSX, CSS, PNG, GIF	SVG, PNG, PDF	HTML, CSS, JS

If you need real React code, Framer wins. For pure UI design, Figma is lighter. Webflow shines when you want a no‑code site that ships as static HTML.

FAQ

Do I need a design background to use Framer?

No. Framer provides code components and a visual canvas, so developers can start without design skills.

Can I export React code from Framer?

Yes. Framer lets you copy the generated JSX for any component and paste it into a React project.

Is Framer free for personal projects?

Framer offers a free tier that includes unlimited prototypes, but limits premium components and team features.

How does Framer compare to Figma for developers?

Figma focuses on UI design, while Framer adds interactive code components. For developers who need real‑world behavior, Framer is usually faster.

What browsers does Framer preview support?

Framer preview works in Chrome, Edge, Safari, and Firefox on desktop and mobile.

Now you have a complete workflow: install, build, animate, and export. Use these steps to turn ideas into production‑ready React components faster than ever.