Inspect and export a Design

Open Inspect and select a Layer to see its type, canvas position, dimensions, rotation, opacity, fill, stroke, corner radius, effects, Auto Layout direction, and Component reference. The CSS block includes the dimensions, background or gradient, border, corner radius, shadows and blur, blend mode, typography, and, for Auto Layout, the matching flexbox or grid declarations. Choose Copy CSS to copy it, or right-click the Layer and choose Copy as CSS. Use Design rather than Inspect to change how a Layer looks.

The Developer handoff section in Inspect stores a status, note, implementation path, and documentation URL on the Layer. These fields are not public Prototype comments.

Export lives in Inspect. Choose SVG, PNG, JPEG, WebP, or PDF and a 1× to 4× scale. A filename suffix can distinguish a state such as -dark. The selection is exported, or the whole Page when nothing is selected. Export choices are saved on the selected Layer. Images are included in every format. Raster and PDF exports draw text with fonts installed on your computer, so a web font chosen from the Font list may fall back until it is installed.

Press ? or choose Keyboard shortcuts in the status bar for the full list. Common commands include V Select, F Frame, R Rectangle, O Ellipse, P Pen, T Text, C Comment, arrow keys to nudge (Shift for 10 px), Cmd/Ctrl+A Select all, Cmd/Ctrl+D Duplicate, Cmd/Ctrl+G Group, Cmd/Ctrl+] Bring forward, Shift+A Auto Layout, Cmd/Ctrl+Z Undo, Shift+1 Fit Page, and Shift+2 Fit Selection. Enter selects the children of the selected Layer and Shift+Enter its parent. Tab moves to the next Layer. Cmd/Ctrl+K opens Quick actions, which searches every command available for the current selection and every Page.

If an exported asset differs from the canvas, Contact support.