Figma Shortcut Practice

How to use
STARTSTOP
*Toggle input mode: ctrl + shift + alt + space
PRE
NEXT
Exclude this question from the list
Restore excluded questions
Get a URL for the current exclusions
https://command-lab.com
Copy
Guide mode
Repeat mode

*Recommended browser: Google Chrome

PUSH ENTER
If you enjoy this site, please share it — it keeps us motivated to keep improving!

Figma Keyboard Shortcuts: Full List (59 shortcuts)

Every Figma keyboard shortcut used in the practice above, listed in full. Each row shows the Windows and Mac keys plus a short explanation of what the shortcut does. Find one you want to learn, then drill it above until your fingers remember it.

Layer operations

Figma — Layer operations
Action Windows Mac What it does
Select the parent layer Ctrl+Shift+Enter +Enter Reselects the layer or frame one level up (the parent) from whatever is currently selected. Useful in deeply nested structures when you want to jump quickly from a child element up to its parent group or frame.
Select the child layer Enter Enter Selects the layer one level down (the child) inside the currently selected group or frame. Lets you drill into the contents with just the keyboard, without double-clicking to enter the group.
Select the next layer Tab Tab Moves the selection to the next element at the same level. Handy for stepping through neighboring elements in order using only the keyboard, without checking the layers panel.
Select the previous layer Shift+Tab +Tab Moves the selection to the previous element at the same level. Useful when you've skipped past the layer you wanted, or want to step back through elements in reverse order.
Swap the selected layer with the next layer Ctrl+] +] Swaps the selected layer with the layer directly behind it in stacking order. Lets you nudge the z-order one step at a time from the keyboard, which is easier than fine-grained reordering with the mouse.
Swap the selected layer with the previous layer Ctrl+[ +[ Swaps the selected layer with the layer directly in front of it in stacking order. Useful for fine-tuning stacking order, such as bringing just one part of a design slightly forward.
Send the selected layer to the back ] ] Moves the selected layer to the very back of the stacking order. Use it to place a background element or anything you want hidden behind other elements.
Bring the selected layer to the front [ [ Moves the selected layer to the very front of the stacking order. Use it when an element has been covered by others and you need to bring it back into view.
Toggle show/hide for the selected layer Ctrl+Shift+H ++H Toggles the visibility of the selected layer. Useful for temporarily hiding a layer while you work without deleting it, or for comparing how the design looks with and without it.
Toggle lock/unlock for the selected layer Ctrl+Shift+L ++L Toggles the lock state of the selected layer. Locking a layer protects it from being accidentally moved or edited while you work on the elements around it.
Select all layers at the same level Ctrl+A +A Selects every layer at the current level at once. Useful when you want to move, align, or restyle all the elements within the same frame or parent in one go.
Invert the selection Ctrl+Shift+A ++A Inverts the current selection, selecting whatever was unselected and deselecting whatever was selected. Efficient when you want to exclude just a few elements from a large selection — select those first, then invert.
Deselect Esc Esc Clears the current selection. Useful for avoiding accidental edits to a selected element, or for starting a new operation with a clean slate.
Group the selected layers Ctrl+G +G Combines the selected layers into a single group. Grouping related elements makes it easier to move, duplicate, or hide them together, and keeps the layers panel tidy.
Ungroup the selected layers Ctrl+Shift+G ++G Breaks apart the selected group, returning its contents to individual layers. Use it when you need to edit just one element inside a group on its own.
Turn the selected layer into a frame Ctrl+Alt+G ++© Converts the selected layer into a frame. Turning a plain shape or group into a frame unlocks frame-specific features such as clipping, Auto Layout, and responsive padding.
Turn the selected layer into Auto Layout Shift+A +A Applies Auto Layout to the selected layer. Use it when you want spacing and positioning to adjust automatically as elements are added or removed, such as when building buttons or lists that need to stay aligned.
Remove Auto Layout from the selected layer Alt+Shift+A ++Å Removes Auto Layout from the selected layer. Use it when you want to go back to freely positioning elements individually instead of relying on automatic layout.

Tool switching

Figma — Tool switching
Action Windows Mac What it does
Switch to the move tool v v Switches to the move tool (V) for selecting and moving objects. Useful for quickly returning to normal selection mode after using a drawing tool for shapes or text.
Switch to the frame tool f f Switches to the frame tool (F) for creating new frames. Use it when you're setting up the basic units of a screen or artboard to start building a layout.
Switch to the pen tool p p Switches to the pen tool (P) for drawing vector paths by connecting anchor points. Use it to create freeform icons or illustrations made of straight lines and curves.
Switch to the pencil tool Shift+P +P Switches to the pencil tool (Shift+P) for drawing freehand vector paths. Use it for a hand-drawn look, or when you want to sketch a shape roughly without worrying about precise anchor placement.
Switch to the text tool t t Switches to the text tool (T) for entering new text. Use it to add headings, body copy, or any other text elements to the canvas.
Switch to the rectangle tool r r Switches to the rectangle tool (R) for drawing rectangles. Use it to create rectangular elements such as buttons, cards, or background blocks.
Switch to the ellipse tool o o Switches to the ellipse tool (O) for drawing circles and ovals. Use it to create circular elements such as icon backgrounds or round avatar frames.
Switch to the line tool l l Switches to the line tool (L) for drawing straight lines. Use it to add dividers, rules, or the base of an arrow to the canvas.
Switch to the arrow tool Shift+L +L Switches to the arrow tool (Shift+L) for drawing arrows. Use it to show connections between elements in flowcharts or diagrams.
Add a comment c c Switches to the comment tool (C) for adding a comment anywhere on the canvas. Use it to leave feedback or requested changes for teammates on the design.
Pick a color i i Switches to the eyedropper (color picker) tool (I) for sampling colors from the screen. Use it when you need a new element to match an existing color exactly.
Slice tool s s Switches to the slice tool (S) for marking off a region of the screen to export. Use it when you only want to export a specific part of the design as an image.

View

Figma — View
Action Windows Mac What it does
Toggle the UI display Ctrl+\ +\ Hides or shows the surrounding UI, such as the layers and properties panels. Use it to view your design full-screen when checking fine details.
Toggle rulers Shift+R +R Toggles the display of the rulers along the top and left of the canvas. Use it when you want to position elements while watching exact coordinates and sizes.
Toggle outlines Shift+O +O Switches to outline mode, which shows only the boundary lines of every layer. Use it to check a design's layer structure and stacking while ignoring fills and images.

Zoom

Figma — Zoom
Action Windows Mac What it does
Zoom to 100% Ctrl+0 +0 Resets the canvas zoom level to 100%. Useful for instantly returning to actual size after zooming in and out has left you unsure of the current scale.

Text/Paragraph

Figma — Text/Paragraph
Action Windows Mac What it does
Bold Ctrl+B +B Makes the selected text bold. Use it to make headings or key phrases stand out.
Italic Ctrl+I +I Makes the selected text italic. Use it for quotations or text meant to carry a supplementary nuance.
Underline Ctrl+U +U Underlines the selected text. Use it to visually mark links or text you want to emphasize.
Create a link Ctrl+K +K Adds a hyperlink to the selected text. Use it when you want a prototype or design comp to link out to an external URL.
Strikethrough Ctrl+Shift+X ++X Adds a strikethrough to the selected text. Use it to show that content has been removed or changed while still keeping the original visible.
Convert to a list Ctrl+Shift+7 8 ++7 8 Converts the selected text into a bulleted or numbered list. Use it to organize steps or items so they're easier to scan.
Align left Ctrl+Alt+L ++¬ Left-aligns the selected text. Use it to line up the start of paragraphs or text blocks along the left edge.
Align center Ctrl+Alt+T ++ Center-aligns the selected text. Use it to position headings or taglines in the middle of a block.
Align right Ctrl+Alt+R ++® Right-aligns the selected text. Use it for text such as numbers or dates that should line up along the right edge.
Justify Ctrl+Alt+J ++ Justifies the selected text, evening out both edges of each line. Use it to give a paragraph clean, uniform line widths for a tidy look.
Increase font size Ctrl+Shift+> ++> Increases the font size of the selected text by one step. Use it to quickly adjust text size without opening the size field.
Decrease font size Ctrl+Shift+< ++< Decreases the font size of the selected text by one step. Use it to quickly adjust text size without opening the size field.
Increase font weight Ctrl+Alt+> ++> Increases the font weight of the selected text by one step. Use it for finer weight adjustments than a plain Bold toggle, such as stepping from Regular to Medium.
Decrease font weight Ctrl+Alt+< ++< Decreases the font weight of the selected text by one step. Use it when you want to soften text that feels too bold, adjusting weight in fine increments.
Increase letter spacing Alt+> +> Increases the letter spacing (tracking) of the selected text. Use it to give a heading a more open feel or to fine-tune readability.
Decrease letter spacing Alt+< +< Decreases the letter spacing (tracking) of the selected text. Use it to tighten text or fit a long heading into a smaller space.
Increase line height Alt+Shift+> ++> Increases the line height (leading) of the selected text. Use it to make a paragraph easier to read or to give a layout more breathing room.
Decrease line height Alt+Shift+< ++< Decreases the line height (leading) of the selected text. Use it to make text more compact or fit a denser layout.

Fill and stroke

Figma — Fill and stroke
Action Windows Mac What it does
Remove fill Alt+/ +÷ Removes the fill from the selected layer. Use it when you want to keep only a shape's outline, or make its background transparent.
Remove stroke Shift+? +? Removes the stroke from the selected layer. Use it to strip away the outline and leave a simple, fill-only shape.
Swap fill and stroke colors Shift+X +X Swaps the fill color and stroke color of the selected layer. Use it to quickly try a different color combination or create an inverted variant.

Editing

Figma — Editing
Action Windows Mac What it does
Duplicate Ctrl+D +D Duplicates the selected layer. Use it to mass-produce similar elements with slightly different positions or content, or to create variations of a component.
Search Ctrl+F +F Opens a panel for searching layer names and text content. Use it to quickly locate a specific layer or piece of text in a file with many elements.
Flip horizontal Shift+H +H Flips the selected layer horizontally. Use it to change the direction an icon faces, or to quickly create a symmetrical design.
Flip vertical Shift+V +V Flips the selected layer vertically. Use it to mirror an element, or to quickly create a symmetrical layout.
Back to top