¿Como PROTOTIPAR en Figma? – Tutorial paso a paso para crear prototipos de interfaces en FIGMA — Transcript

Full transcript

1. 0:05Hello, again. Today we will see how we
2. 0:08can prototype in Figma. The first thing
3. 0:11is that I have created a file in which
4. 0:13I have three different screens. Each of
5. 0:16these screens has buttons or screens
6. 0:18that need a wait time to move to the
7. 0:20next one. What we must do once we have
8. 0:25all our design is to go to the top
9. 0:27right in the interactive properties
10. 0:30panel and switch from design to
11. 0:32prototype. We click here and now we
12. 0:37will see that the way this space is
13. 0:40displayed changes. Once we have it, now
14. 0:46by hovering over each of the elements
15. 0:48we will notice that in addition to the
16. 0:50box highlighting it, a circle appears.
17. 0:54When hovering over that circle, it
18. 0:56changes to a plus sign. That means that
19. 0:58this element can now create a
20. 1:00connection. If we click on that plus
21. 1:04sign and hold it down, we can drag and
22. 1:07connect it to any other element we need
23. 1:10. In this case, the login button must
24. 1:14be connected to the successful login
25. 1:17screen. So we click, drag, and when the
26. 1:22highlighted box turns blue, the
27. 1:25connection is made. So all we have to
28. 1:29do is release the click. Once we have
29. 1:33made the connection, notice that
30. 1:35options appear to configure how that
31. 1:38connection will be made. In the first
32. 1:41part, the "on tap" option appears. If
33. 1:45we click on that dropdown menu, we will
34. 1:48have the option to drag, on hover,
35. 1:52while pressing, even when the mouse is
36. 1:55over that element, or when we touch
37. 1:58with a finger. In this case, I will
38. 2:03select "on tap," which is the default
39. 2:06option. Then we would have the "
40. 2:09navigate to" option. If we look at the
41. 2:13dropdown menu, notice that we could go
42. 2:15back, set a variable, a conditional, or
43. 2:17even scroll. In this case, I am going
44. 2:21to select "navigate to" and the screen
45. 2:24that appears selected is the one I just
46. 2:27configured, so I will make sure to keep
47. 2:30it selected. At the bottom, the way the
48. 2:36transition will occur appears. So we
49. 2:41can click it and there is the "instant"
50. 2:45option. Practically, the screen would
51. 2:47just appear. Dissolve, smart animate,
52. 2:52move in, push, or even slide. We will
53. 2:57select the "slide" option. I will
54. 3:00select this option. Notice that we have
55. 3:03the preview of what would be happening
56. 3:05there. Now we select "move in." There
57. 3:11we have the preview. And we could go
58. 3:17through each of these. Of all of them,
59. 3:21I think the push option is the most
60. 3:23suitable, so I'll handle it that way
61. 3:25and then we'll have options to
62. 3:26manipulate the timing. However, if the
63. 3:30preview already seems adequate to us,
64. 3:32we can handle it that way. I will leave
65. 3:36this configuration as it is and then
66. 3:39I'll press the close button. Now I have
67. 3:43my first connection made. If I want to
68. 3:47have a preview of this, I select my
69. 3:49frame and go up to the top to this play
70. 3:52icon, to the part with a
71. 3:54downward-pointing arrow, because we
72. 3:57have the option to present the project
73. 4:00or also to preview the prototype. In
74. 4:04this case, we are going to select the
75. 4:06option to preview the prototype. We
76. 4:12wait for it to load. And now we will
77. 4:19see that our first screen appears. If
78. 4:22we hover over the button, a hand icon
79. 4:25will appear, indicating that it is
80. 4:27something that can be pressed. And if
81. 4:30we click, it would slide and move to
82. 4:33the next screen. One of the ways to
83. 4:38prototype, then, is to be able to
84. 4:40select the object we want to connect
85. 4:42and drag it to the next screen, but we
86. 4:45might also need to select the entire
87. 4:47screen and connect that screen. So,
88. 4:51that is also possible. Just look here,
89. 4:54the recommendation is that we always
90. 4:56have our frames or our artboards
91. 4:58properly renamed. In this case, the
92. 5:01name of the artboard size appears, but
93. 5:04what I want is to have a reference name
94. 5:06. So I will double-click on that name
95. 5:11and change it to control panel. I press
96. 5:19enter and now I can make the connection
97. 5:22. I select the screen that I am going
98. 5:25to connect to the next one. I go to the
99. 5:28right side to the center of the screen,
100. 5:31and when the plus sign appears, I click
101. 5:33and, without letting go, I drag to the
102. 5:36next screen. Once the screen is
103. 5:40selected in blue, I let go, all the
104. 5:42options appear again, and look here,
105. 5:45under navigate to, the name of that
106. 5:48screen appears. If we leave the default
107. 5:52name for all of them, we wouldn't know
108. 5:54exactly which one to select or we would
109. 5:56have to start visualizing the selection
110. 5:57it makes for us. So it is much easier
111. 6:01to have the names of each of the frames
112. 6:03or screens. And by default, it appears
113. 6:07that it will be a push animation, and
114. 6:10we already have the preview from before
115. 6:13selected. What we will change here is
116. 6:16that instead of on tap, I will click
117. 6:19here. We will select the last option,
118. 6:25the option that says after delay. Let's
119. 6:30click and you'll see it now shows the
120. 6:33milliseconds it takes to move to the
121. 6:36next screen. To visualize it, we'll
122. 6:40change it to 200 to see a slightly
123. 6:43faster change. We close it and now the
124. 6:46connection is made. Keeping this screen
125. 6:49selected, I will now go to the preview
126. 6:52menu. Since I've already previewed the
127. 6:55prototype once, you can see it's
128. 6:58already selected, so we just have to
129. 7:01click. I'll preview it again and you'll
130. 7:06see the wait time is too fast. So I'll
131. 7:10close this preview and now I want to
132. 7:13edit that connection. To do so, I can
133. 7:17go back to the arrow connecting the
134. 7:20screens, the settings window will
135. 7:23appear again, and now I'll set it back
136. 7:26to 800, which was the suggested time.
137. 7:31We press enter, preview again, start
138. 7:34from the first window, click, and go to
139. 7:38the second. And then you'll see it has
140. 7:43more time to transition to the next one
141. 7:44. However, it still doesn't let you
142. 7:47read it. So I'll close it again. I'll
143. 7:51go to the arrow to edit again and
144. 7:53change it to 1600. I'll double it. I'll
145. 7:58click here to close. Now I will select
146. 8:02this frame to start the preview from
147. 8:04there and click on preview. Now we have
148. 8:09a longer wait time. So, this is how we
149. 8:12can go about creating different
150. 8:13connections. We can go back to edit
151. 8:17that connection at any time to set the
152. 8:21time we need, or even if we wanted to
153. 8:24add a different animation or connect to
154. 8:27a different screen instead. Now I've
155. 8:31changed it to 2500. I'll go to preview.
156. 8:38And now it lets me read it and has a
157. 8:40longer wait time. The last thing we'll
158. 8:44do is take this back button to the
159. 8:46first screen to have complete
160. 8:48navigation. So we follow the same step,
161. 8:52we select the element to connect.
162. 8:55Notice that when you hover over any of
163. 8:57its sides, a plus sign appears. I'll
164. 9:00make sure it's the side it points to. I
165. 9:03select it and move it to the first
166. 9:06screen. When the screen is selected, I
167. 9:12can let go and now I start having all
168. 9:14the configurations. We will leave it on
169. 9:17tap again, navigate to login, that's
170. 9:23the name of my screen. I'll use the
171. 9:27same animation, but notice that instead
172. 9:29of moving left, I don't want this
173. 9:31screen to move here and the other to
174. 9:33appear, but rather make it look like it
175. 9:35went back. So here with these arrows I
176. 9:38can change the direction; I can make it
177. 9:41go to the left, to the right, down, or
178. 9:43up. So, with the previous one, it
179. 9:47seemed like the other screen was on the
180. 9:50right side, but with this other option,
181. 9:52it simulates that the screen is on the
182. 9:55left side, and when we go back, it will
183. 9:58indeed return to that screen. We close
184. 10:02it, and now we will do the full preview
185. 10:05. So, I will select the login screen or
186. 10:08frame. I will click on preview, and now
187. 10:13we will navigate. We go to the login
188. 10:17button and press it. There is the wait
189. 10:21time we indicated for this screen. Then
190. 10:25it goes to the dashboard, and finally,
191. 10:28if we go to the back button, we will
192. 10:31see how it returns to the left side
193. 10:34from where the main screen movement
194. 10:37came. With that, we finish this brief
195. 10:40video on prototyping, and as we advance
196. 10:43in these tutorials, we will be creating
197. 10:45much more advanced connections and also
198. 10:47having a larger number of screens. I
199. 10:50hope the information was clear, and if
200. 10:52not, remember that I always read your
201. 10:54comments. Regards.