Copiar y mejorar el diseño de Figma Make en Figma Design — Transcript

Full transcript

1. 0:00Hoy vamos a ver cómo podemos integrar
2. 0:02nuestras creaciones hechas en Figma Make
3. 0:05directamente a los archivos de diseño de
4. 0:07Figma. Muy buenas, ¿qué tal? Soy Chavi,
5. 0:10este es mi canal Mocap y en este
6. 0:12tutorial veremos la nueva funcionalidad
7. 0:14que nos permite reducir la distancia
8. 0:17entre la ideación a través de Figma Make
9. 0:20y el diseño iterativo, permitiendo a los
10. 0:23miembros del equipo visualizar,
11. 0:25comunicar y aportar ideas de forma más
12. 0:27tangible. Sin embargo, es necesario
13. 0:30tener en cuenta que una vez pegamos el
14. 0:33diseño creado por Make al archivo de
15. 0:35diseño, las capas son editables, pero
16. 0:38estas no mantienen el diseño responsive
17. 0:41que sí obtenemos en Sigma. Bajo mi punto
18. 0:44de vista, esta funcionalidad de momento
19. 0:46está pensada para iterar, mejorar o
20. 0:49reutilizar los elementos de diseño de
21. 0:52tal manera que podamos aportar nuestro
22. 0:54toque personal, que a veces es tan
23. 0:56necesario cuando trabajamos con la IA.
24. 0:58Vamos a verlo. Lo primero que haremos es
25. 1:01irnos a Figma. Nos encontramos en una
26. 1:03cuenta profesional y estamos
27. 1:05concretamente en un archivo de diseño
28. 1:08donde vemos el promp que insertaremos
29. 1:10dentro de Figma Make. En este prom le
30. 1:13estamos pidiendo que nos diseñe una
31. 1:15landing page de detalle de producto para
32. 1:18un artículo de audio de alta gama. Este
33. 1:21prom lo tienes en la descripción del
34. 1:23vídeo para que puedas hacer el mismo
35. 1:26ejercicio con las mismas
36. 1:28especificaciones técnicas. Así que lo
37. 1:30que haremos es irnos a la barra superior
38. 1:33y clicar en el botón de más para crear
39. 1:36un archivo de Figma Me. Así que
40. 1:38seleccionamos la opción de make y vemos
41. 1:41cómo se nos crea el archivo de Figma
42. 1:43Make con el chat para introducir el prom
43. 1:46justo aquí dentro. Así que nos vamos
44. 1:49nuevamente al archivo de diseño,
45. 1:51seleccionamos todo el texto y con
46. 1:53comando C, comando V, lo insertaremos
47. 1:56dentro del chat. Dejaremos el prom tal y
48. 1:59como está, no añadiremos ningún archivo
49. 2:03ni captura de pantalla, lo dejaremos
50. 2:05todo igual. Así que clicamos en este
51. 2:08botón azul para que empiece a crear el
52. 2:10proyecto. Como este proceso puede durar
53. 2:13entre dos o 3 minutos, lo que haremos es
54. 2:16parar el vídeo y volver cuando esté
55. 2:18finalizando. Una vez hemos visto cómo va
56. 2:21cargando todos los archivos,
57. 2:23observaremos como Figma Make nos
58. 2:26presenta la landing page que hemos
59. 2:28solicitado a través del prom. Ahora
60. 2:30vamos a hacer un breve repaso de lo que
61. 2:32nos ha generado Figma Make. A pesar de
62. 2:34que introduzcas este mismo promp, es
63. 2:37posible que los resultados sean algo
64. 2:39distintos. Aquí tendríamos el botón de
65. 2:42añadir a favoritos juntamente con las
66. 2:44notificaciones que se nos muestran en la
67. 2:47parte inferior derecha. Aquí tendríamos
68. 2:49la tarjeta de los detalles del producto
69. 2:52donde podríamos añadir la cantidad que
70. 2:55se va sumando en el botón de añadir a
71. 2:58carrito. Si clicamos en el botón de
72. 3:00menos, la cantidad disminuye igual que
73. 3:02el precio del botón de añadir a carrito.
74. 3:05Aquí tendríamos el checkbox que habilita
75. 3:08el botón de añadir a carrito. Y si
76. 3:10clicamos, por ejemplo, en política de
77. 3:13privacidad, se nos abre este modal con
78. 3:16la política de privacidad de la página
79. 3:18en cuestión. Cerramos este modal. Aquí
80. 3:21observaríamos otras tres imágenes de
81. 3:23detalles del producto. Aquí tendríamos
82. 3:26la sección de especificaciones técnicas
83. 3:29seguido de las características
84. 3:31destacadas del producto, el contenido de
85. 3:34la caja, aquí diferentes opciones de
86. 3:37información y un footer. Muy bien, pues
87. 3:39ya tendríamos todo esto creado y lo que
88. 3:42vamos a hacer es clicar justamente en
89. 3:45este botón que tenemos en la parte
90. 3:47superior. se nos abre esta ventana y
91. 3:50aquí tendríamos otro botón para copiar
92. 3:52el diseño. Nos indica que podremos
93. 3:55copiar nuestra vista previa actual y
94. 3:58después pasarla para editar en el
95. 4:00archivo de diseño. Así que clicamos en
96. 4:03el botón. Aquí nos indica que ha sido
97. 4:05copiado en el portapapeles. Y si por
98. 4:08ejemplo volvemos al archivo de diseño,
99. 4:10que es donde tenemos el promp,
100. 4:12simplemente con botón derecho clicamos y
101. 4:15seleccionamos pass here. Observamos cómo
102. 4:18se copia toda la landing que nos ha
103. 4:20creado Figma. Ahí vemos cómo se ha
104. 4:23copiado exactamente todo el diseño.
105. 4:26Ahora bien, volveremos un momento al
106. 4:28archivo de Figm y veremos cómo es el
107. 4:31comportamiento responsive de esta
108. 4:33página. Para ello, clicamos en este
109. 4:35icono de aquí y pasaríamos a la versión
110. 4:38mobile. Si hacemos más ancho el diseño,
111. 4:41vemos como todo se comporta
112. 4:43correctamente y se va adaptando
113. 4:46perfectamente a los diferentes tamaños
114. 4:48de pantalla. Vemos como la interacción
115. 4:51para abrir el modal sigue funcionando
116. 4:53perfectamente. No obstante, este
117. 4:55comportamiento no lo tendremos en el
118. 4:58archivo de diseño. Volvemos un momento
119. 5:01al archivo de diseño, donde hemos pegado
120. 5:04el prototipo. Y si seleccionamos el
121. 5:06frame y nos vamos a layers, vemos como
122. 5:09tenemos todo bien definido en cuanto a
123. 5:12las diferentes capas, los nombres de los
124. 5:14frames y además también tendríamos el
125. 5:17autolayout. No obstante, el
126. 5:19comportamiento no es el mismo que
127. 5:21tendríamos en Figma Make si hacemos el
128. 5:24frame más ancho o más estrecho, vemos
129. 5:27como todo se mantiene igual. Imagino que
130. 5:29el comportamiento que nos gustaría tener
131. 5:32también en los archivos de diseño, Figma
132. 5:35lo actualizará en algún momento. No
133. 5:37obstante, esta herramienta funciona muy
134. 5:40bien si, por ejemplo, queremos editar
135. 5:42directamente en el archivo de diseño
136. 5:45algo que previamente ha sido creado por
137. 5:48Figma Make Seleccionamos esta carta.
138. 5:51Aquí observamos cómo tendríamos el frame
139. 5:53de card. Y si por ejemplo queremos
140. 5:55modificar detalles, en lugar de pedirlo
141. 5:58mediante uno o diferentes proms, lo que
142. 6:01podemos hacer es editar el diseño. Lo
143. 6:04que haremos aquí, por ejemplo, es
144. 6:06modificar los botones que tenemos
145. 6:08justamente por aquí abajo, por ejemplo,
146. 6:11el de comprar ahora. y cambiaremos tanto
147. 6:14el color de fondo como el color de
148. 6:17texto. Lo ponemos de color morado y el
149. 6:20texto de color blanco para que se vea
150. 6:22correctamente. Por ejemplo, los botones
151. 6:25en este caso que son cuadrados para
152. 6:28añadir o quitar unidades al carrito de
153. 6:31compra, en lugar de tener un corner
154. 6:34radios de 8 píxeles, lo aumentaremos a
155. 6:3730, tanto en el botón de menos como en
156. 6:40el botón de más. Son pequeños detalles,
157. 6:42pero que quizás es necesario cuando
158. 6:44vemos que ha sido creado un diseño por
159. 6:47Figma Make y queremos darle nuestro
160. 6:49toque personal. Aquí veríamos también
161. 6:51que el comportamiento responsive tampoco
162. 6:53se aplica al frame de cart. Lo que
163. 6:56haremos a continuación es clicar con
164. 6:58botón derecho sobre este frame y copiar
165. 7:01el diseño. Volveríamos al archivo de
166. 7:04Figma Make, nos vamos al chat y con
167. 7:07botón derecho pegamos el archivo
168. 7:09justamente por aquí y le pediremos que
169. 7:12nos actualice el componente de card con
170. 7:15los colores actualizados. Así que además
171. 7:17de insertar el frame, escribimos
172. 7:20actualiza el componente de cart con los
173. 7:22estilos de color actualizados. Clicamos
174. 7:25en el botón y veremos cómo
175. 7:27progresivamente va cargando. Así que
176. 7:30pararemos el vídeo para que no se haga
177. 7:32muy largo y volveremos cuando esté el
178. 7:34diseño actualizado. Una vez ha terminado
179. 7:37todo el proceso, vemos como
180. 7:39automáticamente se actualiza el diseño
181. 7:41en Figma Make Vemos como tendríamos los
182. 7:44botones redondeados y si clicamos la
183. 7:47funcionalidad continúa intacta. Aquí
184. 7:50tendríamos también el cambio de color.
185. 7:52Otra cosa interesante es que si queremos
186. 7:55editar la versión mobile, podríamos, por
187. 7:57ejemplo, ponerlo para un dispositivo
188. 8:00mobile y volvemos a clicar en el botón
189. 8:02para copiar el diseño. Volvemos al
190. 8:05archivo de diseño y lo que vamos a hacer
191. 8:08ahora es pegar justamente aquí el diseño
192. 8:11que hemos copiado y tendríamos la
193. 8:13versión mobile tal y como hemos
194. 8:15configurado en Figma. Esto nos sirve,
195. 8:18por ejemplo, para tener tanto una
196. 8:20versión desktop, tablet, como mobile del
197. 8:23prototipo que estemos creando y poder
198. 8:25iterar o mejorar el diseño en cada uno
199. 8:28de los dispositivos. También vemos como
200. 8:30tenemos la card actualizada con los
201. 8:32estilos que hemos modificado previamente
202. 8:35en el archivo de diseño. Así que lo que
203. 8:37podemos hacer es sustituir la card
204. 8:40antigua por la card nueva con los nuevos
205. 8:42estilos. Otra cosa interesante que
206. 8:44también podemos hacer es que si por
207. 8:46ejemplo tenemos una funcionalidad que
208. 8:49modifique el estado de la página web,
209. 8:51también podemos copiar el diseño de ese
210. 8:54estado específico para pasarlo al
211. 8:57archivo de diseño, como por ejemplo
212. 8:59abrir el modal de la política de
213. 9:01privacidad. Clicamos en el link, vemos
214. 9:04cómo se nos abre el modal y a
215. 9:07continuación volvemos a clicar en el
216. 9:09botón, copiamos el diseño, nos vamos al
217. 9:12archivo donde tenemos los diseños y lo
218. 9:15pegamos justamente por aquí. Tendríamos
219. 9:18ahora la página en su versión desktop
220. 9:20con el modal abierto, además de la
221. 9:23sombra que queda justamente por detrás
222. 9:25del modal. Esta sombra corresponde a un
223. 9:28frame, lo observamos aquí en Layers y lo
224. 9:31que podríamos hacer es estirar este
225. 9:34frame para que la sombra ocupe el 100%
226. 9:38del alto de la página. Y con esto ya
227. 9:40hemos visto algunas de las
228. 9:41características más importantes que
229. 9:44podemos realizar con esta nueva
230. 9:46herramienta, ya que a partir de un
231. 9:48diseño creado en Figma Make lo podemos
232. 9:51copiar y pasar directamente al archivo
233. 9:54de diseño. A partir de ahí lo podemos
234. 9:57mejorar iterar para que el ciclo
235. 9:59continúe y mejorar más nuestros
236. 10:01prototipos.
237. 10:03Yeah.