Por qué y cómo usamos Figma

En este artículo te explicamos por qué elegimos Figma como nuestra principal herramienta de diseño, cómo la utilizamos y cómo mejora nuestra productividad. Te mostramos las principales ventajas de la herramienta y proporcionamos ejemplos de estructura y organización que nos permiten establecer flujos de trabajo colaborativos para crear interfaces, conceptos, diagramas y activos digitales únicos para nuestros proyectos.

¿Qué es Figma?

Figma es una aplicación colaborativa cuyo principal objetivo es el diseño de interfaces de usuario. Cabe remarcar la colaboración en tiempo real y su arquitectura basada en la nube que permite a los usuarios colaborar en proyectos y trabajar prácticamente desde cualquier lugar.

Figma se diferencia de otras herramientas de diseño porque combina la accesibilidad de la web con la funcionalidad de una app nativa.

¿Por qué elegimos Figma?

Colaboración en tiempo real

En Figma puedes colaborar con tus compañeros sobre cualquier archivo en tiempo real, ver los cambios, añadir hilos de comentarios, intercambiar ideas sobre funciones, dividir el trabajo y mucho más.

Puedes ver el cursor de tus compañeros, llamar la atención para que te sigan o seguir el de otra persona. Es muy fácil comprobar y entender lo que tus colegas están haciendo y en qué están trabajando.

El modo de compartir es especialmente útil en los procesos de traspaso, cuando queremos compartir frames, páginas o elementos concretos en lugar de los archivos completos con clientes o gestores de proyecto.

Hilos de comentarios

En Figma puedes crear hilos de comentarios o discusiones de una forma bastante visual, y colocarlos exactamente donde son relevantes en el archivo de diseño, dirigiendo la atención donde se necesita.

Cualquiera puede añadir sus opiniones en esos hilos, mencionar otras cuentas y cerrar los hilos cuando estén resueltos.

Roles basados en permisos

Con su estructura basada en permisos, existen distintos niveles de acceso a los diseños compartidos.

• Como diseñador, con permiso de edición, puedes editar los diseños y participar en el proceso de diseño.
• Como desarrollador, con permiso de visualización, puedes acceder a información técnica que te permita implementar la solución adecuada.
• Como propietario o gestor del producto, con permiso de visualización, puedes comprobar todos los progresos, comentarios y discusiones entre otros usuarios (roles).

Hay que destacar el nuevo "Modo Desarrollador" que se ha lanzado recientemente y que actualmente funciona en modo beta. Este nuevo modo permite a los desarrolladores revisar e implementar diseños con una interfaz centrada en la inspección, y una sección “listo para el desarrollo” con el fin de dejar claro todo lo que puede ser desarrollado.

Historial de versiones

El historial de versiones de Figma guarda automáticamente todas las versiones de tus archivos de diseño mientras trabajas en ellos y te permite ver y recuperar las versiones anteriores cuando se necesite (según el plan contratado).

Es muy fácil acceder a las versiones anteriores haciendo clic en el botón "Historial de versiones" en la barra de herramientas, y luego puedes compararlas en paralelo, lo que permite apreciar fácilmente los cambios.

Además, puedes dejar notas sobre versiones específicas de tus diseños, lo que facilita la colaboración con tu equipo. Esto es especialmente útil cuando quieres compartir una versión "lista para el desarrollo" o "lista para la primera revisión" con una parte del equipo y continuar con el trabajo.

Características del sistema de diseño

Consideramos que los sistemas de diseño son importantes para crear interfaces de usuario robustas y consistentes en nuestros proyectos. Figma permite al equipo de diseño configurar la base de esos sistemas de diseño utilizando diferentes características.

En Figma, un conjunto de tokens de diseño y componentes se denomina biblioteca. Cada biblioteca consiste principalmente en dos tipos de elementos.

Figma te permite agrupar diferentes elementos de diseño y luego definir cualquiera de esos grupos como un componente para tu proyecto.

Crear un componente es tan fácil como dibujar una caja y añadirle propiedades y conectores. De este modo, creas un objeto reutilizable en tu biblioteca de diseño.

Utilizar un componente es tan fácil como arrastrarlo y soltarlo desde la sección de componentes locales o desde la página de activos digitales.

Por otra parte, Figma te permite definir propiedades de estilo para colores, tipografías, espaciado de cuadrículas... y luego reutilizarlas en cualquier elemento para fondos, bordes o fuentes.

Para utilizar una propiedad definida, sólo tienes que seleccionar el elemento al que deseas aplicar el estilo y, en la barra lateral de diseño, seleccionar la propiedad específica que deseas para el atributo concreto:

Merece la pena mencionar la nueva función de "variables" que se ha publicado recientemente en versión beta y que ya estamos empezando a introducir en nuestros flujos de trabajo. Esta funcionalidad nos permite definir variables numéricas, de color, cadenas de texto o booleanas que después podemos usar como tokens de diseño, haciendo que el sistema de diseño sean mucho mas fáciles de controlar, actualizar y mantener.

Aplicación cloud-native, solución multiplataforma

Figma es una app cloud-native, ejecuta y renderiza diseños complejos completamente en el navegador gracias al uso de tecnologías web y WASM (web assembly) en su motor de renderizado.

Esto permite disponer de una potente solución multiplataforma, eficaz y robusta, a la que cualquiera puede acceder desde cualquier dispositivo con conexión a Internet y un navegador.

Además, esto facilita la creación de aplicaciones nativas para distintos sistemas operativos de ordenador, fomentando su propia reutilización y haciendo que la solución final sea coherente entre las distintas aplicaciones y el navegador.

Una comunidad amplia y activa

La comunidad de Figma es amplia y activa, miles de diseñadores y desarrolladores comparten recursos, consejos y tutoriales sobre cómo utilizar la herramienta. Puedes conectar con otros diseñadores, compartir trabajo, recibir comentarios sobre tus diseños o simplemente ver cómo los demás utilizan Figma para obtener resultados consistentes.

Figma apoya e implementa con frecuencia las funciones más solicitadas por la comunidad, por lo que puedes solicitar funciones y tal vez verlas incorporadas en tu herramienta de diseño si se hacen populares.

Además, la comunidad promueve la popularidad, extensibilidad y mejora de la herramienta. Existe una gran biblioteca de plugins que ayudan a agilizar el flujo de trabajo y añaden nuevas funcionalidades, lo que hace que la herramienta sea aún más potente.

¿Cómo usamos Figma?

Confiamos en Figma para todos nuestros diseños de UI/UX complejos y prototipos interactivos, pero también lo introducimos en nuestro stack para muchos otros casos de uso como, por ejemplo: retrospectivas de sprint, wireframes conceptuales, presentaciones internas y externas, producción de activos digitales y gráficos, diagramas de flujo y arquitectura de software, sesiones internas de brainstorming y mucho más.

En 1xINTERNET utilizamos Figma como principal herramienta de diseño, es bastante potente pero requiere una buena estructura, organización y directrices para poder sacarle el máximo partido.

Organización de archivos

Nos encanta trabajar de forma sistemática, por eso tenemos normas y directrices que utilizamos en nuestros archivos y bibliotecas de diseño.

Nos esforzamos por definir buenas convenciones de nomenclatura, separando los proyectos de clientes con un número de identificación al principio y añadiendo después la denominación del archivo, algo como la biblioteca de interfaz de usuario o el archivo de diseño principal.

Cada archivo tiene siempre un marco inicial en miniatura con la información básica, como gestor de proyecto, año, título, una breve descripción y estado.

La estructura también es importante, nuestras bibliotecas de diseño se basan en un enfoque de diseño atómico, dividiendo los componentes entre átomos, moléculas y organismos para luego reutilizarlos en las secciones o plantillas (que coinciden con los párrafos de Drupal) y luego también en los ejemplos de páginas y regiones.

Por otro lado, los principales archivos de diseño siguen un enfoque "client first ", que se centra en la validación y el estado de los diseños con el cliente.

Como ya hemos mencionado, para organizar el sistema y separar las bibliotecas de componentes de los diseños listos para el cliente, dividimos los archivos y los reutilizamos.

Las librerías de fundamentos de diseño y componentes se gestionan de forma separada, manteniéndolos más cerca de la visión y la mentalidad del desarrollador mediante elementos de UI reusables. 

A partir de esta biblioteca, podemos diseñar varios sitios web, aplicaciones o productos para el mismo cliente, manteniendo siempre el mismo aspecto.

El proceso suele comenzar con la creación de los diseños del sitio web o la aplicación, al tiempo que se utiliza y actualiza la biblioteca de componentes. De este modo, tenemos un primer producto que mostrar al cliente y un punto de partida para que los desarrolladores empiecen a conceptualizar los detalles de implementación y el aspecto que tendrán los componentes.

Mejores prácticas y directrices

Añadimos un conjunto de mejores prácticas cuando se trata de utilizar todas esas fantásticas funciones que ofrece Figma.

Una de las más importantes es la función de control de versiones, fomentamos el uso de nombres significativos con su respectiva fecha cada vez que se añaden nuevos cambios o se inicia una nueva rama de diseño. De esta manera cualquier persona puede saber rápidamente la versión del diseño en el que está trabajando y los cambios que se han realizado desde la última versión, por lo que es fácil de entender y fácil de compartir exactamente lo que se supone que debe ser compartido.

Nuestro enfoque desarrolla este concepto dando prioridad a un sistema claro y comprensible. Nos centramos en respetar la estructura de archivos y las convenciones recomendadas, asegurándonos de que nuestras estructuras se basan en sistemas de traspaso seguros o en principios de diseño establecidos.

Como hemos explicado anteriormente, basamos nuestro trabajo en sistemas de diseño. Nos centramos en hacer que los elementos de diseño sean atómicos, desacoplados y reutilizables, del mismo modo que luego hacemos con la implementación basada en Web-Components y Tailwind CSS. Por esta razón, intentamos hacer uso de las características de componentes y bibliotecas de Figma, proporcionando elementos y propiedades reutilizables para los diseñadores y ayudando a comprender el desarrollo de diseños complejos o compuestos.

Por último, añadimos nuestra propia capa de utilidades, como encabezados de marco, procesos definidos y etiquetas de estado con colores significativos y convenciones de nomenclatura de páginas.

Clientes y gestores de proyectos

El flujo de trabajo entre diseñadores y otros colaboradores también es un punto importante a tener en cuenta. Hacemos hincapié en el uso de procesos de traspaso eficaces para garantizar transiciones fluidas entre las fases de diseño e implementación.

El gestor de proyectos o el cliente siempre reciben los diseños terminados. Gracias al modo de compartir, podemos centrarnos exactamente en lo que el cliente necesita ver y, utilizando la vista de prototipo, puede incluso interactuar con el diseño si es necesario.

Principalmente dividimos nuestro proceso en tres pasos, wireframing, designing y handovering, y luego añadimos una capa de estado:

Desarrolladores como inspectores del diseño

La estructura de los archivos y las mejores prácticas que seguimos facilitan el trabajo de los desarrolladores cuando tienen que revisar los diseños y actualizar sus componentes.

Figma ofrece formas sencillas de revisar y comprobar los tokens y elementos de diseño nombrados, señalando siempre cuándo se está reutilizando algo, para que los desarrolladores puedan utilizar directamente ese valor configurado en su implementación, sin tener que repetir o codificar nada nuevo.

Como se ha mencionado anteriormente, en los casos en los que el desarrollador tenga dudas, puede iniciar un nuevo hilo de comentarios directamente en el lugar específico donde se necesita claridad, mencionando a los diseñadores y esperando a recibir aclaraciones mientras trabaja en el resto del diseño.

Contamos con un potente flujo de colaboración entre desarrolladores y diseñadores en 1xINTERNET.

Estamos encantados de empezar a utilizar el mencionado "modo de desarrollador", que simplifica notablemente los procesos de revisión y desarrollo. Esta característica, combinada con la funcionalidad de "variables" y nuestro stack tecnológico construido sobre Tailwind, agiliza el trabajo de los desarrolladores al proporcionar tokens de diseño que pueden referenciarse y aplicarse directamente durante la implementación.

Plantillas e iteración

La iteración y la mejora siempre conducen a mejores productos, por eso mantenemos y mejoramos nuestra propia plantilla de diseño basándonos en el conocimiento de nuestros proyectos.

Además, esta plantilla de diseño se está sincronizando sistemáticamente con nuestro sistema de diseño, Quartz, que es otra plantilla que implementa todos los componentes y fundamentos que puede necesitar cualquier sitio web sencillo. Gracias a funciones como los estilos y las variables, podemos basar nuestra plantilla Figma y nuestro sistema de diseño en los mismos fundamentos.

Por último, ese sistema de diseño se utiliza para nuestra solución de experiencia digital, DXP, que ofrece la mejor experiencia Drupal posible con un conjunto totalmente integrado de web-componentes sincronizados con nuestra plantilla de diseño.

Partiendo desde el diseño y haciéndolo más fácil con Figma, este trabajo basado en el producto, da como resultado un proceso iterativo y de mejora continua que permite obtener mejores productos y mejores resultados en nuestros proyectos.