FIGMA – El paso de un diseñador gráfico al mundo del prototipo
FIGMA – El paso de un diseñador gráfico al mundo del prototipo
Era el año 2005, si mi memoria no me falla. Como diseñadora gráfica, sentía la necesidad de evolucionar en un mundo digital en constante crecimiento, además de ya cansada de imprentas, artes finales, correcciones de color, y de todo aquello que conlleva enviar un diseño a imprenta.
En aquel entonces, me presentaron a tres hermanos que complementaban perfectamente mis habilidades: Flash, Dreamweaver y Fireworks. Sin embargo, como suele ocurrir, su reinado llegó a un inesperado final.
Varios años después, me encontré con un pariente lejano de Flash: FIGMA (porque, de alguna manera, eso era). Hoy FIGMA, también forma parte de Adobe y ha evolucionado con escenarios, frames y herramientas vectoriales que encantan a los diseñadores.
En nuestro primer encuentro quedé impresionada. Pensé que FIGMA era como si Flash hubiera fusionado sus poderes con Illustrator, combinando lo mejor de ambos mundos. Pero dejemos atrás la nostalgia y hablemos del presente.
FIGMA se ha convertido en la herramienta perfecta para diseñar prototipos que están en alta demanda en la actualidad. Es totalmente en línea y nos permite trabajar en equipo, colaborar en tiempo real y compartir nuestros proyectos, lo que facilita la revisión y los comentarios del cliente.
Podemos diseñar cada pantalla del prototipo con la misma facilidad con la que lo haríamos en Illustrator. Se pueden utilizar todas las herramientas vectoriales con las que ya contamos en los programas que usamos habitualmente, como la pluma, el lápiz y las figuras, además de añadirles vida con comportamientos y movimientos.
FIGMA ofrece características esenciales permitiendo que un diseño web se adapte fluidamente entre dispositivos móviles, tabletas y ordenadores, en diferentes disposiciones, responsive design. Además, FIGMA, cuenta con una amplia variedad de complementos que ofrecen recursos ilimitados, a continuación, vamos a explicar algunos de los más interesantes:
- La biblioteca de estilos de FIGMA es una compañera de estilos, funciona de manera similar a la de InDesign. Si se desea editar un elemento, se puede buscar, modificar, etc. y estos cambios se reflejarán en todo el proyecto.
- Sabemos lo importante que es mantener un orden en el documento que se está trabajando; para sacarle el máximo partido a la herramienta los documentos deben estar organizados. Para ello se pueden utilizar capas y grupos, nombrar capas de manera descriptiva y usar carpetas para agrupar elementos relacionados.
- FIGMA es capaz de reutilizar componentes. Crea componentes reutilizables para elementos que se repiten en el diseño, como botones o encabezados. Esto facilita la consistencia en todo el proyecto.
- FIGMA utiliza marcadores de páginas para organizar los diseños en secciones lógicas. Esto facilita la navegación y la presentación de los futuros proyectos.
- Comunicación con el equipo. En FIGMA se pueden añadir comentarios a los diseños con el fin de proporcionar contexto a otros miembros del equipo o clientes. Podemos señalar áreas específicas y hacer preguntas o indicar instrucciones.
- Prototipo interactivo. La capacidad de FIGMA para crear prototipos interactivos es casi infinita. Se pueden definir transiciones y enlaces entre las páginas para mostrar cómo funcionarán los diseños.
- La herramienta también permite probar los diseños en dispositivos reales: es posible utilizar la vista de presentación para ver cómo se verán éstos en los diferentes dispositivos y tamaños de pantalla existentes.
- Guardar las diferentes versiones realizadas. Para ello, utiliza la función de historial de versiones que permite mantener un registro de los cambios para así poder volver a versiones anteriores en el caso que fuera necesario.
- Añadir recursos. En FIGMA se pueden explorar toda la amplia gama de plugins disponibles para la herramienta, que son de gran ayuda para agregar funcionalidades adicionales y mejorar el flujo de trabajo.
En definitiva, con FIGMA es posible que se puedan compartir conocimientos entre la comunidad de diseñadores, dando lugar al aprendizaje y a la inspiración.
Por último, les comparto una serie de comandos y atajos de teclado que son ampliamente utilizados por los diseñadores en los programas como Illustrator para agilizar su flujo de trabajo y realizar tareas comunes de manera más eficiente.
- Ctrl/Cmd + D: Duplicar el elemento seleccionado.
- Ctrl/Cmd + G y Ctrl/Cmd + Shift + G: Agrupar y desagrupar elementos, respectivamente.
- Ctrl/Cmd + L: Bloquear o desbloquear elementos seleccionados para evitar ediciones
- accidentales.
- Ctrl/Cmd + R: Crear una regla para medir distancias y alinear elementos.
- Ctrl/Cmd + ;: Mostrar u ocultar las guías de diseño.
- Ctrl/Cmd + 1, 2, 3, etc.: Cambiar entre las páginas de tu proyecto.
- Shift + Flechas: Mover elementos seleccionados en incrementos pequeños.
- Alt/Option + Flechas: Nudges (pequeños ajustes) de elementos seleccionados.
- Ctrl/Cmd + K: Crear un componente a partir del elemento seleccionado.
- Ctrl/Cmd + Shift + H: Ocultar o mostrar elementos seleccionados.
- Ctrl/Cmd + Shift + M: Cambiar la orientación de un elemento, como cambiar de
horizontal a vertical. - Ctrl/Cmd + Shift + C: Copiar los estilos de un elemento y aplicarlos a otro.
- Ctrl/Cmd + G y Ctrl/Cmd + Shift + G: Agrupar y desagrupar elementos, respectivamente.
- Ctrl/Cmd + + y Ctrl/Cmd + –: Aumentar y disminuir el zoom en el lienzo, respectivamente.
FIGMA es una herramienta versátil con muchas características y posibilidades. Podrán saber mucho más en nuestra formación «Diseña con Figma».
Experimenta y encuentra los consejos y trucos que mejor se adapten a tu estilo de diseño y a tus necesidades específicas.
La práctica constante es clave para mejorar las habilidades en FIGMA. Dedica tiempo a proyectos personales y experimenta con diferentes aspectos de la herramienta.