Framer Logo Button

• Located at the far left of the toolbar.

• Opens project-related menus such as creating, importing, and setting new projects.

• Serves a similar role to the menu bar on Mac.

Insert

• Indicated by a + icon.

• Displays a panel to insert various elements like text, buttons, images, and components. (Shortcut:
  I)

• Acts like a toolbox for designers.

Layout

• Used for inserting frames or grid layouts.

• Useful for responsive web design planning.

Text

• Allows the insertion of text boxes.

• You can immediately start typing or position it after clicking.

Vector

• Draw basic shapes or custom paths.

• Used in creating logos, icons, and illustrations.

CMS

• Access the Content Management System (CMS) panel.

• Ideal for configuring and managing recurring content like blogs and product listings.

Project Name

• Click to change the project name or folder location.

• If it's a published site, the site URL appears next to it for quick access.

Collaborator Indicator

• Displays the profile images of team members currently online in this project.

• Enables real-time collaboration, showing who is working on what when you hover over it.

Localization

• Allows setting the project's language and region. When creating multilingual websites, this setting helps display region-specific content.

• Possible to link separate URLs or set different texts depending on the language.

Settings

• The Detail Settings window for the current page or entire site.

• Adjust various configurations like SEO, Favicon, Open Graph, and website background color.

• You can also change the initial screen settings for mobile and desktop views here.

Preview Mode

• A mode where you can preview the page you created as if in an actual browser.

• Useful for testing responsive views or checking how interactions work.

• Fast, as it can be viewed directly inside Framer without opening a new tab.

Invite Button

• You can invite other users as collaborators to this project.

• Invitable via email address or Framer account, with permission settings supported (view only, editing allowed, etc.).

Publish Button

• A feature to publish the website on the actual Internet.

• Once published, a public URL is created, and any changes afterward can be updated.

Pages

• Manage each page within the project. You can create or edit them.

Layers

• Shows all elements (text, buttons, frames, etc.) within the current page in a hierarchical structure.

• With the Page Switcher at the top, you can switch to different pages directly.

Assets

• Manage components, styles, and code files in the project in one place. If you've used Figma, the Layers panel will feel quite similar.

Properties Panel

• A context-based panel that changes its content depending on what you've selected.

• If you select a text box, settings related to text such as font, size, and spacing appear, and if you select a Breakpoint, only settings related to responsive layouts are shown.

Pan Tool

• A tool for freely moving around the canvas.

• Drag with the Spacebar held down to move the whole screen.

• As your workspace grows, you'll frequently use this fundamental manipulation tool.

Comment Tool

• A tool for leaving feedback and comments on the design.

• You can click and enter comments at any desired location, making it very useful during collaboration.

• Real-time communication keeps the workflow straightforward.

Day/Night Mode Switch

• Switches both the interface and site theme to light/dark mode simultaneously.

• Useful for checking visual contrast during design or testing preview screens in different situations.

Zoom Tool

• Adjusts the workspace by zooming in/out the canvas.

• Shortcuts:
  Zoom to Fit: Shift + 1 (View All)
  Zoom to Selection: Shift + 2 (Center on Selected Item)
  Zoom to 100%: Shift + 0 (Actual Size View)

• Consistently check 100% view to avoid getting confused by enlarged views.