40+ Figma tips that make you faster
By: Ali Çorak
Tags: Prototyping, Figma, User Interface, User Experience, UI

Saving time in the design process triggers staying creative. When we get lost in design, creativity decreases. Therefore I always like shortcuts, tips, and tricks when designing. Especially when I want to become a master, I think it’s time to learn tips and tricks.

I previously published the first article of this series. There you can find a few more simple methods. However, Figma is constantly adding new shortcuts with the incoming updates. So I will try to keep these articles up to date. Now let’s quickly move on to the shortcuts:

Note: Cmd as Ctrl, Option as Alt in Windows

1 — Cmd on Image: You can crop the image by clicking the Cmd button. (*new)

2 — In-Page Linking/Redirecting: You can link to elements within the page, such as anchor links on websites.

3 — Control(^) + C or I Key: Selects the color palette.

4 — Cmd then “number” (Opacity): After selecting an element and clicking the cmd button, you can change the opacity by clicking a button between 1 and 9. (key 1 for 10%, key 9 for 90%). You probably knew this. But in addition to this; If you quickly press 0 twice, the opacity will be 0%. Or, if you press two keys quickly, it takes the value of those keys (for example, 8 and 9provide 89% opacity.)

5 — Control + Option + T: Tidy up. Aligns scattered elements in a specific way.

6 — Organizing Tidy Up: After tidying up the elements in batch selection, the right-left and up-down spaces can be adjusted with the cursor. In addition, it is possible to replace the elements with each other without disturbing the order/ratio.

7 — Drag + Space: If you want to change the location of the selected area, you can use the Space key after selecting an area.

8 — Cmd + “number” (Tabs): You can switch between tabs with the combination of cmd + “number” as in browsers if more than one file/tab is open. Of course, the homepage is also a tab.

9 — Cmd + Dot(.): Closes the right and left panels. So you have a minimal workspace. You can use the same key combination to open the panels.

10 — Cmd + |: This combination also hides only the left panel. You can use the same combination to open it again.

11 — Cmd + G: Group selected elements.

12 — Cmd + Option + G: Frame the selected elements as in grouping. Sometimes it is more advantageous to use frames instead of groups when resizing elements.

13 — Control+ Shift + ?: Shows all keyboard shortcuts. So you can also try simple shortcuts that are not included here.

14 — Shift + Cmd + K: Select photos from files. Thus, the photo can be selected collectively. You can also place photos by clicking frames, rectangles, etc (every element that can take an image) one by one.

15 — Color Selection: Let’s choose an element that we can fill color. With the fill option selected in the element, you can find the light and dark tones of the colors by using the up(light) and down(dark) arrow keys. For this, fill must be selected. Also, if you press the Shift key, you can catch the tonal differences faster.

16 — Text Auto Height & Auto Width: When we want to resize a text box, we do it from the right panel. Especially when we select a copy-paste text, that text is copied with its default style. At this point we can apply a small tip: We can change the text from auto height to auto width by double-clicking on any edge of the text box.

17 — Showing Element: In large files, it can be difficult to find an element on the canvas that we can find in the left panel. Therefore, if you click on the icon that appears next to the element in the left panel, that element will appear on the canvas and be centered.

18 — Cmd+Option + S: Adds version history. Probably most of us don’t. Figma already adds version history automatically. But you can add more detailed (with explanations) version history with this key combination.

19 — Alignment:

You can align elements from the right panel. But making a habit of using keyboard shortcuts will speed you up.

Option + A: Align left.

Option + D: Align right.

Option + V: Align vertical center

Option + H: Align horizontal centers.

Option + W: Align top

Option + S: Align bottom

Option + Control + T: Tidy up

Option + Control + V: Distribute vertical spacing

Option + Control + H: Distribute horizontal spacing

20 — Shift + A: Autolayout elements. Simple information. But I saw that most people use this feature from the right panel, so I wanted to include it in the list.

21 — Drag + Space: We may need to move the nested elements inside the frame. So that they cannot be seen in the frame (clip content issue). But in these cases, the element that we want to move out also goes outside the frame. To prevent this, we can press the space key while dragging the nested element.

Likewise, if you are, dragging an external element onto the frame and do not want to include it in the frame, you must press the space key.

22 — Alt: The alt key is used to find the distance from one element to another. After selecting the element, press the alt key and drag the cursor over the other element. So you can work pixel perfect.

23 — Shift + 2: Select an element. Then you can zoom in on the selected element with the combination of Shift and 2 (Zoom to selection).

24 — Shift + 1: Zoom to fit. Fits all elements on the canvas.

25 — Z+Rectangle Area: Select an area on the canvas by pressing the Z key. With this key combination, you zoom into the selected area. Also, Option + Z + Rectangle Area is a key combination for zoom out to the area.

26 — Cmd + Y: Converts the view of the canvas to outlines. It is effective for seeing elements in frames that we cannot see.

27 — Cmd + Scrub: You can zoom in zoom out on the canvas by moving up and down using the mouse or touchpad (With two fingers on Macs).

28 — Option + Scrub: Scrub inputs. The number, color, etc. in the input can be used as in the example above. You can change the input values by moving your fingers left and right on the mouse and touchpad (With two fingers on Macs).

29 — Border Trick: There are different designs for border samples. For example, the border can be used as a divider with the rectangle tool. But since the rectangle is a separate element, the auto layout can be troublesome.

Here’s a trick for the border: Select the element you want to add a border. Add “inner shadow” from the “effects” section on the right panel. After giving Blur: 0, Spread: 0, X:0 and Y:10 values, 10px border will appear under the element.

You can increase the border thickness by changing the Y value. Finally, you can choose color and opacity and finalize your border design (You can use this effect on other elements by creating a style with the name “border”).

30 — Frame Hierarchy: I mentioned that we can quickly select the element in the frame with the Cmd key. But if there are many nested elements in the frame, it becomes difficult to choose. Therefore, if you right-click with the Cmd key after selecting the frame, you can see the frame hierarchy. Thus, you can choose any of the elements in the frame.

31 — Union Selection Trick: We can have vector components; such as icons. If we swap the icons (swap instance), the color style we applied to the previous icon may not be applied to the new icon.

This is because the icons are not union selection. This problem will be solved if you apply for union selection.

32 — Cmd + E: Flatten selection. You can convert multiple shapes into a single vector. This shortcut is useful when designing icons and illustrations.

33 — Left Panel Tabs: The left panel has two tabs; Layers and Assets. You can use the Option + 1 (Layers), Option + 2(Assets) key combinations to switch between these tabs.

34 — Right Panel Tabs: There are also shortcuts for the right panel. You can switch between tabs with Option + 8(Design), Option + 9 (Prototype), Option + 0 (Inspect) combinations.

35 — N Key: If we press the N key on the canvas, it selects frames sequentially. If you keep pressing the N key, it continues to switch between frames. If you do this with the Shift + N key combination, it moves in the reverse.

36 — Tab: Tab key has many functions. In this example; if you press the tab key while a frame is selected, it navigates through the elements in the frame one by one.

37 — Enter (Return): Enter key is another key that has many functions like the tab key. If you press enter while a frame is selected; it selects the first nested element in the frame (child layer).

If you keep pressing enter, it will continue to move the inner elements. In the same way, you move to the upper layer in the hierarchy with the Shift + Enter key.

38 — Cmd + Resize: When you want to resize a frame, it is resized according to its constraints properties. Frames are top-left aligned by default. But if you don’t want that, try resizing by pressing the Cmd key.

39 — Copying Image: You want to use any image you browse on the internet. You can copy the image link and paste it directly into Figma without downloading the image.

40 — Shift + X: It’s a very cool feature. A shortcut to swap stroke color and fill color when you select an element.

41 — Shift + Cmd + O: Outline stroke. There must be an element in the frame to use this shortcut. Then try this key combination. So in the left panel, you will see a new element named “(Stroke)” You can also apply an outline stroke to the selected element. For example, you can use this example to focus on buttons and similar elements.

Note: To fully understand the differences between Active Hover and Focus states, I recommend you take a look at this article.

42 — Component Description: We can add keywords to the components from the right panel. In this way, we can search by keyword in the assets section of the left panel and find that component.