Figma Interface Overview: Panels, Tools, and Essential Shortcuts

Figma's interface has four primary panels:

1. Toolbar (top center): tools for creating and editing elements. As a developer you mainly use the selection tool (V) and hand tool (H) to navigate.
2. Layers panel (left sidebar): the complete hierarchy of all frames and elements on the current page. This directly mirrors the HTML DOM structure — a Figma component nesting corresponds to React component nesting.
3. Design panel (right sidebar): in design mode, shows visual properties of the selected element. In Dev Mode, shows CSS properties and copyable code snippets.
4. Properties panel (right sidebar, bottom): shows component properties and variables for the selected element.

Navigating the layers panel as a developer:

• Frame = page section or main component wrapper (maps to <section>, <article>, or <div>)
• Component = a reusable design component (maps to a React component)
• Group = a loose collection without layout logic (maps to a <div> with no special CSS)
• Auto Layout frame = a Flexbox or Grid container (shows direction arrow in layers panel)
• Text layer = a text node (maps to heading or paragraph elements)

Layer naming conventions (what good designers do):

• 'Button / Primary / Default' → Button component, primary variant, default state
• 'Card / Course' → Course card component
• 'icon/arrow-right' → icon at the icon system naming convention

Knowing shortcuts transforms Figma from tedious to fast. These are the 15 shortcuts developers use most:

Navigation:

• Space + drag: pan the canvas
• Ctrl/Cmd + scroll: zoom in/out
• Ctrl/Cmd + 0: zoom to fit all frames
• Ctrl/Cmd + 1: zoom to actual size (100%)
• Ctrl/Cmd + Shift + H: zoom to fit selection
• Z: zoom tool (click to zoom in, Alt+click to zoom out)

Selection:

• V: move/select tool
• H: hand (pan) tool
• Escape: deselect / exit to parent frame
• Click: select element
• Ctrl/Cmd + click: select through to child within group/component
• Alt + click: select parent frame of current selection

Inspection:

• Ctrl/Cmd + Shift + D: toggle Dev Mode
• Alt + hover: show distance measurements to nearby elements
• Alt + click on element: show distance from canvas edge

Other:

• Ctrl/Cmd + /: search commands and files
• Ctrl/Cmd + F: find/replace text
• 1, 2, 3... (number keys): zoom to specific percentage levels

Dev Mode shortcut (most important for developers):

Ctrl/Cmd + Shift + D opens Dev Mode, which transforms the right panel into the Inspect panel showing CSS values, design tokens, and exportable assets for any selected element.

Measurement overlay technique:

1. Select an element
2. Hold Alt and hover over another element
3. Figma shows the pixel distance between the two elements in red measurement lines
4. This gives you spacing values without scrolling through the Inspect panel

The CSS equivalent of those measurements:

• Distance between two elements → CSS gap or margin
• Distance from element edge to frame edge → CSS padding

The layers panel hierarchy maps directly to HTML nesting. Understanding this translation helps you write CSS that matches the design structure.

Figma layers panel:

1Page
2└── Course Listing (Frame = page wrapper)
3    ├── Header (Auto Layout horizontal)
4    │   ├── Logo (Image)
5    │   ├── Navigation (Auto Layout horizontal)
6    │   │   ├── Courses (Text)
7    │   │   ├── Guides (Text)
8    │   │   └── Pricing (Text)
9    │   └── CTA Button (Component)
10    └── Main Content (Auto Layout vertical)
11        ├── Hero Section (Frame)
12        └── Course Grid (Auto Layout wrap)
13            ├── Course Card (Component)
14            ├── Course Card (Component)
15            └── Course Card (Component)

Corresponding HTML structure:

1<body>  <!-- Page -->
2  <div class="course-listing">  <!-- Course Listing frame -->
3    <header class="site-header">  <!-- Header auto layout -->
4      <img src="logo.svg" alt="DevBootstrap">  <!-- Logo -->
5      <nav>  <!-- Navigation auto layout -->
6        <a href="/courses">Courses</a>
7        <a href="/guides">Guides</a>
8        <a href="/pricing">Pricing</a>
9      </nav>
10      <button class="btn-primary">Get Started</button>  <!-- CTA Button component -->
11    </header>
12    <main>  <!-- Main Content auto layout -->
13      <section class="hero"></section>  <!-- Hero Section -->
14      <div class="course-grid">  <!-- Course Grid auto layout wrap -->
15        <article class="course-card"></article>  <!-- Course Card component -->
16        <article class="course-card"></article>
17        <article class="course-card"></article>
18      </div>
19    </main>
20  </div>
21</body>

The layers panel is the design-side component tree — reading it fluently lets you plan your React component hierarchy before writing a single line of code.

Corresponding CSS for the Auto Layout frames:

1/* Header: Auto Layout horizontal, align-items center, gap 40px */
2.site-header {
3  display: flex;
4  flex-direction: row;
5  align-items: center;
6  gap: 2.5rem;  /* 40px gap from Figma */
7}
8
9/* Course Grid: Auto Layout wrap, gap 24px */
10.course-grid {
11  display: grid;
12  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
13  gap: 1.5rem;  /* 24px from Figma */
14}

Dev Mode is Figma's dedicated developer view. It disables editing, highlights elements for inspection, and shows a developer-optimized properties panel. Access it via Ctrl/Cmd+Shift+D or the Dev Mode toggle in the top bar.

What the Inspect panel shows for a selected element:

For any layer:

• Width and height (in pixels, convertible to rem)
• Position (x, y from parent frame)
• Fill color (hex, HSL, gradient)
• Border (stroke color, width, style)
• Corner radius (uniform or individual corners)
• Opacity
• Effects (drop shadow, inner shadow, blur)

For text layers:

• Font family and fallback stack
• Font size (convert to rem: divide by 16)
• Font weight (numeric value: 400, 600, 700)
• Line height (in pixels or percentage → convert to unitless ratio)
• Letter spacing (in pixels or percentage → convert to em)
• Color

For Auto Layout frames:

• Direction (horizontal → flex-direction: row, vertical → flex-direction: column)
• Padding (top, right, bottom, left → CSS padding shorthand)
• Gap → CSS gap
• Alignment (start, center, end, space-between)
• Wrap mode (no wrap, wrap → CSS flex-wrap)

Copy CSS button:

Each section in the Inspect panel has a 'Copy CSS' button. Clicking it copies a CSS block with all the properties. Review the output before using it — Figma may generate:

• position: absolute for elements that should be in normal flow
• Fixed pixel values for font-size (convert to rem)
• Vendor-prefixed properties that are now standard
• font-family: 'Inter' without a fallback stack (add system-ui, sans-serif)

1/* Figma-generated CSS (from Copy CSS button) */
2font-family: 'Inter';
3font-size: 16px;
4font-weight: 600;
5line-height: 24px;       /* absolute value — convert to unitless */
6letter-spacing: 0.01em;
7color: #111827;
8
9/* Developer-corrected CSS */
10font-family: 'Inter', system-ui, -apple-system, sans-serif;  /* + fallback */
11font-size: 1rem;          /* 16px / 16px base = 1rem */
12font-weight: 600;
13line-height: 1.5;         /* 24px / 16px = 1.5 (unitless preferred) */
14letter-spacing: 0.01em;
15color: #111827;