Framer for beginners: how to build and publish your first site

Step 1

Start with the free plan and a small brief

Sign up at framer.com. Framer describes its free plan as ideal for non-commercial use: as of November 2026 it includes a free address on a Framer domain, 1 GB of bandwidth, up to 1,000 pages and 10 CMS collections per project, 5 MB file uploads and 500 AI credits to try if the workspace has no paid subscription. A custom domain needs a paid plan. Framer runs in the browser, and there's also a desktop app for Mac and Windows. Your first brief: a one-page portfolio site with an intro, 2–3 projects and contacts.

• •prepare real texts and images of your work in advance;
• •for each project: a title, one sentence about the problem and your role;
• •don't plan a blog and five pages straight away: first one page, finished properly.

Step 2

Get to know the canvas and stacks

Framer looks like a design editor: a canvas, layers, a properties panel. But you're not making a picture; you're making a page that has to stretch and shrink. The main tool for that is the Stack: a container that lines elements up in a row or a column with an even gap and adapts to its content. Framer's help recommends building layouts from stacks so they change with the content without manual fixes.

• •split the page into sections: first screen, work, about, contacts;
• •each section is a vertical stack, with horizontal stacks inside for rows;
• •set sections and columns to Fill, buttons and labels to Fit Content, and keep fixed pixels for icons, avatars and logos.

💡 If you know auto layout in Figma, stacks will feel familiar. If not, start with Figma for beginners: these skills carry over.

Step 3

Typography, color and components

Before building sections, set up text styles for H1, H2 and body text, and color styles for background, text and accents. Then one change to a style updates the whole site. Make the button, the project card and the menu into components: you can reuse them and edit them in one place.

• •one font for headings and one for text is enough; check that the font supports Cyrillic;
• •the project card is a component with fields for an image, a title and a description;
• •check contrast: for normal text, WCAG requires a ratio of at least 4.5:1.

Step 4

Breakpoints and honest work with the AI agent

When the desktop version is ready, add tablet and phone breakpoints and go through each: font sizes, stack direction, spacing. Framer Academy advises checking the page not only at preset device widths but also by resizing smoothly between them: that shows where text wraps and alignment breaks. Framer has an AI agent that can draft a page or make edits from a prompt; it uses AI credits.

• •use the agent for a draft or routine work, not as a replacement for decisions about structure and emphasis;
• •check every change the agent makes on the canvas: text, alignment, reading order on the phone;
• •in your portfolio, be honest about what was done with AI and what by hand.

💡 Try an exercise: build a section by hand, then ask the agent to do the same and compare. You'll quickly see what the tool does well and what you have to fix.

Step 5

Publish the site and collect feedback

Click Publish in the top-right corner: Framer builds the site and gives it a generated framer.app address. You can connect a custom domain later on a paid plan. Before publishing, open Preview and check navigation, links and behavior at different widths.

• •open the published site on your phone and check that everything reads without zooming;
• •if the page doesn't fill the screen on the phone, Framer's help says the most common cause is an element wider than the phone screen: look for a fixed width (e.g. 321px) or a Max Width that's too large;
• •send the link to people who will be honest, and ask a specific question.

💡 A good feedback question: "What did you understand about me in the first 5 seconds?" If the answer doesn't match your intent, change the first screen.