Si estás aquí espero hayas visto mi blog anterior porque el mismo ejercicio que hicimos en código, lo replicaremos en Figma.
Figma es un espacio colaborativo de diseño y es tan versátil que te permite realizar prototipos tan cercanos al código que te ahorrarán muchísimo tiempo a la hora de maquetar tus diseños web. Si quieres descubrir cómo, entonces, te invito a seguir leyendo sobre el desarrollo este proyecto para que puedas replicarlo e incluso mejorarlo. 😃
Para realizar este proyecto te recomiendo separar las actividades en 4 grupos:
Trabajar con grid es sensacional, nos permite colocar parámetros a nuestro diseño para evitar “adivinar” dónde posicionar nuestros elementos, y lo mejor de todo es que en Figma solo se necesitan unos cuantos clics.
Antes, me gustaría que crees 6 layouts para que cuando los seleccionemos podamos configurar sus respectivas grillas.
En mi caso decidí nombrar a todos mis layouts “Desktop” con la finalidad de tener una guía para las animaciones. (Eso viene después 🤫). Lo más importante aquí es que debes seleccionar el layout a usar para que puedas activar la opción Layout grid ya que esta es la que te va a permitir configurar las grillas de mejor manera:
Cuando presiones el símbolo + te aparecerá por defecto una grid de 10px, aquí es donde podemos hacer las configuraciones, ya que podrás ir a los puntos que se encuentran a la izquierda del grid para hacer la modificación:
Modificaremos las columnas y las filas (columns y rows). Para nuestro caso particular dejaremos 7 columnas y 3 filas dejando un margin de 20 y un gutter de 46 para las filas. Y cero para las columnas.
Muy bien, ya tenemos las guías para comenzar a trabajar. Ahora elaboremos las cards.
Lo primero que debemos hacer es instalar un plugin que nos sirva para poder incluir iconos / emojis en nuestros proyectos, para este caso en particular usé Iconfy ya que me resultó bastante intuitivo y fácil de instalar. Pero tú puedes usar el que más te guste.
Una vez instalado, activarlo en Figma es súper sencillo. Necesitarás ir al menú principal, luego a plugins y finalmente, en mi caso, a Iconfy.
Cuando selecciones esta opción tendrás acceso a todos los íconos que te ofrece este plugin así que te recomiendo escojas los que más te gusten, yo escogí estos:
Ahora que ya los tienes importados en tu layout es momento de crear las cards que los contendrán.
Como puedes ver en la imagen anterior, dentro del layout decidí crear un grupo llamado Cards y 5 subgrupos que contienen Cards para ícono, texto y el espacio contenedor (que me sirve para posicionamiento 🙂).
Cada card tiene las siguientes configuraciones con respecto a su tamaño, posición y colores:
Pero, y aquí viene la magia ✨, como previamente habíamos creado 6 layouts.
El primero tendrá las configuraciones de la imagen anterior, pero los otros 5 serán tus distintas creaciones con sus respectivas formas y colores que elijas para hacer las transformaciones con las animaciones que veremos después. Yo solo les cambié de color y ahora mismo te compartiré con cuales modifiqué cada icono en cada layout.
Layout 2 - #FF0505
Layout 3 - #0D1636
Layout 4 - #70A867
Layout 5 - #F9EF10
Layout 6 - #98CA3F
De la misma forma en que hicimos con las cards, la barra de Likert será un grupo que contendrá los siguientes subgrupos:
El dibujo de este es únicamente un círculo dentro de otro círculo. Recuerda que para dibujar un círculo lo puedes hacer con el atajo Ctrl. + O
Ctrl. + R con 50° lo que le permite tener esa apariencia redondeada característica.
La barra movediza tiene las mismas configuraciones que la barra estática, pero a esta le vamos a modificar el width por cada uno de los layouts.
Las modificaciones para el ancho de la barra movediza van en orden de la siguiente manera:
El color que escogí para la barra y botón es el #98CA3F. Puedes adivinar ¿a qué marca usa este color? Pista: Es una que amamos todos 💚. Déjame saber cuál es en los comentarios. 😉
La carnecita, lo que buscábamos, te contaré como convertir esta preciosa telaraña…
En el dibujo interactivo que viste al iniciar este blog.
Y es muy sencillo lo primero que debemos hacer es cambiarnos de design a prototype
Una vez estemos allí encontraremos que a cada card podremos verle un botón azul con fondo blanco, de ahí nos valdremos para hacer las conexiones como correspondan, de cada card a su respectivo layout modificado con nuestros colores así:
Este proceso lo replicaremos para cada card, su correspondiente layout con su card modificada y viceversa, es decir haremos uno de salida y uno de entrada respectivamente.
Si te fijaste bien en el gif también configuré los parámetros para las animaciones. Esa configuración te la dejo aquí:
Ahora sí, llegó el momento de ver si funciona tu prototipo y para eso te irás a la parte superior derecha del documento, justo abajo del botón para cerrar Figma encontrarás un botón de play el cual activarás para disfrutar de tu trabajo.
Repasa qué son los espacios blancos en diseño
¡FELICITACIONES! Querida diseñadora acabas de prototipar en Figma de una manera magistral, yo por mi parte puedo solo hacer dos cosas para premiar tu esfuerzo esto es:
¡Nunca pares de aprender! 💚
No tenia idea de que estaba Figma, es lo que necesito para Data Viz
Y déjame darte un spoiler, ¡es un curzaso!
Figma es una maravilla, sin duda iniciaré con el curso
Sí que lo es. Que buena onda Rafael. 💪
¡Ay no! ¡Qué guay! Esta padrísimo, ¿sacarás más blogs verdad Giu? Desde el blog pasado esa barra de Likert me tiene dando vueltas. Por favor más contenido así 😃!
Gracias, Francisco. Te prometo que haré mi mejor esfuerzo. 💚✨
Podrías recomendar algunos pasos para pasar este diseño a código html? Estoy intentando con algunos pluggins, pero no lo logro del todo bien.
Quisiera:
1- que las clases de html usaran los nombres de los elementos que puse en figma.
2- que los botones se reconozcan como “buttons” en el html
3- y sobre todo que los cuadros de texto se exporten como inputs, aunque sean de un tipo genérico.
4- adicional me gustaría ver qué opciones hay que exporten los iconos y otros assets que tenga el diseño.
He intentado con muchos pluggins (no pagos), pero aún no logro obtener un resultado que facilite la maquetación.
Qué me recomiendas?
¿Qué crees? También hice un blog sobre eso 😄 Aquí te lo dejo --> https://platzi.com/blog/crea-un-slider-de-satisfaccion-con-css-grid-y-transition/
Gracias!
Si había visto ese otro blog y me encantó, pero mi duda es si hay alguna manera más cómoda de maquetar en HTML un diseño de figma, a parte de from scratch como un plugin o pasos recomendados.
En ese post parece que tienes un archivo html y los estilos CSS ya generados. Los estilo se como obtenerlos en Figma, pero el TML con las clases y las etiquetas correctas (input/button/i) no. Esa es mi duda.