.svg){kind=icon}
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)
%2520(1).jpeg)
%2520(1).png)
