How to Use Framer

Getting started with Framer

Framer is an AI-powered web design platform that helps you create, publish, and optimise websites easily. After reading this guide, you'll be able to set up your account, create your first project, and use Framer's features effectively.

Step 1: Sign up and set up

1. Go to Framer's website.
2. Click on the "Sign Up" button in the top right corner.
3. Choose to sign up with your email or use a Google account for quicker access.
4. Follow the prompts to verify your email and set up your profile.
5. Once signed in, you’ll be taken to the dashboard where you can start a new project.

Step 2: Your first website

1. From the dashboard, click on the "New Project" button.
2. Select a template or choose "Blank" to start from scratch.
3. To generate a wireframe, click on the "Design" tab on the left sidebar.
4. Use the "AI Wireframe" option to let Framer create a basic layout for you.
5. Adjust the generated elements by clicking on them to access the properties panel on the right.
6. Add text, images, and other components using the "+" button in the top-left corner.
7. Once satisfied with your design, click on the "Preview" button in the top right to see how it looks.

Step 3: Get better results

1. Experiment with the “A/B Testing” feature by clicking on the "Settings" icon (gear symbol) in the left sidebar.
2. Create variations of your design to test which performs better.
3. Use the “Publish” button in the top right to make your site live.
4. Regularly check the “Analytics” section to track your website's performance and user engagement.

Pro tip

Use the "Duplicate" option on any design element by right-clicking it. This saves time when you want to create similar components without starting from scratch.

Common mistake to avoid

Don't skip the initial tutorial prompts when you first log in. These provide essential insights into navigating the UI and using key features effectively. Ignoring them can lead to a slower learning curve.