Build Your first Framer Site from Start to Finish
In this Framer tutorial, you will learn Build Your first Framer Site from Start to Finish. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance.
How do I use Framer AI to create a site?
You can use Framer’s AI site-building tools by starting a new project and selecting the AI workflow (often labeled “Start with AI” or similar). You then provide a prompt describing the kind of site you want, for example, “Create a landing page for a wellness coach with a blue theme and email signup.” The AI generates a responsive layout, complete with sections, content, and styling. You customize the design and content as needed, then publish when ready.
How do I add a collaborator to my Framer project?
Open your project in Framer, then click the invite or “members” button (usually found in the top-right corner). Enter the collaborator’s email address, choose their role (Editor or Viewer), and send the invitation. The invited person will receive access once they accept. You can manage their permissions later via the project or workspace settings.
How do I make my Framer site responsive across different devices?
To make your Framer site responsive, you can add breakpoints by selecting the desktop page and clicking the plus icon to add tablet and phone breakpoints. All other breakpoints inherit changes from the primary (desktop) breakpoint, but you can apply overrides for specific breakpoints. For example, you can adjust the video size or padding on the phone breakpoint without affecting others. Using stack layout options on pages and groups of elements also helps maintain consistent spacing and alignment across devices.
Lesson details
Dec 18, 2023
52:00
