Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →To build a website with Framer, plan its pages and content, create an editable first draft with Framer’s Agent or start from a blank canvas, refine the layout, adapt it for narrower screens, preview the site, then publish it to a Framer subdomain or a connected custom domain. The Agent can generate pages, navigation, CMS content, components and breakpoints; treat that output as a starting point to review, not a finished website.
1. Plan the site before building
Decide what the site needs to communicate and what a visitor should be able to do. A small business or personal site might need a home page, an about page and a contact page. A site that publishes regular articles or project case studies may also need repeatable content managed through CMS.
- List the pages visitors need and the main content for each.
- Identify content that repeats, such as articles, events, products or team profiles.
- Note elements you will reuse, such as a header, footer or call-to-action block.
- Choose a visual direction and gather relevant images or other assets.
- Consider how the layout should change on a narrow screen, especially navigation, columns and large headings.
This outline gives the Agent useful context and gives you a way to judge whether its first draft fits the site’s purpose.
2. Create the first structure, then inspect it
Framer Academy’s current first-site workflow starts with a blank project and uses the Agent to create a first structure. Give it a specific description of the site, its audience, required pages and visual direction. You can ask it to create navigation, reusable components, CMS collections and responsive breakpoints where the project needs them. The generated result remains native and editable on the Framer canvas. See Framer Academy’s first-site tutorial.
Recommended Free Tools
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
After generation, inspect the result rather than assuming every page or interaction is correct. Check the Pages panel, canvas layers and CMS collections; make sure the page structure matches your outline and that the navigation leads to the right places. Edit individual text and layout details on the canvas. Framer says quick canvas edits such as changing text, colors, spacing, corner radius, section order or visibility do not use Agent credits. Use the Agent for larger or repetitive changes, such as restructuring a section or applying a new visual direction.
3. Choose the right kind of page
Framer distinguishes three page types. For a straightforward first site, ordinary Web Pages are usually enough; use CMS Pages when many pages share a content template, and Design Pages for private experiments rather than the published site.
| Page type | Use it for |
|---|---|
| Web Page | A page in the published website structure, such as Home, About or Contact. |
| CMS Page | Pages generated from a collection using a shared template, such as individual articles or case studies. |
| Design Page | A private canvas for mockups and experiments. |
New Framer projects start with a Home page. Framer Help gives a default desktop width of 1200 pixels; that starting width does not remove the need to check how the layout behaves at narrower sizes. Details are in Framer Help’s page guide.
Rank #2
4. Refine the visual layout on the canvas
Work through the page from its most important content to smaller details. Confirm the headline explains the page, sections appear in a useful order, and buttons or links have clear purposes. Adjust text, colors, spacing and corner radius directly on the canvas, and reorder sections if the page flow does not support the visitor’s task.
- Check that headings and body text are easy to distinguish.
- Make the main action visually clear without letting secondary elements compete with it.
- Inspect links and interactive elements instead of relying on appearance alone.
- Hide or rearrange elements at narrower sizes only when doing so improves the experience.
5. Make the layout responsive where it needs to be
Responsive design means the page remains usable as the available viewport changes; it does not mean every project needs separate desktop, tablet and phone layouts. Framer breakpoints define alternate layouts for viewport ranges. A breakpoint’s width is the minimum viewport width at which that breakpoint activates, according to Framer Academy’s breakpoint lesson.
Start with the main layout and check it at narrower widths. Add a breakpoint when content becomes hard to read, navigate or use, then override only the properties that need to change. Common adjustments include typography, Stack direction, gap, padding, width and visibility. You may need more than one breakpoint, or none beyond the default layout, depending on where the design stops working.
The breakpoint lesson is dated April 27, 2025, and notes that its interface guidance predates Framer Agents, Branching and a CMS update on June 16, 2026. Its underlying breakpoint concepts remain useful, but some editor controls may look different from the current interface.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.6. Add CMS only for content that repeats
Use CMS when you have many records with the same general structure—for example, a set of articles with titles, summaries, images and publication dates. A CMS collection groups those records, while its fields hold the content. Connect the fields to a reusable CMS Page template for each record, then use a collection list to show an index or grid.
For a small site with a handful of distinct pages, ordinary Web Pages are simpler. For a site with recurring articles, events, case studies, team profiles or products, CMS can keep content consistent without requiring you to build every entry as a separate page. Framer Academy’s CMS tutorial explains the current Agent-assisted workflow.
Rank #4
7. Preview the site before publishing
Open Preview and review the pages as a visitor would. Framer Academy recommends checking navigation, interactions, page flow and responsive behavior across Desktop, Tablet and Phone sizes. Use the review to find broken links, awkward section order, layout problems or controls that do not behave as intended.
- Follow each navigation item and important page link.
- Try buttons and other interactions.
- Read through the page flow to make sure the content hierarchy is clear.
- Check each relevant viewport size, including narrower states where you added breakpoints.
8. Publish and verify the live site
When the preview is ready, use Framer’s Publish workflow. Publishing generates a framer.app address. You can also connect a custom domain through the domain settings and follow Framer’s DNS instructions. After publishing, open the live address and check the pages again. Framer Help documents reviewing View Changes and the optimization indicator; a red status can point to issues such as nested links or code errors. See Framer Help’s publishing guide.
Staging is not available on every plan: Framer documents it for sites on Pro or higher with staging enabled. If you need a staging workflow, confirm that the site and its configuration meet those conditions before relying on it.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
