Figma Keyboard Shortcuts
Figma's shortcuts lean heavily on single letters for tool switching, much like Photoshop, since both come from a tradition of keeping the dominant hand free on a mouse or trackpad while the other hand selects tools. What sets Figma apart is how much of its shortcut set is about layout and alignment rather than freehand drawing — auto layout, component instances, and constraint-based resizing are first-class citizens with their own dedicated keys, reflecting that most Figma work is structured interface design rather than illustration. Because Figma runs in the browser as well as as a desktop app, a handful of shortcuts are reserved by the browser itself and need adjusting or avoiding depending on which version you're using.
Tools
| Action | Windows | Mac | Description |
|---|---|---|---|
| Switch to Frame tool | F | F | Activates the Frame tool for creating artboards, with preset device-size frames selectable from the right panel once active. |
| Switch to Rectangle tool | R | R | Activates the rectangle shape tool; holding Shift while drawing constrains it to a perfect square. |
| Switch to Text tool | T | T | Activates the text tool; clicking once creates an auto-width text box, while clicking and dragging creates a fixed-width box that wraps text. |
| Switch to Scale tool | K | K | Activates a tool that resizes a selection and everything within it proportionally, including stroke weights and text sizes, unlike a normal resize which can distort strokes. |
| Switch to Comment tool | C | C | Activates pin-style commenting, letting you click anywhere on the canvas to leave feedback attached to that exact spot for collaborators to see and reply to. |
Layout Alignment
| Action | Windows | Mac | Description |
|---|---|---|---|
| Add Auto Layout to selection | Shift+A | Shift+A | Wraps the selected elements in an Auto Layout frame, which manages spacing and alignment automatically as content is added, removed, or resized — Figma's equivalent of flexbox. |
| Align selection left | Alt+A | Option+A | Snaps every selected object flush with whichever one currently sits furthest left, or against the parent frame's left edge if only a single object is selected — a fast cleanup move after freehand-positioning several elements roughly into place. |
| Tidy up selection (auto-arrange) | Shift+Alt+T (varies by version) or Tidy Up command | Shift+Option+T | Automatically arranges loosely scattered objects into an evenly spaced grid, useful for quickly cleaning up exported icon sets or unorganized component variants. |
| Resize frame to fit content | Shift+Ctrl+Alt+R (varies; commonly right-click menu) | Shift+Cmd+Option+R | Shrinks or grows a frame's boundary to exactly match the bounding box of its contents, removing excess empty space around elements. |
| Union selected shapes | Ctrl+Alt+U | Cmd+Option+U | Combines multiple overlapping vector shapes into a single merged shape, Figma's equivalent of a Pathfinder union operation, commonly used for building custom icons from simpler overlapping primitives. |
| Group selection | Ctrl+G | Cmd+G | Wraps the current selection in a lightweight container so it drags, scales, and repositions as a single unit, while every original layer underneath stays independently selectable and editable whenever you double-click back into the group. |
Components
| Action | Windows | Mac | Description |
|---|---|---|---|
| Create component from selection | Ctrl+Alt+K | Cmd+Option+K | Converts the selected layer(s) into a reusable master component, marked with a diamond icon, that can be instanced repeatedly elsewhere while staying linked to the original for synchronized updates. |
| Detach instance from component | Ctrl+Alt+B | Cmd+Option+B | Breaks the link between a component instance and its master, converting it into an independent set of layers that no longer updates when the master component changes — irreversible without undo. |
| Open Swap Instance menu | Click instance + use right panel swap icon (no universal key) | Click instance + swap icon | Lets you replace a component instance with a different component from the same library while preserving any overrides where the layer structure matches, faster than deleting and re-inserting manually. |
Frequently Asked Questions
Why doesn't the K shortcut scale text and strokes proportionally when I just drag a corner handle?
A plain corner-handle drag resizes width and height but generally leaves stroke weights and some text settings unchanged unless the object has constraints configured to scale. The dedicated Scale tool (K) is specifically built to resize everything proportionally — strokes, text, effects, nested content — which a basic resize handle drag does not guarantee depending on each layer's individual resizing behavior.
Why did detaching an instance break my design system updates?
Detaching (Ctrl+Alt+B / Cmd+Option+B) permanently severs the connection between that instance and its master component, so any future edits to the master component will no longer propagate to the detached copy. This is intentional for one-off customizations that shouldn't sync, but it's easy to detach by habit and later forget that specific instance is now orphaned from the design system.
Why does Shift+A sometimes produce unexpected spacing when I add Auto Layout?
Auto Layout inherits default spacing and padding values when first applied, which often don't match what you'd manually set — you'll typically need to adjust the spacing, padding, and alignment settings in the right panel immediately after applying Shift+A rather than expecting it to guess your intended layout from the elements' prior loose positioning.
Some of these shortcuts don't work in my browser version of Figma — why?
Browsers reserve certain key combinations for their own functions (like Ctrl+T for a new browser tab), which can override Figma's intended in-app shortcut of the same combination when running in browser rather than the desktop app. That's specific to which chrome (the browser kind, not the app) is currently intercepting the keystroke, so the same shortcut can misbehave in one browser and work fine in another — switching to the desktop client sidesteps the issue entirely.
Is there a shortcut for creating a component from a selected group of layers?
Ctrl+Alt+K (Cmd+Option+K on Mac) converts the current selection into a reusable component in one step, which is worth reaching for as soon as you know an element — a button, a card, an icon — will need to repeat consistently across a file, since retrofitting scattered duplicate layers into a shared component afterward is considerably more tedious than starting with one from the outset.
Can I resize multiple selected layers proportionally at the same time?
Selecting several layers and dragging any single corner handle scales all of them together relative to the group's combined bounding box, and holding Shift while dragging locks that scaling to a proportional ratio so nothing gets stretched out of aspect — useful for scaling an icon set or a group of cards uniformly without opening each layer's dimensions individually and doing the math by hand. Without Shift, width and height scale independently based on wherever you drag, which can distort the original proportions of individual elements within the selection without an obvious visual warning, so it's worth a quick check of the result immediately after a non-proportional multi-layer resize on a busy canvas.
What's the practical difference between grouping layers and putting them in a Frame?
A Group is a lightweight container mainly useful for moving and transforming several layers together, while a Frame carries additional properties Groups lack entirely — clipping content to its bounds, Auto Layout, constraints for responsive resizing, and the ability to be exported as its own artboard — making Frames the better choice for anything resembling an actual screen or component container rather than a simple loose collection of shapes.