Framer Logo Button

• Located on the far left of the toolbar.

• Opens project-related menus (such as new project creation, loading, settings).

• Acts similarly to a Mac menu bar.

Insert

• Marked with a + icon.

• Displays a panel for inserting various elements such as text, buttons, images, and components. (Shortcut: I)

• Serves as a designer's toolbox.

Layout

• Used to insert frames or grid layouts.

• Useful for designing responsive web layouts.

Text

• Allows insertion of text boxes.

• Enables immediate input or positioning upon clicking.

Vector

• Can draw basic shapes or custom paths.

• Utilized for logos, icons, and illustration work.

CMS

• Used to enter the Content Management System (CMS) panel.

• Suitable for managing repetitive content such as blogs and product lists.

Project Name

• You can change the project name or folder location by clicking.

• If it's a published site, the site URL appears next to it, enabling immediate access upon clicking.

Team Members Display

• Shows profile images of team members currently accessing the project.

• Real-time collaboration is possible, and you can hover over to see who's doing what.

Localization

• You can set the project's language and region. This setting helps display content by region when creating multilingual websites.

• It's possible to connect separate URLs for each language or set different texts.

Settings

• A comprehensive settings window for the current page or entire site.

• Adjustments can be made for SEO, favicon, Open Graph, website background color, and other settings.

• Initial screen settings for mobile and desktop views can also be changed here.

Preview Mode

• The mode that allows you to preview the pages you created as if they were in a real browser.

• Useful for testing responsive views and verifying how interactions work.

• It's fast as you can view directly within Framer without opening a new tab.

Invite Button

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

• Invites can be sent via email addresses or Framer accounts, with support for permission settings (view-only, editable, etc.).

Publish Button

• Function to publicly release the website on the internet.

• Once published, a public URL is created and updates can be made whenever changes occur thereafter.

Pages

• Manages each page in the project. New ones can be created or edited.

Layers

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

• You can switch to another page quickly using the Page Switcher at the top.

Assets

• Allows management of components, styles, and code files from the project in one place. Those familiar with Figma will find the Layers panel similar.

Properties Panel

• A context-based panel that changes content depending on which element is selected.

• Selecting a text box shows text-related settings like font, size, spacing, while selecting Breakpoint displays only responsive layout settings.

Pan Tool

• A tool that allows moving the canvas freely.

• Hold down the Spacebar and drag to move the entire screen.

• A basic control tool used frequently as the working range expands.

Comment Tool

• A tool for leaving feedback and annotations on designs.

• Allows clicking to enter comments at desired locations, extremely useful for collaboration.

• Enables real-time communication, streamlining workflow.

Day/Night Mode Switch

• Switches interfaces and site themes simultaneously to light/dark mode.

• Useful for checking visual contrasts during design or testing preview screens under different conditions.

Zoom Tool

• Allows zooming in/out of the canvas to adjust the work area.

• Shortcut keys: 
  Zoom to Fit: Shift + 1 (View all) 
  Zoom to Selection: Shift + 2 (Central view of selected element)  
  Zoom to 100%: Shift + 0 (Actual size view)

• Frequent zooming during work can confuse actual proportions, so it's good practice to check at 100% occasionally.