How to Use Framer for Designers

Framer is a powerful prototyping tool that lets designers create interactive, high‑fidelity mockups without writing code. In this tutorial we walk through the main workflow, from setting up a new project to exporting React components. Follow each step, copy the snippets, and you’ll be ready to build realistic demos that developers can inspect and reuse.

Table of contents

• 1. Setting up Framer
• 2. Building layouts with Frames and Stacks
• 3. Adding animations and triggers
• 4. Using Code Overrides
• 5. Design‑to‑code hand‑off
• 6. Framer vs. Competitors
• 7. Frequently Asked Questions

1. Setting up Framer

1.1 Create an account

Go to framer.com and click “Sign up”. Choose the free Starter plan if you only need one prototype. Verify your email and you’ll land on the dashboard.

1.2 Start a new project

Click the “New File” button, select “Blank Canvas”, and give your file a name such as “Mobile Checkout”. The canvas opens at 1440 × 1024 px by default.

1.3 Import assets

Drag‑and‑drop PNG, SVG, or .sketch files onto the canvas. Framer automatically creates layers that you can rename in the Layers panel.

2. Building layouts with Frames and Stacks

2.1 Frames basics

A Frame is Framer’s equivalent of a div. Click the Frame tool (F) and draw a rectangle. In the right‑hand Properties panel you can set width, height, background, and border radius.

// Quick Frame creation via code override
export function Card() {
  return (
    <Frame width={300} height={200} background="#fafafa"
           radius={8} shadow="0 4px 12px rgba(0,0,0,0.1)" />
  );
}

2.2 Stacks for responsive columns

Stacks automatically arrange children in rows or columns. Select multiple frames, right‑click, and choose “Create Stack”. Adjust the direction, gap, and alignment in the Properties panel.

2.3 Auto‑layout with constraints

Enable “Constraints” on a Frame to pin it to the left, right, top, or bottom of its parent. This keeps the layout consistent across screen sizes.

3. Adding animations and triggers

3.1 Simple hover animation

Select a button Frame, go to the “Interactions” tab, click “+ Add Interaction”, choose “While Hover”, and set the target property (e.g., scale to 1.05).

3.2 Scroll‑based reveal

Use the “While In View” trigger to fade in elements as the page scrolls. Set opacity from 0 to 100 % and add a 0.3 s delay for a smooth effect.

// Code override for custom scroll animation
export function FadeIn(props) {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      const rect = props.ref.current.getBoundingClientRect();
      if (rect.top < window.innerHeight) setVisible(true);
    };
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return { opacity: visible ? 1 : 0, transition: "opacity 0.5s ease" };
}

3.3 Motion presets

Framer includes pre‑built presets like “Slide In”, “Fade”, and “Scale”. Apply them from the “Presets” dropdown to save time.

4. Using Code Overrides

4.1 What is an override?

Overrides are tiny React functions that run inside the prototype. They let you add logic, fetch data, or change styles at runtime.

4.2 Adding an override file

In the left panel click “+” → “Code Component”. Name it “MenuToggle”. Replace the default code with:

import { useState } from "react";
import { Frame, addPropertyControls, ControlType } from "framer";

export function MenuToggle(props) {
  const [open, setOpen] = useState(false);
  return (
    <Frame
      width={40}
      height={40}
      background={open ? "#0066ff" : "#ddd"}
      onTap={() => setOpen(!open)}
      whileHover={{ scale: 1.1 }}
    />
  );
}

4.3 Connecting the override to a design element

Drag the “MenuToggle” component onto the canvas. Align it with your navigation bar. The button now toggles color on tap.

5. Design‑to‑code hand‑off

5.1 Exporting React code

Click “Export” → “React”. Choose “Components only” to get clean JSX files. Framer generates a folder with index.js, styles.css, and a README.md.

5.2 Using design tokens

Open the “Tokens” panel. You’ll see color, spacing, and typography tokens. Click “Export JSON” and share the file with developers. In React they can import:

import tokens from "./tokens.json";
const Button = styled.button`
  background: ${tokens.colors.primary};
  padding: ${tokens.spacing.sm};
`;

5.3 Handoff checklist

• All Frames named meaningfully.
• Components exported as React.
• Design tokens synced.
• Prototype URL shared (e.g., https://framer.cloud/abcd).

6. Framer vs. Competitors

Below is a quick side‑by‑side comparison of Framer, Figma, and Adobe XD for a typical designer workflow.

Feature	Framer	Figma	Adobe XD
Code overrides	React‑based, full JS	Plugin‑only, limited	None
Responsive stacks	Native Stack tool	Auto‑layout (new)	Repeat Grid only
Prototype sharing	Public URL, no login needed	View only with Figma account	Requires Adobe ID
Design tokens	Export JSON, CSS vars	Variables (beta)	Limited
Pricing (as of 2026)	Free starter, $15/mo Pro	Free, $12/mo Professional	Free starter, $9.99/mo

7. Frequently Asked Questions

Is Framer free for individual designers?

Framer offers a free Starter plan that includes unlimited prototypes but limits publishing to a single project. Paid plans start at $15/month for additional projects and collaboration.

Can I import Sketch or Figma files into Framer?

Yes. Use the Import button in the dashboard to bring in .sketch or .fig files. Framer converts layers into editable components.

Do Framer prototypes work on mobile devices?

All prototypes are responsive and generate a shareable URL that works on iOS, Android, and desktop browsers without extra configuration.

How does Framer handle design tokens?

Design tokens are stored in the left‑hand Tokens panel. You can sync them with CSS variables or export a JSON file for development.

Is code export reliable for production?

Framer exports clean React code. Developers may need to adjust imports or styling, but the generated components are production‑ready.

With these steps you can move from a blank canvas to a fully interactive prototype that developers can inspect and copy. Framer’s blend of visual design and real code makes it a strong choice for designers who want to bridge the gap between mockups and production.