En septiembre de 2022, Adobe anunció la adquisición de Figma, editor de una aplicación web que compite con Adobe XD… antes de cambiar de rumbo. Hoy en día, Figma se ha consolidado como la principal herramienta de diseño de interfaces digitales. Desde el diseño de una simple estructura alámbrica para probar una idea hasta la creación de un prototipo interactivo que se parece exactamente a la versión final de un producto, su lugar en los corazones de los diseñadores no ha hecho más que crecer. Entonces, ¿cómo y por qué Figma se ha ganado un lugar así en el competitivo mercado de herramientas de diseño? Explicaciones con Florent Bachelier, diseñador UX.
Figma es una herramienta profesional destinada inicialmente a diseñadores de interfaces (diseñador de experiencia de usuario). Tiene diferentes versiones según las necesidades: una versión gratuita y tres versiones de pago: una versión “Profesional”, una versión “Organización” y una versión “Business” a medida.
Puedes acceder a Figma de forma gratuita y así explorar la gran mayoría de estas funciones. Si quieres utilizarlo de forma profesional, por supuesto tendrás que actualizar a una versión de pago. El precio inicial de Figma Professional es de 12 euros al mes para una editorial.
Dicho esto, una serie de características atraen a los profesionales del diseño a Figma, como: la facilidad de colaboración en tiempo real, la capacidad de crear prototipos interactivos extensos e incluso la integración con otras herramientas populares.
El aspecto colaborativo, la clave del enfoque centrado en el usuario
La aplicación está basada en la nube, lo que facilita el acceso a todos los documentos de trabajo desde cualquier lugar. Se puede acceder a Figma a través de navegadores web, en todos los principales sistemas operativos. El gran punto fuerte de Figma reside, ante todo, en un nivel eficaz de colaboración.
Colabora en tiempo real
Poder colaborar y comunicarse en tiempo real permite que las partes interesadas del proyecto sean más eficientes. Figma siempre ha querido fomentar esta colaboración. La herramienta no debe ser un obstáculo, sino todo lo contrario.
“Figma facilita que los equipos trabajen juntos, sin importar dónde se encuentren. »
La herramienta impulsa esta colaboración aún más lejos. Prueba de ello, por ejemplo, la reciente integración de una interfaz dedicada a los desarrolladores.
El desarrollador de moda.
Este módulo está integrado en la interfaz desde junio de 2023 (Beta) y luego se incluirá en una versión paga.
Figma también integra una pizarra colaborativa (Figjam) que permite realizar talleres, reuniones o recopilar información sobre los usuarios.
“Compartimos todo en una sola herramienta. »
Esta colaboración eficaz también resulta de la posibilidad de compartir trabajos fácilmente, realizar comentarios y modificaciones en vivo y utilizar un lenguaje común (CSS). O tener muchas personas trabajando en el mismo archivo sin errores ni limitaciones de participación.
Integre otras herramientas colaborativas en Figma
Figma ofrece la posibilidad de integrar otras herramientas de diseño, gestión de proyectos y desarrollo, como Bosquejo, Adobe XD, Jira, Slack, Photoshop o incluso ilustrador. Existe muy buena comunicación entre la suite Adobe y Figma. Por ejemplo: es posible copiar y pegar archivos de Adobe XD en Figma.
Varios complementos le permiten mejorar estos diseños o utilizar recursos puestos a disposición por otros diseñadores.
Finalmente, es posible exportar todos estos trabajos. El formato vectorial habilitado por la herramienta la hace interoperable.
Un enfoque centrado en el usuario
El otro punto fuerte de Figma reside en su enfoque centrado en el usuario, algo muy importante para los diseñadores. El equipo de Figma solicita comentarios a su comunidad, escucha y prueba funciones. Esto le permite tener alta velocidad y mejorar la experiencia del diseñador con cada actualización.
Complejidad escondida en la simplicidad
La estructura de la interfaz es fácil de entender. A primera vista, utilizar Figma es bastante sencillo.
Las características esenciales de Figma.
Figma te permite crear modelos, colaborar en tiempo real, hacer comentarios y anotaciones. Pero también para utilizar bibliotecas de componentes ya preparados o para crear un sistema de diseño desde cero. Los usuarios también pueden crear prototipos interactivos, lo que mejora la inmersión y permite realizar pruebas por parte de los usuarios.
Características esenciales
- Capas
- Herramientas de forma
- Agregar imágenes a archivos de diseño
- Máscaras
- Secciones
- Crear cuadrículas de diseño
- Diseño automático
- Creando diseños dinámicos
- Elementos de estilo
- Tipografía
- Explorar y aplicar fuentes
- Agregar enlaces al texto
- Componentes
- Propiedades de los componentes
- variables
- Bibliotecas
- Crear e insertar instancias de componentes
- Crear prototipos
- Opciones de desplazamiento y desplazamiento de prototipos
- Crea animaciones avanzadas
- Modos variables en prototipos.
- Múltiples acciones y lógica condicional.
- Usar expresiones en prototipos
- Usando variables en prototipos
- Desarrollador de moda
- Importar archivos a Figma
- Exportar desde Figma
- Comparte tu trabajo
Características avanzadas
Figma pone en primer plano los parámetros de diseño más utilizados. Pero siempre podemos profundizar en la granularidad de los parámetros. Éste es el caso, por ejemplo, de aspectos diseño en movimiento interacciones o detalles de una tipografía (la línea de base).
Ejemplo: una nueva función avanzada de creación de prototipos
Las variables le permiten crear prototipos complejos.
Meiso: capacidad avanzada de creación de prototipos
Ejemplo: uso de Figma para pruebas de usuario (nueva funcionalidad).
Por tanto, no se encuentran grandes dificultades al utilizar Figma porque su nivel de complejidad depende de las necesidades del usuario. No es necesario utilizar funciones complejas como primer paso para crear una maqueta de baja fidelidad y probar un concepto.
Una oferta adaptada y atenta a sus usuarios
Figma está muy cerca de sus usuarios. Se realizan pequeños cambios periódicamente en el software durante todo el año. Otra ventaja: los usuarios reciben asistencia durante estas actualizaciones anuales, que además son muy rápidas.
“Los editores de Figma han adoptado un enfoque de mejora continua. »
Ejemplo: la última actualización permite a los usuarios pasar el cursor sobre las tipografías en el Explorador de tipografías para ver cómo se ven directamente en su trabajo. Era una deficiencia que se había solucionado.
De esta forma, los usuarios de Figma se involucran y contribuyen al proceso de mejora continua. Los editores, al escuchar a sus usuarios, les piden periódicamente su opinión. Por tanto, la experiencia del usuario es óptima.
En Figma, los usuarios forman una comunidad activa.
Nota sobre el lado de la seguridad: hay una configuración de creación de contraseña, incluso con la versión profesional.
La experiencia de usuario de Florent Bachelier
Cómo uso Figma
yodiseño de experiencia de usuario (UX) predomina en mi profesión, en detrimento dediseño de interfaz de usuario (IU). La base es más bien la arquitectura de la información. Por lo tanto, primero utilizo las funcionalidades que me permiten crear modelos de baja fidelidad (colores en tonos de gris, jerarquía de tipografías, interacciones básicas) antes de avanzar en el proceso de diseño (UI más avanzada, prototipos).
Mis consejos para optimizar el diseño interactivo
Utilizo tres tipos de páginas en un archivo Figma (gratis):
- Página de modelos;
- Página de componentes;
- Página de bibliotecas de iconos.
Siempre debes diferenciar claramente entre componentes maestros y componentes usados (por ejemplo: instancias). Creo un lote de componentes o uso un lote ya creado. El objetivo es factorizar los elementos tanto como sea posible para evitar largos trabajos de modificación. La idea también es utilizar la lógica de trabajo de los desarrolladores para reducir barreras y promover la colaboración.
Produzco mis diseños sólo en diseño automático. Esta característica de diseño permite reposicionar y cambiar el tamaño de los elementos automáticamente. El trabajo es más riguroso, pero el diseño es más armonioso y, sobre todo, más fácilmente transponible a la producción.
Mi consejo para que los nuevos usuarios aprovechen al máximo Figma en su trabajo de diseño
- Favorezca funcionalidades simples para comenzar a modelar.
- A veces lo mejor es enemigo de lo bueno: ábrete a diferentes métodos para estimular la creatividad.
- Tener rigor desde el punto de vista del espaciado (márgenes). Utilice pautas que ya existen. Por ejemplo: utilice un múltiplo de 4 para el espaciado y por tanto tenga siempre un espaciado de 8 píxeles entre una imagen y el texto.
- Utilice el diseño automático siempre que sea posible cuando las maquetas sirvan como especificaciones para los desarrolladores.
Figma representa una herramienta esencial para el diseño de interfaces digitales gracias a sus numerosas características, el principio de colaboración en tiempo real y su enfoque centrado en el usuario que involucra a una comunidad activa en el proceso de mejora continua. Figma ofrece una plataforma flexible y colaborativa que evoluciona constantemente para satisfacer las expectativas de los diseñadores y profesionales del diseño de interfaces digitales.
