Figma
This list contains all the tricks I've learned while discovering Figma.
Last updated
Was this helpful?
This list contains all the tricks I've learned while discovering Figma.
Last updated
Was this helpful?
Device dimensions and templates
Figma nests layers automatically in frames. If you want to have your layer not in but on top of your frame, select the layer, hold spacebar and start dragging. This preserves your layer order.
If you resize a frame, layers with constraints change accordingly. If you don't want any layers with constraints to change, hold 🅲🅼🅳 while resizing the frame.
Use 🅵🅽 + ⬆️ and 🅵🅽 + ⬇️ to navigate between pages
Work in multiple tabs? Switch between them using 🅲🅼🅳 + [A number]. For example: if you have 2 tabs, 🅲🅼🅳 + 1️⃣ will open the first tab. 🅲🅼🅳 + 2️⃣ will open the second.
Copy paste SVG code directly from your browser to Figma. Right click the SVG you want and select Inspect. Right click the highlighted code in the inspector and click on Copy -> Copy OuterHTML. Paste in Figma.
Align layers to top, bottom, left or right by pressing 🅲🅾🅽🆃🅾🅻 + 🅲🅼🅳 + ⬅️/⬆️/➡️/⬇️
When editting a gradient start and end position, use your arrow keys (⬅️⬆️➡️⬇️) to move them by 1px. Or hold shift to nudge them by your default nudge amount
While having a layer selected, press 🅲🅼🅳 + 🆂🅷🅸🅵🆃 + 🅲 to copy and 🅲🅼🅳 + 🆂🅷🅸🅵🆃 + 🆅 to paste the styles.
Select the row in the design sidebar you want to copy and press 🅲🅼🅳 + 🅲 to copy and paste it on a different layer with 🅲🅼🅳 + 🆅.
Copy any image you've found on the web. Select the layer and press 🅲🅼🅳 + 🆅.
Press 🅲🅼🅳 + 🆂🅷🅸🅵🆃 + 🅺, select the images you want and click on the shapes you want to fill.
In the desktop app, you can directly copy frames as PNG's and paste them in, for example, Slack. Right mouse click -> Copy / Paste -> Copy as PNG.
Use the directly copy as PNG method described above. Select the layer in the component with the image and hit 🅲🅼🅳+🆅.
You can change the default nudge amount under Preferences -> Nudge amount. Set it to 8px to help with the 8px grid.
Instead of double clicking, hold 🅲🅼🅳 while clicking to select nested layers
While having a child layer selected, press 🆂🅷🅸🅵🆃 + Enter ⏎ to select the parent layer.
You can change the background color of the canvas on the top right if you have no layers selected.
Press 🅲🅼🅳 + 🆁 to start renaming your selected layer. Press 🆃🅰🅱 or 🆂🅷🅸🅵🆃 + 🆃🅰🅱 to go the the next or previous layer in your layer list.
Press 🅲🅼🅳 + 🆁, remove the text and hit Enter ⏎ to rename the layer to the value that is used in the text layer.
Select all the layers you want to rename and press 🅲🅼🅳 + 🆁
While a text layer is selected, instead of double clicking, hit Enter ⏎ to immedietly start editting.
While your're editting a text layer, you can click inside a different text layer and immedietly continue to edit
Use 🅲🅼🅳 + ․ to hide or show all the panels. This is ideal when presenting work.
Press 🅲🅼🅳 + 🆈 to toggle between outlines to help with components and constraints.
Hold 🆂🅷🅸🅵🆃 to (de)select multiple constrains
In Figma, masks are placed at the bottom, not at the top. It's the reverse from Photoshop, Illustrator and Sketch. Masks also don't show background colors. They only function as putting layers in a group and mask them.
While having the hex field selected, hold 🆂🅷🅸🅵🆃 + ⬆️ or ⬇️ to shift through the different values.
Hold 🆉 and drag an area to zoom in to. Hold 🆉 + ⌥ to zoom out.
While having a layer selected, press 🆂🅷🅸🅵🆃 + 🅷 for a horizontal and 🆂🅷🅸🅵🆃 + 🆅 for a vertical flip.
Photoshop and Illustrator lovers: press 🆂🅷🅸🅵🆃 + 🆇 to swap fill and stroke.
While having a layer selected, Press 🅸 to summon a color picker and click anywhere to use that color on the selected layer.
Copy the layer you want to paste. Selected a different layer and press 🆂🅷🅸🅵🆃 + 🅲🅼🅳 + 🆅 to paste the copied layer directly on top of the selected layer.
Press ⌥ + 2️⃣ to summon the Assets panel. Search any symbol. Hold ⌥ + 🅲🅼🅳 and drag the symbol to the symbol you want to replace.
If you have similar layers but they are deeply nested in different frames, instead of 🅲🅼🅳 + click on each seperate element, use 🅲🅼🅳 + click + drag at the same time to grop select similar layers
This only works in the desktop app. Get it here: