Step 2

Let’s dive in and get started with Framer.

Click the “Login” or “Sign up” button in the top right corner to create your account.

Step 3

Click the login button, then choose your Google account to log in.

Step 4

If this is your first time using Framer, you’ll see a prompt to create a new account.

Step 5

Just fill in the required info, agree to the terms, and hit “Continue.”

You’ll go through a short survey and then — boom — your first project is automatically created.

Step 6

Before jumping straight into the editor, I recommend checking out the dashboard first.

Step 7

Click your avatar in the top-right corner of the Framer homepage, then select “Projects” to view your project list.

Step 8

The auto-generated project you just created will show up there too.

Step 9

Here’s another tip:

Scroll to the bottom of the Framer homepage and you’ll find the desktop app download link.

Step 10

Download the version that matches your operating system.

Step 11

Start by downloading the installer file.

Step 12

Once it’s downloaded, unzip the file.

If you’re on a Mac, drag it to your Applications folder and open it up.

Step 13

Log in again from the app and launch it.

Step 2

In the top-left corner, you’ll see which team and workspace you’re currently in.

Step 3

A workspace is where you can group similar projects together. It’s also the unit used to define billing.

Step 4

You can create new workspaces as needed and manage frequently used templates from here.

Step 5

There’s also a Night Mode option to switch to a darker theme, plus a logout button.

Step 6

You’ll find the “Account” menu in the top-left, where you can update your personal account settings.

Step 7

Under the workspace menu, you can manage members, choose your plan, set permissions, upload fonts, add a logo, and more.

Step 8

Within the Account section, you’ll also see a list of your current workspaces.

Step 9

You can even track your login sessions and see where you're signed in.

Step 10

The “Setting” menu lets you fine-tune everything about your current workspace.

Step 11

In the “Update” tab, you can check what new features Framer has recently rolled out.

Step 12

Clicking the “Community” tab brings you to Framer’s online community — a place to share, ask, and learn with users worldwide.

Step 13

The community is very active and welcoming, even if English isn’t your first language.

Step 14

Lower on the dashboard, you’ll find your list of projects.

Step 15

Want to create a new project? Click the “New Project” button in the top right.

Step 16

Let’s say you name it “Test” — you’ll see it added right away to your project list.

Step 17

Note: Framer doesn’t offer a “delete project” option.

Step 18

This is intentional — it helps prevent accidental loss of important files.

Step 19

If you want to hide a project from view, use the “Archive” feature.

Step 20

Click the project’s menu button, then select “Archive.”

Step 21

The project will no longer show up in the main dashboard view.

Step 22

To see archived projects, click the Archive icon in the left sidebar.

Step 23

You can also organize your projects into folders — for example, one called “Class Recording.”

Step 24

To move a project into a folder, click its menu button and select “Move,” then choose the folder you want.

Step 2

You can start a project using the “New Project” button in the top right,

Step 3

or by clicking the plus (+) tab in the top bar — both work!

Step 4

You’ll see a guide with five steps at the start, but you can hide it by clicking “Hide.”

Step 5

The layout consists of the top menu, a panel on the left, and a properties panel on the right.

Step 6

Clicking a layer brings up detailed settings in the right panel.

Step 7

In the center, there’s your canvas — your main design area.

Step 8

Frequently used tools also float in the bottom toolbar.

Step 9

Let’s look at the top menu first.

On the far left, you’ll find all file-related actions.

Step 10

Need something specific? Use the search bar to find it quickly.

Step 11

The file menu is where you go to duplicate a project, archive it, create a new page, and so on.

Step 12

Next to it are Framer’s five core tools.

Step 13

“Insert” lets you add new elements to the canvas.

Step 14

“Layout” is technically a type of insert, but it’s used so often that it gets its own button.

Step 15

“Text” is the same — used so frequently that it deserves its own spot.

Step 16

The Insert menu includes more complex or pre-made items — things like icons, sections, or interactive elements.

Step 17

Personally, I really like using the icon sets in Insert.

Step 18

The CMS button is great if you’re managing blogs or repeating content types.

Step 19

There’s also a full lecture that dives deeper into CMS features — check it out if you're interested.

Step 20

Plugins let you connect to external tools or auto-generate assets inside Framer.

Step 21

If you’ve used Figma plugins before, this will feel familiar.

Step 22

In the center-top area, you’ll see your project’s name and plan type.

Step 23

Click the name to rename your project instantly.

Step 24

You can also move your project to a different folder from here.

Step 25

Click the “Free” label to see options for upgrading your plan.

Step 26

Top right, you’ll see who’s working on the project and what permissions they have.

Step 27

Click the globe icon to manage multi-language support for your site.

Step 28

The gear icon opens your site settings, including domain, pages, and more.

Step 29

You’ll also find Form settings, version control, and plan details here.

Step 30

The bar chart icon shows your site traffic and analytics.

Step 31

The play button opens a live preview of your site — super handy!

Step 32

Want to see it full screen? Click the “Full Screen” button in the top left.

Step 33

The “Invite” button lets you add teammates to your project.

Step 34

Last but not least, the “Publish” button puts your site live with a unique URL.

Step 2

The Pages tab shows all the different pages on your site.

For example, if you want to add an “About” page…

Step 3

Just click the plus button, choose “New Page,” and type in a URL like /about.

Step 4

Anything you design on that page will appear when people visit that URL.

Step 5

When you create a new page, it’ll say “draft” in the top-right corner.

That just means it’s not published yet.

Step 6

To remove the draft status, open the page menu and uncheck “draft.”

Step 7

Now the page will be published along with the rest of your site.

Step 8

Next up — the Layers tab.

Let’s add a text element to the About page and see what happens.

Step 9

Once you add some text, you’ll see it listed immediately in the Layers panel.

Step 10

That text layer is now sitting inside the larger “Desktop” screen layer.

Step 11

Let’s add a Frame using the Layout tool — think of it like a container.

Step 12

If you draw the frame over the text,

Step 13

The text layer automatically becomes a child of the frame.

Step 14

Layers in Framer are nested — just like folders.

Move one, and everything inside it comes along too.

Step 15

This makes organizing and editing your designs much easier.

Step 16

You can even hide an entire frame, and all its child layers will be hidden with it.

Step 17

Now let’s look at the Assets tab.

This is where reusable stuff lives — components, colors, fonts, and more.

Step 18

You can also store code snippets and layout templates here.

Step 19

So that’s the left panel in a nutshell!

Step 2

But as soon as you select a layer, it springs to life with options.

Step 3

For example, if you click on a Text layer,

Step 4

You’ll see controls for editing the text, adjusting size, color, and more.

Step 5

Clicking on a Frame layer brings up background color and layout options.

Step 6

If you select something like a Rows layout,

Step 7

You’ll get controls specific to layout spacing, alignment, and so on.

Step 2

You can pan by moving your mouse left or right, up or down.

Step 3

If you’re on a trackpad, just use two fingers to scroll around — super intuitive.

Step 4

If you use a mouse, select the hand tool (hand icon) and click-drag to move the view.

Step 5

To go back to selecting elements, switch to the arrow (select) tool and click what you need.

Step 6

Zooming is key too!

On a trackpad, you can pinch to zoom in or out.

Step 7

Pinch out = zoom in.

Pinch in = zoom out.

Step 8

There’s also zoom controls in the bottom toolbar if you prefer clicking.

Step 2

The MVP? Command + K.

This is your all-in-one search bar for everything.

Step 3

You can type “Frame” to insert one instantly,

Step 4

Or search for a plugin — all from the same place.

Step 5

You can even find layout tools directly through here.

Step 6

Need to switch your site’s language? Or jump to site settings? Command + K works for that too.

Step 7

When in doubt, hit Command + K and search — it’s a lifesaver.

Step 8

Next up: the F key.

It’s a quick way to draw a Frame layout.

Step 9

Copy and paste works as expected:

Command + C to copy, Command + V to paste.

Step 10

Want to duplicate something fast? Just press Command + D.

Step 11

To preview your site like a real web page, use Command + P.

Step 12

That’ll bring up a live preview immediately.

Step 13

To exit the preview, just press ESC.

Step 14

Another must-know shortcut: Shift + A.

Step 15

Select two or more elements and press Shift + A —

Step 16

Framer will instantly group them into a Layout component.

Step 17

We’ll explore Layouts more in a dedicated section later on.

Step 18

And here’s a nice bonus:

To upload images or videos, just drag and drop them directly into the canvas.

Step 2

Click the “Publish” button and Framer will generate a unique URL.

Step 3

Open that link and you’ll see your site exactly how it looked in the preview.

Images, content — everything is there.