Animated Navigation Bar in Figma - Prototyping Tutorial — Transcript

Full transcript

1. 0:00foreign
2. 0:03[Music]
3. 0:06hello and welcome to this prototyping
4. 0:08tutorial where we'll show you how to
5. 0:10create this beautiful animated bottom
6. 0:12navigation in figma trust me it's a lot
7. 0:15simpler than you might think we've also
8. 0:17prepared source files for you which you
9. 0:19can download from the link in the
10. 0:21description below this video and use in
11. 0:23your own projects
12. 0:24ready great let's Dive Right In First
13. 0:28we'll want to take a quick look at our
14. 0:29phone frame screen to get a sense of its
15. 0:31width perfect it's coming in at 375
16. 0:34pixels which is what we want now let's
17. 0:37navigate over to our shape tools
18. 0:39specifically the rectangle to carve out
19. 0:41the foundation of our navigation bar
20. 0:43we'll go ahead and create a rectangle
21. 0:45with a width of 375 pixels to match our
22. 0:49screen for the height let's give it 76
23. 0:52pixels this should provide a great
24. 0:54balance of space for our icons without
25. 0:56overwhelming the design next we'll opt
26. 0:59for a dark gray color for our rectangle
27. 1:01this subtle Hue will ensure consistency
28. 1:04and integration with the overall dark
29. 1:06aesthetic of the app
30. 1:09now let's transition into the next phase
31. 1:12of our design creating a clickable area
32. 1:14for our icons or tabs
33. 1:19foreign
34. 1:25to ensure that their touch friendly
35. 1:26we'll set Dimensions at 78 pixels in
36. 1:29width and 40 pixels in height we should
37. 1:32be aiming for at least 44 pixels for
38. 1:34optimal usability but for the purposes
39. 1:37of this tutorial we'll stick with 40.
40. 1:39after removing the fill let's paste our
41. 1:42home icon into our first tab
42. 1:46we'll align it right in the middle and
43. 1:47create a duplicate
44. 1:54we then copy our clock icon and replace
45. 1:56the home icon with it
46. 1:59repeating this process for the rest of
47. 2:01our icon
48. 2:07once done we can discard the original
49. 2:09icons and give appropriate names to our
50. 2:11four new tabs
51. 2:21alright let's bring these icons to the
52. 2:24front and position them nicely on our
53. 2:25rectangle ensuring they're Centered for
54. 2:27symmetry
55. 2:31foreign
56. 2:39tastic moving on we'll create two
57. 2:42circles we'll place the first circle on
58. 2:44top of our rectangle setting Dimensions
59. 2:46at 80 by 80 pixels initially before
60. 2:49stretching the width to 110 pixels to
61. 2:52create a more ellipse-like shape
62. 2:54remember to align it precisely with our
63. 2:56first home icon that's key here let's
64. 2:59then adjust the fill to match the app's
65. 3:01background color
66. 3:03next we'll create a second Circle and
67. 3:05align it with the ellipse and the home
68. 3:06icon
69. 3:14we'll slightly lower our lips so its
70. 3:16middle aligns perfectly with the top of
71. 3:18the rectangle
72. 3:23and before we proceed we push our light
73. 3:25circles slightly down once done we'll
74. 3:28double click on the ellipse to grab the
75. 3:30anchor points we're going to grab the
76. 3:31left handle and pull it towards the
77. 3:33center of our Circle and we're doing the
78. 3:35same thing on the right side too
79. 3:39foreign
80. 3:44to the bottom handle this next step is
81. 3:47important in the right panel we'll
82. 3:49switch the option from no mirroring to
83. 3:51mirror angle and length this smart trick
84. 3:54ensures that if we adjust one side the
85. 3:56other side will mirror the change
86. 3:58perfectly maintaining asymmetrical look
87. 4:00once we're satisfied with the shape of
88. 4:02our hole we'll drag it a bit lower and
89. 4:05do the same with the circle
90. 4:08we'll fine-tune the bottom part just a
91. 4:10bit more
92. 4:19the following step involves cutting out
93. 4:21the unnecessary part of our hole we'll
94. 4:24create a rectangle to cover the top part
95. 4:36select everything and then we'll use
96. 4:39subtract selection to remove the excess
97. 4:42we'll then realign our white circle and
98. 4:44change the fill of our hole to match the
99. 4:46background color
100. 4:50foreign
101. 5:01ly let's give our bottom navigation a
102. 5:04nice radius for that smooth rounded look
103. 5:06amazing this looks lovely now it's time
104. 5:10to add those final touches to our
105. 5:12animated bottom navigation here's what
106. 5:14we'll do first let's change the color of
107. 5:17our circle to the lovely green shade
108. 5:19from our apps color selection
109. 5:23we'll bring our icons above the
110. 5:25rectangle and align them perfectly in
111. 5:27the middle
112. 5:37for our first icon home let's give it a
113. 5:40dark color from the app's color palette
114. 5:42position the icon precisely within the
115. 5:45green circle ensuring it's right in the
116. 5:47middle perfect we've tackled the most
117. 5:50crucial part and it only gets easier
118. 5:52from here now let's select everything
119. 5:54and create a frame this is an important
120. 5:57step to ensure that our design works
121. 5:59properly
122. 6:02foreign
123. 6:07after that let's create a new copy and
124. 6:10rename our frames accordingly
125. 6:24now we'll position the clock icon in the
126. 6:27exact horizontal position as the home
127. 6:29icon once that's done we'll move the
128. 6:32icon back to its original position
129. 6:33perfectly aligned with the rest of the
130. 6:35icons great now select both the circle
131. 6:39and the hole and move them below the
132. 6:40clock icon making sure they're aligned
133. 6:43perfectly with the icon itself next
134. 6:45change the color of the clock icon to
135. 6:47dark and the color of the home icon to
136. 6:49Gray
137. 6:53foreign
138. 7:04to make things easier and faster it's
139. 7:06best to create color styles for the dark
140. 7:08and gray colors this will come in handy
141. 7:11throughout the design process
142. 7:16fantastic progress now let's move on to
143. 7:19creating the third part it's a similar
144. 7:22process as before
145. 7:25place the next icon in the position of
146. 7:28the selected icon and then move the
147. 7:30clock icon back to its original state
148. 7:35drag the circle and hold below the icon
149. 7:37and align them with it change the colors
150. 7:39using our freshly created color Style
151. 7:50and there's one more step left
152. 7:57let's bring the profile icon to the same
153. 7:59level as the graph icon and then bring
154. 8:02the graph icon back to its original
155. 8:03position
156. 8:10now let's apply the color styles we
157. 8:12created to all our icons
158. 8:27perfect now here's where the magic
159. 8:29happens we'll turn each tab into a
160. 8:32separate component
161. 8:46select all four navigation tabs and then
162. 8:49select combine as variants this brings
163. 8:51everything into one component
164. 8:55now let's define the interactions
165. 8:58between these components
166. 9:03switch to the Prototype panel
167. 9:08in the first tab click on the clock icon
168. 9:11and connect it with the tab below it
169. 9:16Now define the interaction in the right
170. 9:18sidebar by choosing a trigger and action
171. 9:20in the animation section select smart
172. 9:23animate from the transition field apply
173. 9:25gentle easing to the transition and
174. 9:28change the duration to 1000 milliseconds
175. 9:31connect the third icon with the third
176. 9:33tab
177. 9:35in the fourth icon with the fourth tab
178. 9:37using the same animation parameters
179. 9:39we'll repeat a similar process for the
180. 9:41second tab connecting the first icon
181. 9:44with the first tab
182. 9:46the third icon with the third tab
183. 9:49and the fourth icon with the fourth tape
184. 10:01great now let's connect the last tab to
185. 10:04other tabs
186. 10:12perfect we now have everything connected
187. 10:15let's go back to the design panel and
188. 10:18change the white fill to match the
189. 10:19background color of our app
190. 10:25also make sure to match the color of our
191. 10:27hole with the background
192. 10:36foreign
193. 10:45excellent
194. 10:48now let's select this component either
195. 10:51from our panel or the assets panel and
196. 10:53position it nicely at the bottom of our
197. 10:55app screen
198. 10:59foreign
199. 11:06let's preview what we've created if
200. 11:09everything works as expected we should
201. 11:10see a smooth transition in the bottom
202. 11:12navigation
203. 11:16look at that
204. 11:17our beautiful animated bottom navigation
205. 11:19is now complete
206. 11:23feel free to preview it through a mobile
207. 11:24frame as well to see how it looks
208. 11:30if you like this video subscribe to our
209. 11:32channel to get notified when a new video
210. 11:34comes out see you in the next video
211. 11:37[Music]