Con este curso gratuito de Figma aprenderás cómo funciona la mejor herramienta de diseño NoCode
Mientras escribo estas líneas, Figma ha sido adquirida por Adobe. La herramienta fetiche para los diseñadores de usabilidad del presente, ha sido vendida por 20.000 millones de dólares.
Ojo, que alguien te viene con esa pasta y tú te lo puedes pensar… pero yo vendo, no vamos a juzgar. Pero lo cierto es que esta venta abre un periodo de incertidumbre.
Sea como fuere, en este curso y mega guía te presento una herramienta fundamental en la creación de diseño de producto. La herramienta por excelencia para diseñadores UX/UI y de producto digital y que se ha hecho con el mercado gracias, en gran medida, a la comunidad que la soporta y a su precio imbatible.
En las siguientes sesiones voy a enseñarte cómo funciona Figma, qué te puedes encontrar en ella, cómo puedes usarla para plasmar tus diseño (o, incluso, para llevártela a una herramienta como Bravo y crear tu propia app) y, en definitiva, las opciones que nos habilita dentro del NoCode.
Ojo que este curso va a ser para ti un must. ¿Estás preparad@? Pues vamos al lío
Lo primero que debemos de saber, una vez entramos en Figma, es que vamos a tener dos tipos de archivos: proyectos y borradores (draft).
.png)
Los proyectos nos van a permitir colaborar con otros. Los drafts, en principio, son para nuestro uso y disfrute (aunque, por ejemplo, puedes usar un draft para hacer tu diseño para Bravo Studio).
En los primeros, vas a tener (dependiendo del plan al que te suscribas), tres proyectos gratis. Si quieres irte a proyectos colaborativos ilimitados, ya debes de pasar por caja. Enseguida vemos los precios.
Para crear uno: desde la página principal, si seleccionamos en “New design file”, se creará un archivo que automáticamente irá a tus borradores. Para crear un proyecto colaborativo, deberás irte a “Teams” y, sobre el equipo que quieras, pulsar en la tecla + para crear un nuevo archivo.
.png)
.png)
Si lo que quieres es pasar un archivo de drafts a un equipo, basta con arrastrar ese archivo al equipo que quieras. Y listo.
Una de las cosas que diferencia a Figma de otros competidores es la increíble comunidad que hay detrás de la herramienta. Es súper colaborativa y puedes encontrar de todo: templates, componentes, guías de estilo, sistemas de diseño, plugins… Es una auténtica burrada lo que hay dentro. Puedes encontrar de todo para facilitar al máximo tu trabajo.
En concreto, los plugins son brutales. Los veremos luego, pero son un activo fundamental para que diseñes de manera más rápida y cómoda.
.png)
Para terminar este repaso por la herramienta, vamos a hablar de money. ¿Cuánto cuesta esta maravilla?
Bueno… pues para todo lo que ofrece, es bastante barata. Con el plan free puedes tirar prácticamente toda la vida en la inmensa mayoría de casos.
Ojo. Hay que esperar a que esto de la compra de Adobe se materialice para ver si los precios se mantienen.
.png)
Vamos a entrar ya en el editor para conocer más de cerca la interfaz que tenemos en Figma.
En primer lugar, en la parte superior, tenemos, por un lado, la barra de herramientas. Donde está el logo tenemos el panel de inicio. Desde ahí podremos crear un nuevo archivo, copiar y pegar, ajustar la vista, crear y editar objetos, añadir plugins…
.png)
El resto de la barra, de izquierda a derecha, incluye: el cursor, donde podremos seleccionar entre el puntero y la herramienta de escalado; la almohadilla sirve para crear frames que pueden ser personalizados o con la forma de un dispositivo; el cuadrado despliega el menú de formas y objetos; la pluma es para crear una forma personalizada y editar los puntos de los vectores; la T añade un texto; el siguiente icono nos abre el panel de widgets y plugins; la mano es para movernos por el documento arrastrando (mejor hacerlo con barra espaciadora y arrastrar); y el globo final es para añadir comentarios en cualquier parte del diseño.
.png)
La última parte de la barra es para compartir nuestro diseño, para lanzar el prototipo o para ajustar la pantalla y la visualización como queramos.
En la parte izquierda tenemos el panel de capas. Si has usado alguna vez Photoshop, este funciona de una manera muy similar.
Lo primero que nos encontramos es un selector entre Layers y Assets. Layers son las capas y las podemos agrupar en diferentes páginas. Assets son todos aquellos recursos que podemos tener a mano para utilizar de manera rápida y recurrente, como los diferentes componentes que podemos hacer. Luego lo veremos.
.png)
En el panel de capas, lo que debemos de entender es la jerarquía de los elementos. Como digo, estos funcionan igual a otras herramientas como Photoshop. Es decir, si dos capas se solapan en el canva, veremos la que está por encima en el panel de capas.
.png)
Las capas, a su vez, se organizan en frames y grupos. Esto nos facilita el orden (fundamental para trabajar en Figma) y permite que podamos trabajar con herramientas como el Auto Layout para ajustar, de manera precisa, la alineación de los elementos.
En la columna de la parte derecha tenemos tres pestañas. Empezamos por la primera “Design”. En este apartado vamos a poder ajustar todos los parámetros de un elemento. Vendría a ser como el CSS de nuestra página web o nuestra aplicación.
.png)
Lo primero que nos vamos a encontrar son las opciones de justificado y de alineación. Podemos, por ejemplo, alinearlos a la izquierda, centrarlos o también ponerlos en la parte superior o inferior de un frame. En este caso, estas opciones siempre funcionan cuando agrupamos los elementos en frames, que vendría a ser un elemento div en HTML.
.png)
Seguimos y lo que nos encontramos ahora son las opciones de ajuste del tamaño y posición de cada capa o su rotación. En este apartado, además, podemos aplicar un redondeado a los bordes y también aplicar un margen, superior e inferior, a los elementos que estén dentro de un frame.
.png)
Dentro de estas opciones de tamaño y posición tenemos, en el caso de que esté seleccionado un frame, la opción “clip content”. Esto viene a ser lo que se conoce en CSS como un overflow. Significa que, si los elementos que hay dentro de un frame sobresalen del marco del mismo, podemos mostrarlos o no. Sirve, por ejemplo, para prototipar sliders o para acortar textos.
Más cosas. Lo siguiente que vamos a ver en este panel son los constraints que vienen a determinar la posición en la que se va a encontrar cada elemento en el caso de escalado. Es decir, si nosotros aumentamos o reducimos de tamaño un frame, estarán alineados en una determinada posición desde la que crecerán o reducirán su tamaño. Fundamental para diseñar y prototipar componentes responsives. Vamos a verlos al detalle más adelante.
.png)
Debajo, en caso de que estemos dentro de un elemento frame, tenemos dos opciones. La primera es el auto layout que nos va a facilitar la alineación de los elementos unos con otros dentro de ese frame. Lo segundo es el layout grid, con el que podremos determinar una estructura de columnas o de filas, dentro de ese frame, para así poder alinear, de manera precisa y correcta, cada uno de nuestros elementos en el diseño .
.png)
El siguiente apartado que nos encontramos es el panel de layer y esto viene determinar las opciones o modos de fusión para las diferentes capas y la opacidad.
.png)
Después está el apartado fill en el que vamos a marcar el relleno de un elemento, que puede ser un color sólido, un degradado, una imagen…
.png)
Al igual que relleno tenemos stroke, el borde de ese elemento. En caso de que estemos en un frame o con una forma, nos aplicará un borde de un determinado tamaño.
Para ir terminando, tenemos el panel de efectos, donde vamos a poder añadir, por ejemplo, sombras o desenfoques.
.png)
Y, por último, está el panel de exportación, para poder exportar cualquier elemento de nuestro diseño. Por ejemplo, podemos exportar una imagen y podemos hacerlo en diferentes tipos de archivo como .jpg o .png, en formato vectorial como .svg. También en PDF.
.png)
Lo trataremos a fondo mucho más adelante, cuando hablemos de prototipado. Pero aquí, simplemente, lo que vamos a ver, de manera global, es que en este panel tenemos la opción de elegir dónde comienza el flujo de navegación.
También podemos determinar qué tipo de interacciones queremos y cómo se activan. Por ejemplo, si hacemos clic sobre un elemento, este nos llevará a otro con un determinado tipo de animación.
También podemos elegir si queremos permitir el scroll dentro de un frame o no.
Muy rápidamente, este panel de inspección lo que nos va a arrojar son las propiedades CSS de ese elemento. Podemos tener la propiedad de anchura y altura, la posición de elemento, el color y, además, lo podremos ver también en forma de código.
En esta lección vamos a ver qué elementos tenemos para añadir a nuestro diseño y cómo los podemos combinar.
Sería algo parecido a las mesas de trabajo de Photoshop. En estos frames vamos a ir agrupando las diferentes capas.
Podemos crearlos en el botón o pulsando F. Al hacer una de las dos cosas, tenemos dos opciones. Podemos arrastrar y crear un frame del tamaño personalizado. O podemos utilizar uno de los tamaños predefinidos que tenemos en la parte derecha de la pantalla (dispositivos, impresión…)
Dentro de los frames podemos agrupar capas y trabajar el alineado de estas gracias al auto layout, que veremos más adelante.
.png)
Como vimos anteriormente, las capas se van apilando una encima de otra para, así, establecer una relación jerárquica.
Todo elemento que vayamos añadiendo al diseño será una capa y, dependiendo del tipo y del relleno, tendrá más o menos opacidad.
.png)
Desde la barra de herramientas, como vimos anteriormente, podemos crear formas. Al pulsar sobre el botón, podemos elegir el tipo que queremos.
También podemos hacerlo con los atajos de teclado:
También podemos crear polígonos y estrellas. Con los diferentes tiradores, dentro de la forma, establecemos los lados del polígono, su redondeo, el ratio..
En las elipses, además, podemos hacer semicírculos con estos tiradores y en los rectángulos redondear las esquinas.
Una de las cositas buenas de Figma es que podemos usar su pluma o su lápiz para generar imágenes vectoriales a nuestro gusto.
Con la pluma, poniendo puntos y usando sus tiradores bezier, podemos crear formas que luego, en el botón de editar puntos, podemos modificar, eliminando puntos, añadiendo o redondeando más las aristas.
El lápiz es menos preciso, y nos permite pintar directamente sobre el lienzo de Figma y, lo que dibujemos, se convertirá en una forma vectorial.
En Figma también podemos enmascarar y unir elementos de diferentes formas. Vamos a ver un ejemplo.
Tenemos un círculo y una imagen, y queremos que esa imagen adopte la forma del círculo. Para hacerlo, colocamos la imagen sobre el círculo y, desde el panel de capas, seleccionamos ambas y pulsamos en el botón de máscara o en el atajo ⌃ + CTRL + M. Al hacerlo, vemos que la imagen se coloca dentro del círculo.
También podemos generar nuevas formas a partir de dos formas independientes. En este botón:
.png)
podemos establecer diferentes formas de unir elementos:
.png)
.png)
.png)
.png)
.png)
De primeras, el texto puede resultar un poco confuso. Coges, creas un texto y, cuando lo quieres escalar, hace cosas raras. Vamos a ver por qué.
Bien, para crear un texto puedes hacerlo desde su botón o pulsando la T. Aquí puedes hacer dos cosas: ponerte directamente a escribir o arrastrar el ratón y crear un área de escritura.
Cuando creas un área y el texto la sobrepasa, se desborda fuera del margen. Si directamente te pones a escribir, pues se adapta a lo que hagas.
.png)
Ahora bien. Imagina que quieres ampliar el texto. Coges el cursor, arrastras la caja del texto y, oh sorpresa, aumenta la caja, pero no aumenta el texto. Esto es así porque, precisamente, lo que ajustamos con esto es la caja, y no el tamaño de la fuente.
Para ajustar el tamaño de la fuente tenemos dos fórmulas: la primera, aumentar el tamaño en los estilos tipográficos (lo vamos a ver luego a fondo); la segunda, usar la tecla K que abre la herramienta de escalado. Con esta última opción podrás aumentar o disminuir el tamaño, respetando la proporción de la caja.
Por último, vamos a añadir imágenes a nuestro diseño. Aquí, como siempre, varias opciones:
Hasta ahora hemos visto lo que tenemos en Figma para jugar. Ahora toca ponerse el mono de diseñador y empezar a construir cositas.
En esta lección vamos a saber cómo agrupar todas las capas de nuestro diseño para que no nos explote la cabeza, vamos a darle estilo a nuestros textos y colores, crearemos componentes reutilizables junto a sus variantes y le meteremos magia a todo con los plugins que hay por la comunidad.
Al lío
Si viste el curso de Bravo Studio de SharingAway, os hacía mucho hincapié en la necesidad de mantener todo bien ordenado en Figma. Esto pasa por agrupar bien las capas, darle nombres lo suficientemente descriptivos y respetar al máximo la jerarquía.
Si has usado herramientas como Webflow, verás aquí algo que puede llevar a confusión. Al estar agrupados los elementos por orden jerárquico, estos se van colocando de abajo a arriba, al contrario que en Webflow. Es decir, lo que tenemos arriba del todo en esa jerarquía es lo que se verá por encima de lo que está debajo. Parece obvio, pero no está de más remarcarlo.
¿Cuándo agruparemos en frames y cuando en grupos? Estas son algunas de las diferencias:
Parece esto un alegato en favor de los frames. Puede. Pero son realmente útiles para agrupar la información y, si usas herramientas como Bravo, fundamentales para delimitar las diferentes secciones de tu app.
Pero, ¿significa esto que no usemos grupos? Para nada. Los grupos es una manera rápida de relacionar elementos, siempre que no vayamos a necesitar nada de lo anterior o, si queremos que esos elementos agrupados se comporten como uno solo.
De hecho, por ejemplo, podemos unir en grupos lo que queramos y aplicar a ese grupo unos constraints para que, cuando escalemos el frame, se fijen al lugar que queramos.
Algo fundamental es aplicar estilos a nuestras tipografías: fuentes, peso, tamaño, justificación, color… Todo esto lo podemos hacer desde el panel de diseño.
Empezamos por la fuente. Si usas la app de escritorio, Figma reconocerá las fuentes que tienes instaladas en tu catálogo tipográfico. Si usas la versión web, estás limitado a las fuentes que vienen por defecto en la herramienta.
Pero ¿y si quiero usar una fuente específica en la versión escritorio que no está dentro de Figma? Existe una solución. Instalando una herramienta llamada Figma Agent, esta monitorizará las fuentes que tienes en el ordenador y las usará.
Dicho esto, podemos usar las fuentes que queramos del extenso listado que tiene Figma y todas las que tú tengas. Ya hablaremos en otro curso de la importancia de elegir una fuente adecuada, del número de fuentes máximas que se recomienda añadir a un proyecto y la jerarquía visual y el ritmo que generan los diferentes tipos y pesos.
Del mismo modo, podemos determinar el peso de la fuente:
.png)
También su tamaño, su altura, su alineación y su justificación.
.png)
Pero hay más. En los tres puntitos que tenemos en la parte inferior derecha del panel, tenemos más opciones. Podemos reajustar el tamaño de la caja al texto, modificar el alineado, subrayar o tachar, poner todas las letras en mayúsculas o minúsculas…
Cuando queremos añadir un relleno de color, o un borde, tenemos varias opciones para elegir el color que queremos. Ya sea sólido o degradado.
En la imagen superior tenemos el panel de color. Podemos elegir un color directamente de la paleta, utilizar la pipeta o marcar el código del color en HEX, RGB, CSS, HSL o HSB. También podemos indicar el porcentaje de opacidad de ese color.
En la parte de debajo, Figma va guardando aquellos colores que se han utilizado en algún momento en el documento.
El degradado funciona prácticamente igual, solo que hay que elegir dos o más colores para establecerlo. Es muy común jugar con las opacidades para conseguir efectos como resaltados de textos.
Como has podido comprobar, dentro de un mismo relleno podemos poner varias capas y jugar con sus opacidades. En el caso del ejemplo de arriba, tenemos una capa de fondo con una imagen y, sobre ella, un degradado que tiene una parte a opacidad cero y otra a casi 100.
Dentro del relleno podemos también configurar otro tipo de degradados, como el radia, en forma de ángulo o de diamante. En todos ellos podemos, también, jugar con los parámetros de opacidad.
Entramos en una de las materias más interesantes: los componentes y las variantes. Los componentes son un conjunto de elementos que podemos agrupar y replicar, de la misma manera, en diferentes partes de nuestro diseño. Los haces una vez y replicas. Ahorro de tiempo.
Para crear un componente debes de agrupar esos elementos (en un frame o grupo) y pulsar el botón que muestro a continuación. Está en la barra superior de herramienta y aparece cuando seleccionamos un objeto, grupo o frame.
Vamos a crear uno. Algo simple, es un ejemplo. Vamos a hacer un componente de este cuadrado y este círculo, cada uno de un color.
Vemos que tenemos un nuevo elemento, en morado, que lleva el mismo icono que el botón anterior. Esto mismo lo veremos también en el panel de capas. Ahora ya tenemos un componente y, si nos vamos al panel de assets, ahí lo tendremos para reutilizarlo tantas veces como queramos.
Vamos ahora con las variantes. Cada vez que copias y pegas uno de estos componentes, creas una nueva variante de estos. Lo verás identificado en el panel de capas porque el icono es parecido, pero como vacío:
Nos ha hecho una copia exactamente igual que nuestro componente padre. Pero… qué pasa si este hijo nos ha salido algo díscolo y en vez del círculo rojo lo quiere azul. Veamos:
Como puedes apreciar, el diseño ha cambiado, pero el componente padre se mantiene exactamente igual. Esto es fabuloso, porque podemos hacer un componente inicial e ir haciendo variaciones, como las combo class de CSS, en las variantes que vayamos a usarlo.
¿Y si lo que cambio es un elemento del padre?
Pues ya ves que ambos se modifican a la par. ¿Sabes cuántas horas de trabajo te vas a ahorrar con esto de los componentes? Quizás todavía no seas consciente.
Eso sí. Hay modificaciones que no podrás establecer de primeras en los hijos, como por ejemplo el tamaño de los elementos o su posición. Eso debes de marcarlo desde el padre o desvincular la relación de componente-variante, pulsando el botón derecho y seleccionando la opción “Detache instance”.
Pero la verdadera magia de todo esto es poder animar componentes en sí para que ejecuten microanimaciones. Lo veremos en la parte del prototipado.
Antes de abandonar los componentes, y en relación con esto último, vamos a ver qué es un component set.
Básicamente, tú puedes establecer un componente determinado y que ese componente tenga diferentes estados. Por ejemplo, un radio button que esté marcado o desmarcado.
Para hacerlo, crea el primer elemento, duplica y coloca el estado contrario. En el ejemplo del radio button, crearemos primero un círculo que meteremos en un grupo, y, después, duplicaremos ese grupo y le añadiremos otro círculo más pequeño con el botón marcado. Como puedes ver en la imagen:
Al hacerlo, generamos dos propiedades en este componente, una por cada una de las variantes. Las podemos renombrar (de hecho es lo recomendable) en la parte de la derecha:
Una vez hecho esto, cuando importamos este componente desde los assets, podemos determinar qué propiedad es la que queremos mostrar:
Esto es bastante interesante y ganará fuerza cuando veamos las microinteracciones entre las diferentes propiedades.
Pero no nos anticipemos. Vamos a seguir por el camino marcado:
Para terminar esta sección, hay que hablar de los plugins. Es una auténtica locura lo que puedes encontrar en la comunidad de Figma. Te voy a hablar de los más destacados pero, antes, ¿cómo los instalamos?
Muy sencillo. Desde la barra de herramientas, en el apartado de widgets y plugins, los tienes.
Aquí puedes buscar uno y, cuando lo tengas, pulsas en run y ya lo tendrás en tu Figma, así de simple.
Una vez instalado, puedes usarlo desde ese mismo panel o, con botón derecho, vas al apartado de plugins y verás cuáles tienes instalados.
Hay infinidad de plugins. Y hay también infinidad de artículos y post con “los mejores plugins de Figma”. Sólo date un vuelta por redes sociales como Instagram y encontrarás joyas. Yo te voy a hablar de los que más uso:
Sólo son algunos. Os dejo la lista de todos los que tengo instalados por si queréis echarles un ojo.
Cuidado. Pueden irse las horas del reloj probando plugins de Figma 😛
Nos queda ya muy poquito para ponernos a diseñar, pero antes, vamos a ver qué nos falta para iniciarnos en ese proceso.
Una práctica muy acertada es configurar grillas para ajustar al píxel nuestros diseños. Para mostrarlas, necesitamos un frame y, en la parte de la derecha, nos iremos a layout grid.
Al darle al + nos muestra, por defecto, una cuadrícula. Lo habitual no es trabajar con ellas, si no con un grid de columnas.
Para sacarlo, pinchamos en el botón y nos aparecerá el panel para configurar:
Donde dice grid, pulsamos y en el desplegable elegimos columnas.
Tenemos varias opciones a editar:
Esta que ves arriba es una opción muy aceptada para un grid en diseño de apps o de pantallas móviles.
Para una página de escritorio, podemos usar estos otros parámetros, con 12 columnas:
Ojo aquí. Porque esto sí que se pone interesante. Auto layout es una manera muy cómoda de diseñar y nos va a quitar de muchas preocupaciones. Viene a ser una manera de distribuir los elementos para que estos guarden siempre la misma distancia y padding entre sí.
Muy útil, por ejemplo, para hacer botones del mismo diseño pero con palabras de diferente tamaño. Antes de auto layout, para hacer esto tenías que agrupar todos los elementos del botón en un frame o en un grupo (texto, forma de fondo, imágenes, iconos…) Con auto layout, primero, te olvidas de tener que poner una forma de fondo y, después, mantiene la proporción de todos los elementos independientemente de la longitud del texto.
Eso sí, de partidas puede ser un poco abrumador. Vamos a ver un ejemplo. Imagina que queremos hacer una card de una sección web en la que hablamos de nuestro equipo. Queremos alinear perfectamente estos elementos que podrían ser la foto, el nombre y el cargo de esta persona.
Para añadir un auto layout de todos ellos, los seleccionamos y pulsamos SHIFT + A.
Por defecto nos agrupa los elementos y ya, de partida, nos sugiere una distribución de los mismos, pero no es la que queremos. Vamos a cambiar el orden de las capas
¡Voilà! Ahora esto se parece algo más a lo que queremos. Pero hay muy poco espacio entre cada capa. Vámonos al panel de auto layout, en la parte derecha.
Como puedes ver, tenemos varias opciones para configurar. La primera de ellas, el orden de apilamiento: horizontal o vertical. En el cuadrado podemos determinar desde dónde comienza ese apilamiento para, así, alinearlo a nuestro gusto.
Tenemos también, en el valor que indica 20, la opción de añadir o quitar margen entre los elementos que conforman el auto layout para acercarlos o separarlos. Este margen puede ser negativo también.
Por último, los dos botones de debajo nos hablan del padding tanto horizontal como vertical. Si queremos dar un padding diferente para cada lado, podemos sacar los cuatro en el cuadrado que tenemos en lado derecho.
A todo el auto layout, además, podemos darle un fondo en las opciones de relleno (color, degradado, imagen…)
Vamos a ver más cosas. ¿Qué pasa si yo aumento el tamaño del grupo? Como puedes ver en la imagen de debajo, puedes hacerlo para, después, elegir el alineado que quieres.
Por último, ahora que el contenedor de todo es más grande que el contenido en sí, podemos adaptar la distribución de los elementos. Podemos empaquetarla o también distribuirla a lo ancho de todo el espacio. Algo así como el flexbox en CSS.
Ahora que conocemos la magia de auto layout, vamos a seguir con los constraints.
Si el auto layout nos facilita la vida, los constraints también nos van a ayudar a que todo se mantenga donde debe cuando escalemos el diseño.
Antes de meternos con ellos, decir que sólo funcionan en frames y componentes.
Su funcionamiento es sencillo. Los constraints determinan las posición de un elemento con respecto al frame padre inmediatamente superior. Es decir: imagina que tenemos un frame de una pantalla móvil y, a su vez, diferentes frames dentro que delimitan las secciones. Los constraints determinarán la posición de los elementos que estén dentro de esas secciones con respecto a la sección en sí.
No sé si me he adelantado un poco. Así que vamos a ir paso a paso.
Como puedes ver en la imagen superior, la card de la hamburguesa tiene, arriba y en la izquierda, dos pequeñas líneas de puntos. Esas líneas marcan la distancia de ese elemento con respecto a la izquierda y la parte superior de su frame padre. En la derecha, en el apartado de constraints, vemos que están alineados a izquierda y top.
Pero, ¿qué pasa si escalamos el frame padre hacia la derecha? Como puedes comprobar, la card se mantiene exactamente igual posicionada con respecto a la izquierda y el top.
¿Y si escalamos desde la izquierda? Como puedes ver en la imagen siguiente, aquí sí que cambia su posición porque va a forzar siempre para que mantenga esas distancias marcadas.
En el momento en el que vuelves a posicionar, manualmente, el elemento dentro del frame, esos constraints se volverán a calcular para volver a fijarlo.
Otra cosa importante a tener en cuenta es que, si usamos layout grid, los constraints se pegarán a las columnas. Por ejemplo, si queremos hacer una navbar con iconos para una app, podemos hacerla agrupando los iconos que necesitamos y colocándolos en un grupo.
Inciso. Los constraints no funcionan para un grupo como tal. Al aplicar un constraints sobre un grupo lo que estamos haciendo es aplicarlos sobre cada uno de los elementos en sí.
Dicho esto, seguimos. Imagina que hacemos una barra de iconos y que cada icono lo ponemos en una columna. Aplicando, por ejemplo, un constraints de center y bottom, vemos que al escalar ese frame los iconos mantienen su posición sin deformarse. Interesante.
A la hora de diseñar es muy práctico configurar un sistema de diseño que tenga establecidos los estilos que queremos tener para nuestros textos o nuestros colores de marca.
Para guardar el estilo de un texto, nos vamos a la sección de la derecha y pulsamos sobre los cuatro cuadrados. Ahí, pulsando en la tecla +, le damos un nombre a este estilo y guardamos. Ya lo tenemos.
Para editarlo, pulsamos sobre el nombre del estilo y, en el botón de editar, podemos cambiar lo que queramos.
Lo mismo ocurre con los colores. Podemos elegir un color en el selector y guardarlo como color de estilo de marca para usarlo en más sitios.
Ok. Con todo lo que hemos visto antes, ya podemos ponernos a diseñar y a meter magia. Una vez que todo está colocado, vamos a conocer un poco más de cerca las animaciones y el prototipado.
Prototipar significa otorgar a nuestro diseño las interacciones necesarias para que cobre vida. Es decir, podemos conectar una pantalla con otra para que, cuando hagamos click en un botón, hagamos esa navegación. También configurar microinteracciones como un hover, marcar un selector, animar un componente…
Cuando estamos prototipando, lo primero que tenemos que hacer es determinar dónde comienza el flujo de navegación. Figma te permite colocar diferentes punto de partida para, así, poder probar diferentes user flows.
Para poner un punto de origen, nos vamos a prototipado y marcamos que cree un Flow starting point seleccionado un frame. De esta manera, nos sale, en ese frame, una señal de que ese es el punto de partida. Si pulsas en esa señal, nos lleva al visor del prototipado, donde podremos ver todas las interacciones.
Ahora debemos establecer las conexiones entre los diferentes elementos. Verás que, al lado de cada uno de ellos, independientemente del tipo que sea, tienes un círculo en lado derecho. Para conectar ese punto con otro, simplemente arrastra desde ese círculo al destino. Listo
Al hacerlo, verás que te sale un menú con opciones. Vamos a verlas:
¿Te das cuenta de todo lo que ofrece Figma ya de partida para hacer animaciones tremendamente molonas? Pues espera, que hay más.
En el caso de los frames principales o de los componentes, podemos establecer que la animación se efectúe tras un delay o retraso. ¿Qué significa esto? Pues que, por ejemplo, podemos establecer animaciones dentro de una misma pantalla, por ejemplo, animar el fondo.
Esto es tremendamente interesante porque, de este modo, vamos a poder animar interacciones entre componentes. Por ejemplo, podemos establecer la animación que queramos cuando un usuario pulsa sobre en switch o sobre un radio button. O qué pasa cuando un usuario pincha play sobre una card de reproductor…
Muchos ejemplos. Te pica la curiosidad, ¿verdad? Pues vamos a ver cómo se hace esto
Estamos ya terminado esta mega guía. Vamos a ver cómo podemos animar componentes en Figma para provocar en ellos microinteracciones muy interesantes.
Vamos a poner un ejemplo. Imagina un botón de switch que, al activarlo o desactivarlo ejecute una animación sencilla y cambie el color.
En primer lugar vamos a crear el componente, un rectángulo y un círculo que será el botón. Agrupamos ambos. Ahora duplicaremos y crearemos todos los estados de ese botón (inicial, final e intermedios). Una vez lo tenemos, lo seleccionamos todos y, donde antes fuimos a crear un componente, ahora le decimos que lo que queremos es un component set.
Nos va a crear un grupo que dentro tiene cuatro variantes. Ahora vamos a animarlas entre ellas. Del primer estado al segundo la ejecutaremos mediante un click. En los estados intermedios lo haremos mediante un delay para que sea visible la animación. El resultado es este:
Lógicamente, se puede afinar. Pero ya te puedes hacer una idea de los resultados que podemos conseguir aquí.
Las opciones de prototipado de Figma son inmensas y se pueden conseguir diseños súper interesantes.
Hasta aquí esta mega guía y curso básico de Figma en el que hemos aprendido los fundamentos de una herramienta imprescindible para la creación de producto digital.
Permanece conectado a SharingAway porque iremos aportando contenido sobre Figma y sobre diseño que puede resultarte interesante.
Antes de finalizar, te animo a que compartas en la comunidad de SharingAway todos tus progresos con la herramienta y los diseños que construyes en ella.
¡Nos vemos pronto!
%20(2).jpg)
.png)