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.