Después de establecer los fundamentos en la primera parte de nuestra artículo sobre Figma, es hora de sumergirnos más profundamente en esta potente herramienta de diseño colaborativo. En esta segunda entrega, vamos a realizar una introducción a Figma para ver funciones avanzadas que te permitirán potenciar tus habilidades creativas. Desde la creación y gestión de componentes, bibliotecas compartidas y la creación de prototipos interactivos. ¡Vamos allá!
1. Componentes
Figma permite crear componentes, que son elementos reutilizables que nos ahorran tiempo y ayudan a dar consistencia a nuestros diseños. Cualquier objeto puede ser convertido en un componente y copiado después las veces que deseemos dentro de nuestro proyecto. Esas copias del componente maestro son denominadas instancias y si modificamos el componente maestro automáticamente se modificarán todas ellas.
Para crear un componente en Figma simplemente tenemos que seleccionar todos los elementos que lo compondrán y a continuación clicar en el icono de los cuatro rombos situado en el área central de la barra de herramientas. Por supuesto podremos crearlo utilizando un atajo de teclado: Ctrl + Alt + K en Windows u Option + CMD + K en Mac.
Si deseamos modificarlo bastará con clicar en él y añadir los cambios que deseemos. Podemos distinguir un componente maestro de una instancia a través del icono que los representa en el inspector. Un componente maestro usa un icono de cuatro rombos mientras una instancia es representada con un icono de un solo rombo.
2. Bibliotecas en Figma
Las bibliotecas o librerías de Figma son un conjunto de componentes que se pueden compartir entre diferentes proyectos y miembros de un equipo lo que permite reutilizarlos las veces que queramos. Esto ahorra muchísimo tiempo a los diseñadores porque pueden usar un componente ya creado en vez de tener que volver a hacerlo desde cero. Y al usar los mismos componentes ayudamos a mantener la coherencia visual de nuestros diseños.
Actualmente la versión gratuita no permite publicar bibliotecas para compartirlas. Es necesario tener cualquiera de las versiones de pago: Professional u Organization
En estas versiones para compartir una biblioteca abrimos Figma y accedemos a la biblioteca que deseamos compartir. Hay varias formas de publicar la biblioteca:
- Clicamos en la pestaña Assets de la sidebar de la izquierda. Allí veremos un icono de un libro. Al clicar en él se abre un popup donde aparecerá el listado de las bibliotecas ya publicadas y la nueva que queremos publicar. Al lado de ésta aparecerá un botón de Publish. Al clicarlo nos dará la opción de darle un nombre a la biblioteca nueva y podremos publicarla.
- Clicamos en el icono de Figma de la barra de herramientas superior y elegimos la opción de Libraries. Se abrirá el mismo popup mencionado anteriormente.
- También podemos clicar en el botón Share de la barra de herramientas superior y en el popup que abre tendremos la opción Publish to Community. En este caso compartiremos nuestra biblioteca con la Comunidad de Figma.
3. Comunidad
Uno de los aspectos más interesantes que vamos a ver en esta introducción a Figma es la existencia de una gran comunidad en la que cualquier usuario puede compartir sus archivos con los demás miembros.
Para acceder a la Comunidad Figma simplemente clica en el botón de Explore Community que se encuentra en la esquina inferior izquierda de tu página de inicio de la aplicación.
Una vez dentro puedes realizar búsquedas a través de un buscador o elegir entre varias categorías que te permitirán encontrar inspiración, componentes, iconos, plugins, wireframes…
Cuando hayas encontrado algo que te interese sólo tienes que copiarlo y se generará un documento igual en tu perfil de usuario.
4. Auto Layout
Uno de los principales problemas a los que se enfrenta un diseñador cuando trabaja en un nuevo proyecto es mantener la coherencia entre tamaños, escalas, espaciados… de cada uno de los elementos que lo componen o entre ellos.
Figma posee la función de auto-layout que solventa este problema. El auto-ayout permite organizar y ajustar automáticamente los elementos de un diseño dentro de un marco o componente. Así podemos crear diseños responsivos y adaptativos que se ajustan a cualquier tamaño de pantalla.
Entre las funcionalidades del auto-layout se incluyen:
- Distribución y alineación automática de elementos: El auto-layout permite alinear y distribuir los elementos de un diseño dentro de un marco.
- Anidamiento de auto-layouts: Figma permite incluir un auto-layout dentro de otro.
- Cambios dinámicos: Cuando se realiza un cambio en el contenido de un auto-layout éste responde dinámicamente y se ajusta al marco. Los elementos que contiene se adaptan automáticamente al nuevo tamaño.
- Restricciones y reglas: El auto-layout permite crear reglas y restricciones para controlar cómo los elementos de un diseño se comportan. Permite crear límites de tamaño, ajustes de alineación, tamaño del espaciado…
¿Cómo se crea un auto-layout?
Seleccionamos los elementos con los que queremos crear el auto-layout y clicamos en el símbolo + del Auto layout situado en el Inspector:
5. Exportación de diseños
Tras hacerlo la pestaña de Auto layout se despliega mostrando las opciones de orientación de los elementos, alineación de los mismos, espaciado entre ellos…
Una vez terminados nuestros diseños Figma permite exportarlos en diferentes formatos y descargarlos. Para ello debemos ir a la pestaña de Exportar en la parte inferior del Inspector de la izquierda y elegir uno de los cuatro formatos que ofrece: PNG, JPG, PDF y SVG
6. Prototipado en Figma
Una de las funcionalidades más interesantes de Figma es el Prototipado, es decir su capacidad para crear una maqueta interactiva a partir de los diseños que hemos realizado. Así podremos simular cómo se comportaría nuestra página web, aplicación… cuando es manipulada por un usuario.
Para comenzar a crear un prototipo lógicamente tenemos que haber diseñado previamente nuestro producto y haber distribuido todas las pantallas del mismo en diferentes frames.
Tras ello seleccionamos la pestaña Prototype, que se encuentra al lado de la de Design, en el Inspector de la derecha y abrimos las opciones del prototipado:
- Lo primero que haremos será elegir el tipo de device (iPhone, iPad, Android…) en que queremos ver nuestro prototipo y la orientación del mismo (vertical u horizontal).
- Tras elegir uno de ellos seleccionaremos el elemento que va a iniciar la animación (marco, botón, texto, imagen…) y clicamos Interactions.
- En Interactions podemos especificar el tipo de evento de ratón que activará la animación (on click, on drag, while hovering…) y debajo del mismo, en otro desplegable, podremos elegir la acción que realizará ese evento de ratón: navegar hasta otro marco, abrir un link, volver…
- Si elegimos Navigate to tenemos que establecer el punto al que queremos llegar. Podremos hacerlo eligiendo el nombre de los marcos que aparecerá en un desplegable o arrastrando un conector en el espacio de trabajo hasta el punto correspondiente.
- También podremos ajustar las opciones de transición y animación según nuestras preferencias. Entre los tipos de transiciones se encuentran desvanecer, deslizar o mover.
- Deberemos repetir estos pasos para enlazar las diferentes pantallas de nuestro diseño.
- Si queremos crear diferentes flujos bastará con seleccionar el elemento del que queremos partir y clicar Flow starting point. Por defecto se creará un flujo llamado Flow 1, al que, por supuesto, podremos cambiar el nombre. Tras establecer las interacciones que deseemos podremos crear otro flujo distinto. Seleccionaremos otro elemento del que partirá ese nuevo flujo y clicaremos otra vez en Flow Starting Point. Un nuevo flujo (Flow 2) será creado.
- Para ver las animaciones creadas tenemos que clicar el botón Play en la Barra de Herramientas superior y se nos mostrará una vista previa del prototipo interactivo. Si hubiésemos creado varios flujos éstos aparecerán en un menú en la izquierda de la pantalla y podremos seleccionar el que queramos previsualizar.
7. Atajos de teclado en Figma
Aunque Figma es una herramienta muy intuitiva, que nos permite crear nuestros diseños de forma muy rápida, siempre es conveniente conocer los atajos de teclado para ahorrar aún más tiempo.
Entre los atajos de teclado más usados de Figma se encuentran los siguientes:
- Ctrl + C para copiar
- Ctrl + V para pegar
- Ctrl + Z para deshacer
- Ctrl + A para seleccionar todo
- Esc para deseleccionar todo
- Cursor + Alt para duplicar selección
- Ctrl + \ para mostrar/ocultar la interfaz gráfica
- ⌃ + C para mostrar/ocultar comentarios
- ⇧ + R para mostrar/ocultar las reglas
- + para acercar zoom
- – para alejar zoom
- Ctrol + 0 para colocar zoom al 100%
- V para activar la herramienta de Seleccionar
- H para activar la herramienta de Mano
- K para activar la herramienta de Escalar
- F para activar la herramienta de Marco
- P para activar la herramienta de Pincel
- T para activar la herramienta de Texto
Y si queremos dominar absolutamente todos los atajos de Figma podemos explorar el Panel de accesos directos de teclado. Hay dos maneras de acceder a él:
- Clicando en el interrogante ? de la parte inferior derecha y seleccionando Keyboard Shortcuts
- Utilizando directamente el atajo de teclado para abrir el panel: Control + Shift + ?
Conclusión
En esta introducción a Figma hemos visto que no solo es una herramienta de diseño, sino un ecosistema completo que potencia la creatividad y la colaboración en equipos de cualquier tamaño. Desde la simplificación de la gestión de componentes hasta la facilidad para crear prototipos interactivos, Figma se ha convertido en un aliado indispensable para diseñadores y equipos creativos. Si no has leído la primera parte sobre este tutorial completo sobre Figma, te dejamos el enlace para que aprendas a utilizar la herramienta al completo con todo detalle.
¡Síguenos en Redes Sociales y Canal de YouTube para aprender todo sobre Diseño Web, Experiencia de Usuario y Diseño de Interfaces!