Skip to content
Chapter 01 of 04 · 2 lessons · ~17 min

Getting Started With Framer

Create your first Framer project and learn the canvas, panels and tools you'll use every day.

YOUR PROGRESS0%
/ Lessons in this chapter
01
Framer Tutorial for Beginners How to create a Framer project, build your first section and publish it live. Coming soon
02
Framer Interface Tour Where everything is in Framer and how the main panels work together. Coming soon

Chapter practice task

Task: Create a project and build a simple hero section

  1. Create a new Framer project from a blank page or a template.
  2. Explore the layers panel, the insert menu and the properties panel.
  3. Build a hero section with a heading, a paragraph and a button.
  4. Preview it and publish to a free Framer address.

By the end of this chapter

  • You have a Framer project you can preview and publish
  • You know where every main tool and panel is
  • You can add elements, style them and see them live

Quick answers for this chapter

Is Framer like Figma?

The canvas feels similar, but every Framer frame is a real web page element, so what you design is what gets published.

Should I start from a template?

Templates are great for learning how good Framer sites are built. For your own projects, starting blank teaches you more.

Can I use AI to start a site?

Framer can generate a starting layout from a prompt. Treat it as a draft and refine the structure, text and design yourself.