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
Last updated