Create Your Account
Head to https://framer.com and click Sign Up. You can register with email or sign in using Google. Framer’s free plan includes unlimited projects and publishing to framer.website subdomains. After signup, you’ll land in the dashboard where all your sites and projects appear. Framer combines design and development in one tool, so the interface feels familiar if you’ve used design software like Figma, but with the power to publish live sites instantly.
Set Up Your First Project
Click New Project and choose between starting from scratch or using a template. Framer offers templates for portfolios, startups, landing pages, and marketing sites. Select one that fits your needs or pick Blank Canvas to build from zero. Name your project, and Framer opens the editor. The left sidebar shows your page tree and layers, the center canvas is your design space, and the right panel holds properties like layout, styling, and effects. Framer uses Auto Layout (similar to Figma’s), making responsive design intuitive from the start.
Build Your First Page
Add content using the toolbar at the top: text, images, shapes, frames, and components. Click any element to edit properties in the right panel: adjust colors, fonts, spacing, and effects. Framer shines with interactions: select an element, click the Interaction tab, and add hover effects, scroll animations, or page transitions without code. Use Stacks for auto-layout containers that handle responsive spacing automatically. Duplicate elements by holding Option (Mac) or Alt (Windows) and dragging. Every element can be styled per breakpoint, so your site looks perfect on desktop, tablet, and mobile.
Connect and Publish
Preview your site by clicking the Play button in the top-right corner. Test interactions and responsiveness. When satisfied, click Publish. Framer publishes instantly to a free framer.website subdomain. For custom domains, upgrade to a paid plan, then go to Site Settings > Domain and add your domain. Follow the DNS instructions to point your domain to Framer’s hosting. Framer includes free hosting, SSL certificates, and automatic performance optimization. You can also connect analytics and SEO settings in the same panel.
Next Steps
You’ve published your first Framer site. Explore components for reusable design elements, CMS for dynamic content, and Code Overrides if you want to add custom functionality. Framer’s community shares templates and components you can remix. For the full guide covering advanced animations, integrations, and workflows, visit /nocode-tools/framer.