Figma is the collaborative interface designtool, like the Google Docs of the designtools. With Figma you can design, prototype, review and collaborate on your screen designs right from your browser or the desktop application. View or download Figma via Figma.com.
Essentials | |
---|---|
Show / Hide UI | β \ |
Pick color | β C |
Quick actions | β / or β P |
Tools | |
Move tool | V |
Frame tool | F |
Pen tool | P |
Pencil tool | β§ P |
Text tool | T |
Rectangle tool | R |
Ellipse tool | O |
Line tool | L |
Arrow tool | β§ L |
Add comment | C |
Pick color | β C |
Slice cool | S |
View | |
Show / Hide UI | β \ |
Multiplayer cursors | β₯ β \ |
Rulers | β§ R |
Outlines | β§ O |
Pixel preview | β P or β β§ P |
Layout grids | β G or β§ G |
Pixel grid | β ` or β§ ` |
Open layers panel | β₯ 1 |
Open assets panel | β₯ 2 |
Open design panel | β₯ 8 |
Open prototype panel | β₯ 9 |
Open inspect panel | β₯ 0 |
Zoom | |
Pan | Space drag |
Zoom in | + |
Zoom out | - |
Zoom to 100% | β§ 0 |
Zoom to fit | β§ 1 |
Zoom to selection | β§ 2 |
Zoom to previous frame | β§ N |
Zoom to next frame | N |
Previous page | Page up |
Next page | Page down |
Find previous frame | Home |
Find next frame | End |
Text | |
Bold | β B |
Italic | β I |
Underline | β U |
Create link | β K |
Strikethrough | β§ β X |
Turn into a list | β§ β 7 |
Text align left | β₯ β L |
Text align center | β₯ β T |
Text align right | β₯ β R |
Text align justified | β₯ β J |
Adjust font size | β§ β < and β§ β > |
Adjust font weight | β₯ β < and β₯ β > |
Adjust letter spacing | β₯ < and β₯ > |
Adjust line height | β§ β₯ < and β§ β₯ > |
Shape | |
Pen | P |
Pencil | β§ P |
Paint bucket | B |
Bend tool | β |
Remove fill | β₯ / |
Remove stroke | / |
Swap fill and stroke | β§ X |
Outline stroke | β§ β O |
Flatten selection | β E |
Join selection | β J |
Smooth join selection | β§ β J |
Delete and heal selection | β§ Delete |
Selection | |
Select all | β A |
Select inverse | β§ β A |
Select none | Esc |
Deep select | β Click |
Select layer menu | β right-click |
Select children | β© |
Select parent | β§ β© |
Select next sibling | Tab |
Select previous sibling | β§ Tab |
Group selections | β G |
Ungroup selection | β§ β G |
Frame selection | β₯ β G |
Show / Hide selection | β§ β H |
Lock / Unlock selection | β§ β L |
Cursor | |
Measure to selection (while pointing) | β₯ |
Duplicate selection (while moving) | β₯ |
Deep select | β Click |
Select layer menu | β Right-click |
Deep select within rectangle | β Drag |
Resize from center (while dragging) | β₯ |
Resize proportionally (while dragging) | β§ |
Move while resizing (while dragging) | Space |
Ignore constraints (frames only, while dragging) | β |
Edit | |
Copy | β C |
Cut | β X |
Paste | β V |
Paste over selection | β§ β V |
Duplicate | β D |
Rename selection | β R |
Export | β§ β E |
Copy properties | β₯ β C |
Paste properties | β₯ β V |
Copy as PNG | β§ β C |
Copy Page Link to Clipboard | β L |
Transform | |
Flip horizontal | β§ H |
Flip vertical | β§ V |
Use a mask | β β M |
Edit shape or image | β© |
Place image | β§ β K |
Crop image | β₯ Double-click |
Set opacity to 10 | 1 |
Set opacity to 50 | 5 |
Set opacity to 100 | 0 |
Arrange | |
Bring forward | β ] |
Send backward | β [ |
Bring to front | β₯ β [ |
Send to back | β₯ β ] |
Align left | β₯ A |
Align right | β₯ D |
Align top | β₯ W |
Align bottom | β₯ S |
Align centers | β₯ H and β₯ V |
Distribute spacing | β β₯ H and β β₯ V |
Tidy up | β β₯ T |
Add auto layout | β§ A |
Remove auto layout | β₯ β§ A |
Components | |
Show assets | β₯ 2 |
Team library | β₯ β O |
Create component | β₯ β K |
Detach intense | β₯ β B |
Swap component instance | β₯ |
Show components menu | β§ I |
Prototyping | |
Fullscreen | F |
Scale view | Z |
Restart prototype | R |
Comment | C |
Essentials | |
---|---|
Show / Hide UI | CTRL \ |
Pick color | β C |
Quick actions | CTRL / or CTRL P |
Tools | |
Move tool | V |
Frame tool | F |
Pen tool | P |
Pencil tool | β§ P |
Text tool | T |
Rectangle tool | R |
Ellipse tool | O |
Line tool | L |
Arrow tool | β§ L |
Add comment | C |
Pick color | I |
Slice cool | S |
View | |
Show / Hide UI | CTRL \ |
Multiplayer cursors | Alt CTRL \ |
Rulers | β§ R |
Outlines | CTRL O |
Pixel preview | CTRL β§ P |
Layout grids | β§ G |
Pixel grid | β§ ` |
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 | |
Pan | Space drag |
Zoom in | + |
Zoom out | - |
Zoom to 100% | β§ 0 |
Zoom to fit | β§ 1 |
Zoom to selection | β§ 2 |
Zoom to previous frame | β§ N |
Zoom to next frame | N |
Previous page | Page up |
Next page | Page down |
Find previous frame | Home |
Find next frame | End |
Text | |
Bold | CTRL B |
Italic | CTRL I |
Underline | CTRL U |
Create link | CTRL K |
Strikethrough | β§ CTRL X |
Turn into a list | β§ CTRL 7 |
Text align left | Alt CTRL L |
Text align center | Alt CTRL T |
Text align right | Alt CTRL R |
Text align justified | 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 height | β§ 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 all | CTRL A |
Select inverse | β§ CTRL A |
Select none | Esc |
Deep select | CTRL Click |
Select layer menu | CTRL right-click |
Select children | β© |
Select parent | β§ β© |
Select next sibling | Tab |
Select previous sibling | β§ Tab |
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 within 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) | CTRL |
Edit | |
Copy | CTRL C |
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 |
Copy Page Link to Clipboard | CTRL L |
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 | CTRL ] |
Send backward | CTRL [ |
Bring to front | Alt CTRL [ |
Send to back | 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 up | β 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 |
Swap component instance | Alt |
Try searching for something else. Think weβre missing something? Send us an issue or add it yourself.
Add a missing shortcut πͺοΈUse calculations, charts, datepickers, eSignatures, payments, Google Places API, file uploads β Then embed it in your Framer website or other site builder.
Start building for freeFeel free to request missing tools or give some feedback using Twitter, E-mail or GitHub! If you can, please help out by adding the data yourself and be the hero of the Β±12k people per month using this resource.
Add a tool πͺDesigning products that enable others to to create or become more effective Β· Currently Product Designer @ConvertCalculator Β· Prev @WeTransfer, @Awkward & @YipYip.
Buy me a coffee β Twitter π¦