Figma

This list contains all the tricks I've learned while discovering Figma.

Devices templates

Device dimensions and templates

https://www.notion.so/What-s-That-Size-ffcb03538efc4d05bec4363cde43a0bd

Vector macOS cursors

https://www.figma.com/community/file/818875432415822346

Prevent nesting in frames

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.

Resize frames while ignoring constraints

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.

Navigate between pages

Use 🅵🅽 + ⬆️ and 🅵🅽 + ⬇️ to navigate between pages

Navigate between tabs

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 svg's in to Figma

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

Align layers to top, bottom, left or right by pressing 🅲🅾🅽🆃🅾🅻 + 🅲🅼🅳 + ⬅️/⬆️/➡️/⬇️

Nudge gradients with precision

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

Copy/Paste layer and text styles

While having a layer selected, press 🅲🅼🅳 + 🆂🅷🅸🅵🆃 + 🅲 to copy and 🅲🅼🅳 + 🆂🅷🅸🅵🆃 + 🆅 to paste the styles.

Copy individual layer properties

Select the row in the design sidebar you want to copy and press 🅲🅼🅳 + 🅲 to copy and paste it on a different layer with 🅲🅼🅳 + 🆅.

Paste images in shapes from your clipboard

Copy any image you've found on the web. Select the layer and press 🅲🅼🅳 + 🆅.

Inserting multiple images into any shapes

Press 🅲🅼🅳 + 🆂🅷🅸🅵🆃 + 🅺, select the images you want and click on the shapes you want to fill.

Directly copy frames as PNG

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.

This only works in the desktop app. Get it here: https://www.figma.com/downloads/

Insert an image that is already in Figma, in a shape

Use the directly copy as PNG method described above. Select the layer in the component with the image and hit 🅲🅼🅳+🆅.

Change nudge amount

You can change the default nudge amount under Preferences -> Nudge amount. Set it to 8px to help with the 8px grid.

Quickly selected nested layers

Instead of double clicking, hold 🅲🅼🅳 while clicking to select nested layers

Go to the parent layer

While having a child layer selected, press 🆂🅷🅸🅵🆃 + Enter ⏎ to select the parent layer.

Almost dark mode

You can change the background color of the canvas on the top right if you have no layers selected.

Rename layers

Press 🅲🅼🅳 + 🆁 to start renaming your selected layer. Press 🆃🅰🅱 or 🆂🅷🅸🅵🆃 + 🆃🅰🅱 to go the the next or previous layer in your layer list.

Rename text layers to text value

Press 🅲🅼🅳 + 🆁, remove the text and hit Enter ⏎ to rename the layer to the value that is used in the text layer.

Bulk rename layers

Select all the layers you want to rename and press 🅲🅼🅳 + 🆁

Quickly edit text layer

While a text layer is selected, instead of double clicking, hit Enter ⏎ to immedietly start editting.

Edit multple text layers

While your're editting a text layer, you can click inside a different text layer and immedietly continue to edit

Remove all panels

Use 🅲🅼🅳 + ․ to hide or show all the panels. This is ideal when presenting work.

Toggle between outlines

Press 🅲🅼🅳 + 🆈 to toggle between outlines to help with components and constraints.

Select multiple constraints

Hold 🆂🅷🅸🅵🆃 to (de)select multiple constrains

Masks

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.

Shift through HEX values

While having the hex field selected, hold 🆂🅷🅸🅵🆃 + ⬆️ or ⬇️ to shift through the different values.

Zoom to specifc area

Hold 🆉 and drag an area to zoom in to. Hold 🆉 + ⌥ to zoom out.

Flip layers

While having a layer selected, press 🆂🅷🅸🅵🆃 + 🅷 for a horizontal and 🆂🅷🅸🅵🆃 + 🆅 for a vertical flip.

Swap fill and stroke

Photoshop and Illustrator lovers: press 🆂🅷🅸🅵🆃 + 🆇 to swap fill and stroke.

Quickly change colors via the color picker

While having a layer selected, Press 🅸 to summon a color picker and click anywhere to use that color on the selected layer.

Paste a layer directly on top a 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.

Swap symbols the better way.

Press ⌥ + 2️⃣ to summon the Assets panel. Search any symbol. Hold ⌥ + 🅲🅼🅳 and drag the symbol to the symbol you want to replace.

Select similar layers

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