How to create your first site on Framer

beginner 8 min read Updated 2026-03-18

Quick Answer

Creating your first site on Framer involves signing up for an account, choosing a template or starting from scratch, customizing your design using the visual editor, and publishing your site. The entire process can be completed in under an hour with Framer's intuitive drag-and-drop interface.

Try Framer Full Framer Review

Prerequisites

A Framer account (free or paid)
Basic understanding of web design principles
Computer with internet connection
Email address for account verification

Step-by-Step Instructions

Sign up and access the dashboard

Go to framer.com and click Sign Up. Create your account using your email or Google/GitHub login. Once verified, you'll be redirected to your Framer dashboard where you can see all your projects and templates.

Choose a professional email address as it will be associated with your published sites

Start a new project

Click the + New button in your dashboard. You'll see options to Start from scratch or Use a template. For beginners, select Use a template and browse through categories like Portfolio, Business, or Landing Page. Click on a template you like and then click Duplicate.

Templates are fully customizable, so don't worry if the colors or content don't match your needs yet

Customize your content

In the Framer editor, click on any text element to edit it directly. Replace placeholder text with your own content. To change images, click on an image and then click the Replace button in the right panel. Upload your own images or choose from Framer's stock library. Use the Layers panel on the left to navigate between different sections.

Keep your content concise and focused on your main message for better user engagement

Modify design elements

Select any element to see styling options in the right panel. Change colors by clicking the Fill property, adjust typography using the Text properties, and modify spacing with Padding and Margin controls. Use the Components panel to add new elements like buttons, forms, or icons by dragging them onto your canvas.

Maintain consistent colors and fonts throughout your site by creating a style guide in the Properties panel

Add pages and navigation

Click the + Page button in the Pages panel to add new pages like About, Contact, or Services. To create navigation, select a button or text element, click Link in the right panel, and choose Page to link to your other pages. You can also link to external URLs or email addresses.

Keep your navigation simple with no more than 5-7 main menu items for better usability

Preview and test your site

Click the Preview button (play icon) in the top toolbar to see how your site looks and functions. Test all links, forms, and interactive elements. Use the device selector to preview on Desktop, Tablet, and Mobile views. Make adjustments as needed using the responsive design controls.

Test your site on actual mobile devices when possible, as the preview may not capture all nuances

Publish your site

When you're satisfied with your design, click Publish in the top right corner. Choose a Site Name (this will be part of your URL like yourname.framer.website). Review your settings and click Publish Site. Your site will be live immediately and you'll receive a shareable URL.

You can always update your published site by making changes and clicking Publish again

Common Issues & Troubleshooting

Template elements won't let me edit them

Some elements might be locked or part of a component. Try right-clicking and selecting Detach Instance, or check if you're trying to edit a master component instead of an instance.

My site looks different on mobile than expected

Switch to Mobile view in the editor and adjust layouts specifically for mobile. Use Auto Layout and Responsive settings in the right panel to make elements adapt better to different screen sizes.

Images appear blurry or pixelated

Upload higher resolution images (at least 2x the display size). Use JPG for photos and PNG for graphics with transparency. Framer automatically optimizes images, but starting with high quality is important.

Publishing fails or takes too long

Check your internet connection and try again. If you have many large images, consider compressing them first. Clear your browser cache and ensure you're on the latest version of your browser.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Framer website before purchasing.

Visit Framer View Framer Pricing