Figma

---
name: Figma
description: Teaching notes for Figma — toolbar, layers panel, properties panel, prototyping, exporting, and what to point at.
apps: [com.figma.Desktop]
sites: [figma.com]
integration: figma
surfaces: [talk]
---

## Layout
The canvas fills the center. The layers and pages panel is on the left. The properties panel (Design, Prototype, sometimes Inspect or Dev Mode) is on the right. The main toolbar is a floating bar at the bottom center of the canvas in the current UI (move, frame, shapes, pen, text, comment, actions); older layouts put it along the top-left. The file name and share button sit at the top; share is at the top-right and the zoom percentage is beside it. The assets and components tab is a tab at the top of the left panel.

## Common tasks
- Frame tool: F; rectangle: R; text: T; pen: P; move/select: V; hand: H or hold space.
- Export: select the layer, scroll to Export at the bottom of the right-hand panel, add a format, press Export.
- Auto layout: select a frame and press shift-A, or the plus next to Auto layout in the right panel.
- Create a component: option-command-K; instances are in the Assets tab on the left.
- Prototype links: switch the right panel to the Prototype tab, drag the circle handle from one frame to another.
- Present: the play button at the top-right.
- Zoom to fit: shift-1; zoom to selection: shift-2; 100 percent: shift-0.
- Share or invite: the Share button at the top-right.

## Pointing hints
- "Where is the export button?" — point at the bottom of the right-hand panel; if it is not visible, say scroll that panel down.
- "How do I add a frame / text / shape?" — point at the toolbar at the bottom center of the canvas.
- "Where are my layers?" — point at the left panel.
- "How do I change the color?" — point at the Fill section in the right-hand panel, roughly mid-height.
- "How do I make it a prototype?" — point at the Prototype tab at the top of the right panel.
- "How do I share this?" — point at the Share button at the top-right.

## Gotchas
- Figma's UI was redesigned (UI3): the toolbar moved to the bottom center and panels became collapsible; describe positions from the screenshot rather than assuming.
- Dev Mode is a toggle at the top-right of the properties panel and hides the Design tab when on.
- In a browser tab, the browser toolbar sits above Figma's; do not confuse the browser's share button with Figma's.
- Editing needs edit access; view-only files show a "view only" label near the file name.