Prototipado de Apps 3 febrero, 2022

Figma es una herramienta de diseño basada en la nube, similar a Sketch en funcionalidad y características, pero con grandes diferencias que hacen que Figma sea mejor para la colaboración en equipo. Explicaremos cómo Figma simplifica el proceso de diseño y es más eficaz que otros programas para ayudar a los diseñadores y a los equipos de desarrollo de Apps y Webs a trabajar juntos de manera eficiente.

Figma funciona en cualquier plataforma

Figma funciona en cualquier sistema operativo que ejecute un navegador web. Macs, PCs con Windows, máquinas con Linux e incluso Chromebooks pueden utilizarse con Figma. Es la única herramienta de diseño de su tipo que hace esto, todos pueden seguir compartiendo, abriendo y editando archivos de Figma.

En muchas empresas, los diseñadores utilizan Macs y los desarrolladores, PCs con Windows. Figma ayuda a unir a estos grupos. La naturaleza universal de Figma también evita la molestia del PNG (donde las imágenes actualizadas van de un lado a otro entre las disciplinas del equipo de diseño). En Figma, no es necesario un mecanismo mediador para que el trabajo de diseño esté disponible para todos.

La colaboración en Figma es sencilla y familiar

Como Figma se basa en el navegador, los equipos pueden colaborar como lo harían en Google Docs. Las personas que ven y editan un archivo se muestran en la parte superior de la aplicación como avatares circulares. Cada persona tiene también un cursor con nombre, por lo que es fácil saber quién está haciendo qué. Si haces clic en el avatar de otra persona, podrás ver lo que está viendo en ese momento.

La colaboración de archivos en tiempo real ayuda a mitigar el “desvío del diseño”, que se define como la interpretación errónea o la desviación de un diseño acordado. El cambio de diseño suele producirse cuando se concibe una idea y se pone en práctica rápidamente mientras el proyecto está en marcha. Desgraciadamente, esto lleva a menudo a desviarse del diseño establecido, causando fricciones y re-trabajo.

Con Figma, un jefe de diseño puede comprobar lo que el equipo está diseñando en tiempo real con sólo abrir un archivo compartido. Si un diseñador malinterpreta de algún modo el informe o la historia de usuario, esta función permite al jefe de diseño intervenir, corregir el rumbo y ahorrar innumerables horas que de otro modo se habrían perdido. (En comparación, los equipos que utilizan Sketch no tienen ninguna forma inmediata de saber si los diseñadores se están desviando).

Figma utiliza Slack para la comunicación del equipo

Figma utiliza Slack como canal de comunicación. Cuando se crea un canal de Figma en Slack, cualquier comentario o edición de diseño que se haga en Figma se “desliza” hacia el equipo. Esta funcionalidad es crucial cuando se diseña en directo, ya que los cambios en un archivo Figma actualizarán todas las demás instancias en las que esté incrustado el archivo (un posible dolor de cabeza para los desarrolladores). Los cambios en una maqueta, justificados o no, se revisan inmediatamente, y el canal de retroalimentación es en vivo.

El uso compartido de Figma es sencillo y flexible

Figma también permite compartir, mediante permisos, cualquier archivo, página o frame (llamado mesa de trabajo en otras herramientas de diseño). Cuando se crea un enlace para compartir un frame en una página, la persona que haga clic en ese enlace abrirá una versión del navegador de Figma, y se cargará una vista ampliada del marco.

Esta forma de compartir selectivamente, desde el archivo hasta el frame, permite a los diseñadores, y desarrolladores compartir exactamente lo que se necesita en herramientas como Confluence o SharePoint.

Los archivos Figma integrados proporcionan una actualización en tiempo real

Figma también comparte fragmentos de código incrustado en vivo para pegar un iFrame en herramientas de terceros. Por ejemplo, si Confluence se utiliza para mostrar archivos de maquetas incrustados, esos archivos no se “actualizan” al guardar un archivo Figma: esos archivos incrustados SON el archivo Figma.

Si alguien realiza un cambio en la maqueta en Figma, ese cambio puede verse en directo en la maqueta incrustada en Confluence.

Antes de Figma, se utilizaban otras herramientas para facilitar el intercambio de maquetas y actualizaciones del diseño. El ciclo de iteración era una serie de actualizaciones de archivos de ida y vuelta, para que los equipos pudieran revisar e implementar el diseño actual.

Después de Figma, las herramientas de terceros ya no son necesarias (pero podrían utilizarse si se desea). Como Figma se encarga de la funcionalidad de las herramientas de terceros descritas anteriormente, sólo hay un paso en el proceso: pasar de los bocetos a Figma y todos los grupos tienen las últimas maquetas. No hay un “traspaso” en el sentido más estricto de la palabra.

Figma es genial para los comentarios de la revisión del diseño

Figma admite comentarios dentro de la aplicación tanto en el modo de diseño como en el de creación de prototipos, y el hilo de comentarios se rastrea en Slack y/o en el correo electrónico. No es necesario publicar archivos PNG ni realizar actualizaciones constantes para obtener comentarios de un equipo que utiliza una herramienta de terceros como InVision o Marvel.

Durante las revisiones de diseño, los diseñadores del equipo pueden discutir su trabajo en una pantalla grande, grabar comentarios y solucionar problemas, todo ello en Figma. Esta forma de feedback en directo no es posible con Sketch, que requiere subirlo a un servicio en la nube para obtener las aportaciones del equipo.

El traspaso de desarrolladores se facilita con Figma

Figma muestra fragmentos de código en cualquier frame u objeto seleccionado en formatos CSS, iOS o Android para que los desarrolladores los utilicen al revisar un archivo de diseño. Los componentes de diseño pueden ser inspeccionados por cualquier desarrollador en cualquier archivo que pueda ver. No es necesario utilizar una herramienta de terceros para obtener la información. Aun así, Figma tiene una integración total con Zeplin si los equipos quieren hacer algo más que una simple medición y visualización de CSS.

Los archivos de proyectos de Figma se encuentran en un solo lugar: en línea

Dado que Figma es una aplicación online, se encarga de la organización de los archivos mostrando los proyectos y sus archivos en una vista específica. Figma también admite varias páginas por archivo, como Sketch, para que los equipos ágiles puedan organizar sus proyectos de forma lógica.

Las API de Figma permiten la integración de herramientas de terceros

Figma dispone ahora de API para desarrolladores que permiten una verdadera integración con cualquier aplicación basada en el navegador. Las empresas lo utilizan para integrar en sus aplicaciones la visualización de archivos de diseño en tiempo real. Por ejemplo, Uber tiene grandes pantallas que muestran archivos de diseño “en directo” en su empresa. Los diseños se comparten y los comentarios son bienvenidos por cualquier persona de la empresa.

El software JIRA de Atlassian ha implementado un complemento de Figma para que los propietarios del producto, los desarrolladores y los ingenieros de calidad vean siempre la última versión de cualquier maqueta de los diseñadores.

Además, la API de Figma promete satisfacer las peticiones de los clientes de complementos de terceros y mejoras de las funciones que ya ofrece Sketch.

La creación de prototipos en Figma es sencilla e intuitiva

Mientras que Sketch ha añadido recientemente la creación de prototipos de mesa de trabajo a mesa de trabajo, Figma ha ido más allá al proporcionar transiciones entre frames. La sencilla función de creación de prototipos de Figma elimina la necesidad de utilizar otra herramienta que realice prototipos de estilo de presentación, como InVision o Marvel. Cuando todo lo que se necesita es una simple presentación con transiciones, no hay necesidad de exportar a herramientas de revisión.

Figma’s Team Libraries son ideales para los sistemas de diseño

Los sistemas de diseño se han convertido en una necesidad para muchas empresas, y se necesitan componentes (símbolos en Sketch e Illustrator) que sean reutilizables, escalables y “tokenizados” para su uso en las bibliotecas de diseños disponibles para los diseñadores de UX y los desarrolladores de front-end.

La frase a menudo utilizada “fuente única de verdad” encaja aquí: una vez que se crea una biblioteca de equipo Figma, cualquier persona con acceso a un proyecto puede utilizar instancias de los componentes en sus diseños y estar segura de que está trabajando con las últimas versiones.

El enfoque de Figma sobre las bibliotecas de componentes es sencillo y fácil de gestionar. Los diseñadores pueden crear archivos llenos de componentes o utilizar componentes en la página para organizar una biblioteca de patrones. Cada marco de una página de Figma se convierte en la sección de organización en la biblioteca del equipo (no hay necesidad de crear jerarquías como los de la biblioteca).

Una forma de organizar las bibliotecas es tener un proyecto dedicado exclusivamente a los componentes. Los archivos dentro de ese proyecto se pueden organizar como sea necesario, y las páginas dentro de esos archivos se pueden organizar en consecuencia.

Figma está construido para mejorar el trabajo en equipo de diseño

El uso de Figma durante cualquier periodo de tiempo demostrará las ventajas de esta herramienta de colaboración en vivo. Mantiene a los equipos centrados en sus tareas y fomenta la divulgación total, algo esencial cuando se construye un sistema de diseño para una variedad de disciplinas. Figma es fácil de usar para cualquiera en cualquier plataforma, y permite a los equipos compartir su trabajo y sus bibliotecas rápidamente.

En Doonamis utilizamos Figma como herramienta para la conceptualización y diseño de las Apps y Webs que desarrollamos siguiendo la metodología Design Thinking. Si quieres crear tu App o Web con un diseño atractivo, simple y usable, no dudes en contactarnos.

¿Interesado en nuestros servicios?
¡Pídenos un presupuesto!

Pedir presupuesto