How to Use Framer in 2026: A Complete Beginner's Guide

TL;DR: How to Use Framer in 2026

• Framer is a visual website builder (not just a design tool) that lets you design, build, and publish production websites without writing code

• The editor works like Figma: drag-and-drop frames, components, text, and images onto a canvas. Everything you build is a live website, not a prototype

• Key features include a built-in CMS for blogs and dynamic content, responsive breakpoints for mobile and tablet, animations and interactions, real-time team collaboration, and one-click publishing

• Framer is used by companies like Perplexity, Miro, and Scale AI, and was adopted by 40% of Y Combinator's latest batch

• At Goodspeed, we have built 200+ products on Framer, Bubble, and n8n with a 5.0 Clutch rating. If you need expert help at any stage, book a free consultation.

Getting Started with Framer

Before we dive into the basics of Framer, let's first discuss how to get started with the tool. Here are the steps to follow:

1. Create a free Framer account. Go to framer.com and sign up. Framer runs entirely in the browser, so there is nothing to download. You can start building immediately on the free plan.

2. Start a new project. From your dashboard, click "New Project." You can start from a blank canvas or choose from Framer's template library. Templates give you a working site structure you can customize, which is the fastest way to learn.

3. Learn the interface. The editor has three main areas: the canvas (center) where you design, the layers panel (left) showing your page structure, and the properties panel (right) for styling and settings. If you have used Figma, the layout will feel familiar.

4. Understand the key concept. Everything you build in Framer is a live website. There is no separate "preview" or "export" step. What you see on the canvas is what gets published. This is the biggest difference between Framer and traditional design tools.

Building Your First Page

With your project open, you are ready to start building. Framer's editor works like a visual code editor: every element you place on the canvas becomes part of a live website. Here is how to get started:

Now that you have Framer up and running, let's start with the basics of designing your first project. Here are the steps to follow:

1. Create a new frame: To create a new frame, go to Frame > New Frame. You can choose from various frame types, such as a blank frame, a rectangle, or a user interface (UI) component.

2. Add elements to your frame: Once you have created a frame, you can start adding elements to it. You can add text, images, buttons, and other UI components to your frame.

3. Resize and position elements: To resize an element, select it and use the resizing handles to adjust its size. You can also use the alignment tools to position elements accurately.

4. Add interactions: Framer lets you add hover effects, click animations, scroll-based transitions, and page navigation directly in the editor. Select an element, open the interactions panel, and choose from built-in animation presets or build custom transitions. For deeper coverage, see our guide to interactive designs in Framer.

5. Preview your site: Click the "Preview" button in the top-right to see exactly how your page will look when published. You can toggle between desktop, tablet, and mobile views to check responsiveness before going live.

Working with Layers

The layers panel (left side of the editor) shows every element on your page in a hierarchical tree. Keeping layers organized is critical for maintaining clean, manageable websites, especially as your pages grow in complexity.

1. Creating layers: Every element you add to the canvas (frames, text, images, buttons) automatically appears as a layer. You can also group layers by selecting multiple elements and pressing Cmd/Ctrl + G. Groups help you organize related elements like a navigation bar or a card component.

2. Renaming layers: Double-click any layer name in the panel to rename it. Use clear, descriptive names (e.g., "Hero Section," "CTA Button," "Footer Nav") so you and your team can find elements quickly.

3. Reordering layers: Drag layers up or down in the panel to change their stacking order. Elements higher in the list appear in front of elements below them on the canvas.

4. Hiding layers: Click the eye icon next to a layer to toggle visibility. This is useful when you need to work on elements that overlap, or when building complex sections with many stacked components.

5. Duplicating layers: To duplicate a layer, select it and go to Layer > Duplicate Layer. This is useful when you want to create a copy of a layer and make changes to it without affecting the original.

Talk to our Framer Agency experts to setup your Framer website.

Working with Frames

Frames are the fundamental building blocks of every Framer website. A frame is a container that holds other elements (text, images, buttons, other frames). Think of frames as the div elements in HTML. Every section, card, button, and layout on your site is built with frames.

1. Creating frames: Press F on your keyboard or click the Frame tool in the toolbar. Click and drag on the canvas to draw a frame. You can also select a device preset (Desktop, Tablet, Mobile) from the properties panel to set a starting width.

2. Resizing frames: To resize a frame, select it and use the resizing handles to adjust its size. You can also use the keyboard shortcuts to resize a frame quickly.

3. Moving frames: To move a frame, select it and use the arrow keys on your keyboard to move it around the canvas.

4. Duplicating frames: To duplicate a frame, select it and go to Frame > Duplicate Frame. This is useful when you want to create a copy of a frame and make changes to it without affecting the original.

5. Deleting frames: To delete a frame, select it and go to Frame > Delete Frame. Be careful when deleting frames, as this action is permanent and cannot be undone.

Working with Text

Text is a crucial element in most designs, and Framer makes it easy to work with text. Here are the basics of working with text in Framer:

1. Adding text: To add text to your design, go to Text > Add Text. You can choose from various text styles, such as a heading, subheading, or body text.

2. Editing text: To edit text, select it and use the text editing tools to change the text, font, size, color, and other properties.

3. Formatting text: Framer allows you to format text using various formatting options, such as bold, italic, underline, and strikethrough.

4. Adding links: To add a link to your text, select the text and go to Text > Add Link. You can then enter the URL of the link and choose the link style.

5. Adding text styles: Framer allows you to add various text styles, such as a drop shadow, stroke, or fill. You can also create your own custom text styles.

Working with Images

Images are a great way to enhance your design and make it more visually appealing. Here are the basics of working with images in Framer:

1. Adding images: To add an image to your design, go to Image > Add Image. You can choose from various image sources, such as your computer, a website, or a stock photo website.

2. Resizing images: To resize an image, select it and use the resizing handles to adjust its size. You can also use the keyboard shortcuts to resize an image quickly.

3. Cropping images: To crop an image, select it and go to Image > Crop. You can then adjust the crop bounds to remove unwanted parts of the image.

4. Adding image filters: Framer allows you to add various image filters, such as a blur, brightness, or contrast adjustment.

5. Adding image styles: Framer allows you to add various image styles, such as a drop shadow, stroke, or fill. You can also create your own custom image styles.

Working with Page Links and Navigation

Framer websites are made up of pages, and you connect them through links and navigation elements.

1. Creating pages: In the pages panel (top-left), click "+" to add new pages. Each page gets its own URL path (e.g., /about, /pricing, /blog). Organize pages into folders for cleaner site structure.

2. Adding navigation: Use the built-in Nav component or build a custom navigation bar using frames and text links. Link each nav item to the corresponding page. Framer includes a pre-built navigation component with desktop and mobile menu support.

3. Linking elements: Select any element, open the Link panel in properties, and choose a destination: another page, an external URL, a section on the same page (anchor links), an email address, or a phone number.

4. Testing navigation: Use Preview mode to click through your full site. Test every link, check that mobile menu toggles work, and verify that page transitions feel smooth. For more on navigation and interactions, see our Framer tutorial.

Working with Collaborators

Framer makes it easy to collaborate with others on your designs. Here are the basics of working with collaborators in Framer:

1. Inviting collaborators: Click the "Share" button in the top-right of the editor. Enter email addresses to invite team members. You can set each person's role: Editor (full access), Viewer (can comment), or Developer (code access).

2. Collaborator permissions: Framer offers different permission levels for collaborators, such as editor, commenter, or viewer. You can choose the appropriate permission level for each collaborator, depending on their role in the project.

3. Real-time collaboration. Multiple team members can work in the same project simultaneously. You see each other's cursors and edits live, similar to Google Docs or Figma. This eliminates version conflicts and speeds up feedback cycles.

4. Leaving comments: Framer allows you to leave comments on designs and prototypes. You can use this feature to communicate with your collaborators and provide feedback on their work.

Working with Plugins

Framer offers a wide range of plugins that can enhance your design and prototyping experience. Here are the basics of working with plugins in Framer:

1. Installing plugins: To install a plugin, go to Plugins > Install Plugin. You can then choose the plugin you want to install and follow the installation instructions.

2. Using plugins: Once you've installed a plugin, you can use it in your design or prototype. Plugins can add new features, such as animation, interactions, or design elements.

3. Managing plugins: You can manage your installed plugins by going to Plugins > Manage Plugins. You can then enable or disable plugins, as well as update them to the latest version.

Working with Version Control

Framer allows you to use version control to keep track of changes to your designs and prototypes. Here are the basics of working with version control in Framer:

1. Creating a version: Framer automatically saves version history for your project. You can manually create named checkpoints before making major changes. This gives you a safety net if you need to roll back.

2. Naming versions: Give each checkpoint a clear name (e.g., "Before CMS migration," "Post-redesign v2") so you can identify what changed at each stage.

3. Comparing versions: Framer allows you to compare different versions of your design or prototype. You can use this feature to see what changes were made between versions.

4. Reverting to a previous version: If you need to revert to a previous version, you can do so by going to File > Revert to Previous Version. You can then choose the version you want to revert to and confirm the action.

Working with Components

Components are reusable design elements that keep your website consistent and maintainable. Create a component once (like a button, card, or navigation bar) and reuse it across every page. When you update the component, every instance updates automatically. For a deeper dive, see our guide to Framer components and libraries.

Here are the basics of working with symbols in Framer:

1. Creating components: Select any element or group of elements, right-click, and choose "Create Component" (or press Cmd/Ctrl + Alt + K). Name it clearly (e.g., "Primary Button," "Testimonial Card," "Footer"). Components appear in your Assets panel for reuse.

2. Using components: Open the Assets panel and drag any component onto your canvas. Each instance is linked to the master component. You can override specific properties (like text or images) per instance while keeping the overall structure synced.

3. Editing components: Double-click any component instance to enter the master component editor. Changes you make here apply to every instance across your site. This is how you maintain brand consistency at scale.

4. Organizing components: As your component library grows, use folders in the Assets panel to categorize them (e.g., Navigation, Cards, Buttons, Forms). Well-organized components speed up development and make it easier for team members to find what they need.

Working with Events

Events allow you to respond to user interactions with your designs. In Framer, you can create events that trigger when a user clicks, taps, or hovers over an element. This can help you create interactive and engaging designs.

Here are the basics of working with events in Framer:

1. Creating events: To create an event, select the element you want to trigger the event and go to Event > New Event. You can then choose the type of event you want to create, such as a click or tap event.

2. Setting up event listeners: Once you've created an event, you need to set up an event listener. This tells Framer what action to take when the event is triggered. You can do this by selecting the element that should respond to the event and going to Event > Add Event Listener.

3. Using actions: Actions are the responses that occur when an event is triggered. You can choose from various actions, such as navigating to a new frame, showing a notification, or updating a variable.

4. Testing events: To test your events, you can use Framer's built-in testing tools. This allows you to simulate user interactions and see how your design responds.

You can watch this video tutorial for working with Events on Framer.

Working with Constraints

Constraints allow you to control the size and position of your elements. In Framer, you can use constraints to create responsive designs that adapt to different screen sizes and orientations.

Here are the basics of working with constraints in Framer:

1. Creating constraints: To create a constraint, select the element you want to constrain and go to Constraint > New Constraint. You can then choose the type of constraint you want to create, such as a horizontal or vertical constraint.

2. Setting constraint values: Once you've created a constraint, you need to set its value. This determines how the element will be positioned or sized. You can do this by dragging the constraint handle or entering a value in the constraint panel.

Working with Animations

Animations can be used to add visual interest and interactivity to your designs. In Framer, you can create animations using the Animation panel.

Here are the basics of working with animations in Framer:

1. Creating animations: To create an animation, select the element you want to animate and go to Animation > New Animation. You can then choose the type of animation you want to create, such as a fade in or a slide left.

2. Setting animation properties: Once you've created an animation, you can set its properties, such as the duration, delay, and easing. This will determine how the animation looks and behaves.

3. Adding animation triggers: You can add triggers to your animations to control when they start and end. For example, you can trigger an animation to start when a user clicks a button or hovers over an element.

4. Testing animations: To test your animations, you can use Framer's built-in testing tools. This allows you to simulate user interactions and see how your design responds.

Publishing Your Website

Framer handles hosting for you. When your site is ready, publishing takes one click.

1. Publish to a free subdomain. Click "Publish" in the top-right corner. Your site goes live at yourproject.framer.website. This is free and instant, good for testing and sharing drafts.

2. Connect a custom domain. In project settings, add your own domain (e.g., yourcompany.com). Framer provides DNS instructions, and once configured, your site is live on your domain with automatic SSL. See Framer pricing for plan requirements.

3. Configure SEO settings. Before publishing, set your page title, meta description, and OG image for each page. Framer generates a sitemap automatically. For more on SEO in Framer, see our Framer SEO plugins guide.

4. Staging vs. production. Framer lets you preview changes before pushing them live. Use the staging environment to test updates, then publish when you are confident everything works.

The market for visual website builders is expanding. According to a Market.Us report, the AI-powered website builders market is projected to grow from $3.17 billion in 2023 to $31.5 billion by 2033. Framer is positioned at the center of this shift, combining AI-assisted design with a full publishing and CMS platform.