10 Game-Changing Figma Tips & Tricks Every Designer Needs to Know — Transcript

Full transcript

1. 0:00hello everyone today we're diving into
2. 0:02amazing figma tips and tricks that will
3. 0:05speed up your workflow and turn you into
4. 0:07a figma wizard if you're interested in
5. 0:09improving your design game even more be
6. 0:12sure to check out our free ux UI design
7. 0:14Playbook you can find the link in the
8. 0:16description below the video now let's
9. 0:19get right into it our first tip involves
10. 0:22using figma's delete and heal function
11. 0:24let's say you want to remove one of the
12. 0:27points in a shape
13. 0:28simply select it and hold down shift
14. 0:31while pressing delete the point
15. 0:33disappears but instead of cutting the
16. 0:35shape figma heals the path automatically
17. 0:38but what about more complex shapes well
18. 0:41let's switch to a line in the shape of a
19. 0:43question mark if your path has too many
20. 0:45points you can select multiple points
21. 0:48and hold down shift while pressing
22. 0:49delete figma will automatically heal the
23. 0:52path and smoothen it
24. 0:54let's move on to our next tip imagine
25. 0:57you're working on a large figma file
26. 0:59with a lot of similar elements like
27. 1:01these shapes or text elements here and
28. 1:03you want to select all of them at once
29. 1:05first you just need to select an element
30. 1:08go to edit and then select all with and
31. 1:11choose the property based on your needs
32. 1:13and just like that all the elements with
33. 1:15the same properties are selected this
34. 1:18feature can be a massive Time Saver
35. 1:21okay let's jump right into the next tip
36. 1:24which is about figma's smart selection
37. 1:26feature let's say you're working with
38. 1:28multiple objects in an array like this
39. 1:31select objects that you want to tidy up
40. 1:33now notice this little grid icon in the
41. 1:36corner just click on it it just
42. 1:39magically tidied up our objects you can
43. 1:41adjust the spacing between them and drag
44. 1:44objects around to rearrange them
45. 1:47the next tip is about adjusting small
46. 1:50and big nudge amounts
47. 1:52by default when you select an object and
48. 1:55use the arrow keys to nudge it it moves
49. 1:57by one pixel if you hold down the shift
50. 2:00key while using the arrow keys your
51. 2:02object will move 10 pixels at a time but
52. 2:06maybe you need to make really precise
53. 2:08adjustments
54. 2:10choose preferences and then nudge amount
55. 2:13there you adjust the nudge amounts so if
56. 2:16you want to move objects by half a pixel
57. 2:19or 0.1 pixel you can do that too
58. 2:22moving on let's explore a unique feature
59. 2:26of figma using images as Styles in figma
60. 2:30you can create Styles not only for
61. 2:33colors text effects and layouts but also
62. 2:36for images click on the four dots next
63. 2:39to fill and then on the plus button here
64. 2:42you can name your style
65. 2:44we'll call it Lake for now and then hit
66. 2:47create style now this image has been
67. 2:50saved as a style and you can apply this
68. 2:53style to any shape or font The Arc tool
69. 2:56is a great tool for creating and
70. 2:58manipulating curves and circles in figma
71. 3:01when you hover over the circle a single
72. 3:04handle will appear on the right hand
73. 3:06side
74. 3:07this point determines where you can
75. 3:09begin to create an arc click and drag
76. 3:11the arc handle up or down to change the
77. 3:14suite this create a gap in the circle
78. 3:17now there will be three handles shown
79. 3:19the ratio handle at the center of the
80. 3:22circle allows you to change the circle
81. 3:24to a ring the start handle indicates
82. 3:27where the arc Begins the sweep indicates
83. 3:30how complete the circle is
84. 3:32the next tip is about using multiple
85. 3:34fills and figma
86. 3:36this can be particularly useful when you
87. 3:39have text overlaying an image and you
88. 3:41want to improve its readability
89. 3:43select your image and in the right hand
90. 3:45panel look for the fill property click
91. 3:48on the plus icon neck to fill to add an
92. 3:51additional fill you can adjust the color
93. 3:53of this fill to create a nice effect we
94. 3:56can also change this fill to a gradient
95. 3:58and adjust the gradient so that the
96. 4:01darker part is near the text
97. 4:03further enhancing its readability the
98. 4:06best part is we did all this without
99. 4:08needing to add additional rectangles or
100. 4:10layers on top of our image next up we
101. 4:13have a tip that can save you a lot of
102. 4:15time what if we want the circle to have
103. 4:17the same look as the star including its
104. 4:20color stroke and stroke width we could
105. 4:22manually adjust these properties one by
106. 4:24one but there's a quicker way first
107. 4:27select the star right click and select
108. 4:30copy properties now select the circle
109. 4:34right click and select paste properties
110. 4:36and just like that the circle inherits
111. 4:39the star's properties including its
112. 4:42color stroke and stroke width alright
113. 4:45moving on to the next tip we're going to
114. 4:47talk about ignoring Auto layout using a
115. 4:50simple key the space bar this is an
116. 4:53incredibly handy trick when you want to
117. 4:54adjust your layout freely despite using
118. 4:57Auto layout simply select an element and
119. 5:00hold down the space bar while moving it
120. 5:02inside Auto layout you'll notice that as
121. 5:05long as you're holding the space bar you
122. 5:07can freely move the element around
123. 5:09ignoring the constraints of the auto
124. 5:11layout
125. 5:13the last tip for today is about figma's
126. 5:15built-in calculator
127. 5:17suppose you're working on a design and
128. 5:19you want to make an object wider by
129. 5:21certain amount of pixels just click on
130. 5:23the width property of the object and
131. 5:25instead of typing a new number type plus
132. 5:27and some number and press enter but it
133. 5:30doesn't stop at basic math like addition
134. 5:32subtraction multiplication and division
135. 5:35you can also use more complex operations
136. 5:38like parentheses for order of operations
137. 5:40and percentages
138. 5:42I hope these figma tips and tricks will
139. 5:45help make your design process smoother
140. 5:47and more efficient
141. 5:48don't forget to hit the like button if
142. 5:51you found this video useful and
143. 5:52subscribe to our channel for more handy
144. 5:55design content