110 Essential Figma Shortcuts for Designers

Discover the basic keyboard shortcuts you need to design with greater agility using the vector graphics editor

Figma is one of the most popular graphics editing apps in design. Two of the features for which it is best known are its versatility and the fact that it is available free of charge.

Here, we break down its essentail features and share some of the most important shortcuts to help you become an efficient Figma user.

What is Figma, exactly?

Figma is a cloud-based vector graphics editor and prototype tool set up for collaborative and remote interface design. The UI software has all the resources you need for every step of a design project—even generating code you can export.

It's used to carry out all kinds of design projects including:

- Websites
- Mobile app interfaces
- Prototypes
- Social media posts
- UX Designs

Accessible via a web browser or app with both free and premium plans, Figma is a versatile program that can be used to design websites, apps, and many more digital products. Plus, it's also got plenty of additional features, from organizational and ideation tools to free plug-ins, that have made it a popular option. It also allows you to create and store three active projects at once, which is a big draw for many creatives.

Whatever your knowledge of Figma, these keyboard shortcuts will be useful for making your design process more efficient.

Note: - You need to use Ctrl in Windows and replace it with Command if you’re on a Mac.
- You need to use Alt in Windows and replace it with Option if you’re on a Mac.

Basic shortcuts

- Show / Hide user interface → CTRL \
- Choose color → ⌃ C
- Quick actions → CTRL / or CTRL P

Tools

- Move tool → V
- Pen → P
- Pencil → ⇧P
- Text → T
- Rectangle tool → R
- Ellipse tool → O
- Line tool → L
- Arrow tool → ⇧ L
- Add comment → C
- Choose color → i or ⌃ C
- Slice tool → S

View

- Show / Hide user interface → CTRL \
- Multiplayer cursors → Alt CTRL \
- Rulers → ⇧ R
- Outlines → CTRL Y
- Pixel preview → ⌃ P
- Layout grids → ⌃ G
- Pixel grid → CTRL `
- Open layers panel → Alt 1
- Open assets panel → Alt 2
- Open design panel → Alt 8
- Open prototype panel → Alt 9
- Open inspect panel → Alt 0

Zoom

- Zoom in → +
- Zoom out → -
- Zoom to 100% → ⇧ 0
- Zoom to fit → ⇧ 1
- Zoom to selection → ⇧ 2
- Zoom to previous frame → ⇧ N

Text

- Bold → CTRL B
- Italicize → CTRL I
- Underline → CTRL U
- Create Link → CTRL K
- Strikethrough → ⇧ CTRL X
- Turn into a list → ⇧ CTRL 7
- Align text left → Alt CTRL L
- Center text → Alt CTRL T
- Align text right →Alt CTRL R
- Justify text → Alt CTRL J
- Adjust font size → ⇧ CTRL < and ⇧ CTRL >
- Adjust font weight → Alt CTRL < and Alt CTRL >
- Adjust letter spacing → Alt < and Alt >
- Adjust line spacing → ⇧ Alt < and ⇧ Alt >

Shape

- Pen → P
- Pencil → ⇧ P
- Paint bucket → B
- Bend tool → CTRL
- Remove fill → Alt /
- Remove stroke → /
- Swap fill and stroke → ⇧ X
- Outline stroke → ⇧ CTRL O
- Flatten selection → CTRL E
- Join selection → CTRL J
- Smooth join selection → ⇧ CTRL J
- Delete and heal selection → ⇧ Delete

Selection

- Select alll → CTRL A
- Select inverse → ⇧ CTRL A
- Select none → Esc
- Deep select → CTRL Click
- Select layer menu → Right click CTRL
- Group selections → CTRL G
- Ungroup selection → ⇧ CTRL G
- Frame selection → Alt CTRL G
- Show / Hide selection → ⇧ CTRL H
- Lock / Unlock selection → ⇧ CTRL L

Cursor

- Measure to selection (while pointing) → Alt
- Duplicate selection (while moving) → Alt
- Deep select → CTRL Click
- Select layer menu → CTRL Right click
- Deep select inside rectangle → CTRL Drag
- Resize from center (while dragging) → Alt
- Resize proportionally (while dragging) → ⇧
- Move while resizing (while dragging) → Space
- Ignore constraints (frames only, while dragging) → v CTRL

Edit

- Cut → CTRL X
- Paste → CTRL V
- Paste over selection → ⇧ CTRL V
- Duplicate → CTRL D
- Rename selection → CTRL R
- Export → ⇧ CTRL E
- Copy properties → Alt CTRL C
- Paste properties → Alt CTRL V
- Copy as PNG → ⇧ CTRL C

Transform

- Flip horizontal → ⇧ H
- Flip vertical → ⇧ V
- Use a mask → ⌃ CTRL M
- Edit shape or image → ↩
- Place image → ⇧ CTRL K
- Crop image → Alt Double Click
- Set opacity to 10 → 1
- Set opacity to 50 → 5
- Set opacity to 100 → 0

Arrange

- Bring forward → CONTROL ]
- Send back → CONTROL [
- Bring to front → Alt CTRL [
- Send to the background → Alt CTRL ]
- Align left → Alt A
- Align right → Alt D
- Align top → Alt W
- Align bottom → Alt S
- Align centers → Alt H and Alt V
Distribute spacing → ⌃ Alt H and ⌃ Alt V
- Tidy → ⌃ Alt T
- Add auto layout → ⇧ A
- Remove auto layout → Alt ⇧ A

Components

- Show assets → Alt 2
- Team library → Alt CTRL O
- Create component → Alt CTRL K
- Detach intense → Alt CTRL B
- Show components menu → Alt I

Now you've got the shortcuts, if you want to learn other ways to make the most out of Figma, check out product designer Filippos Protogeridis's online course,App Design: Prototyping for Beginners .

English version by @studiogaunt.

You may like:

- 5 Websites For Downloading Free UI Design Icons
- What Is UX Research and What Is Its Relevance In Web Design?
- Dos and Don’ts of UX Design