El poder de Figma como herramienta de diseño

Figma es una herramienta de diseño basada en la nube que es similar a Sketch en funcionalidad y características, pero con grandes diferencias que hacen que Figma sea mejor para la colaboración en equipo. Para aquellos escépticos de tales afirmaciones, explicaremos cómo Figma simplifica el proceso de diseño y es más efectivo que otros programas para ayudar a los diseñadores y equipos a trabajar juntos de manera eficiente.

Miremos más de cerca.

Figma funciona en cualquier plataforma

Figma funciona en cualquier sistema operativo que ejecute un navegador web. Mac, PC con Windows, máquinas con Linux e incluso Chromebooks se pueden usar con Figma. Es la única herramienta de diseño de su tipo que hace esto, y en las tiendas que usan hardware que ejecuta diferentes sistemas operativos, todos pueden compartir, abrir y editar archivos Figma.

En muchas organizaciones, los diseñadores usan Mac y los desarrolladores usan PC con Windows. Figma ayuda a unir a estos grupos. La naturaleza universal de Figma también evita la molestia de PNG-pong (donde las imágenes actualizadas se intercambian entre las disciplinas del equipo de diseño). En Figma, no hay necesidad de un mecanismo de mediación para que el trabajo de diseño esté disponible para todos.

La colaboración en Figma es simple y familiar

Debido a que 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 también tiene un cursor con nombre, por lo que rastrear quién está haciendo qué es fácil. Al hacer clic en el avatar de otra persona, se amplía lo que está viendo en ese momento.

La colaboración de archivos en tiempo real ayuda a mitigar la "desviación del diseño", definida como malinterpretar o desviarse de un diseño acordado. La desviación del diseño generalmente ocurre cuando una idea se concibe y se implementa rápidamente mientras un proyecto está en progreso. Desafortunadamente, esto a menudo lleva a desviarse del diseño establecido, causando fricción y reelaboración.

Usando Figma, un líder de diseño puede registrarse para ver lo que el equipo está diseñando en tiempo real simplemente abriendo un archivo compartido. Si un diseñador de alguna manera malinterpreta el resumen o la historia del usuario, esta función permite que el responsable del diseño intervenga, corrija el rumbo y ahorre incontables horas que de otro modo se habrían desperdiciado. (En comparación, los equipos que usan Sketch no tienen una forma inmediata de saber si los diseñadores se están desviando).

Nota al margen: a algunos diseñadores no les gusta que los "espíen" cuando están trabajando, por lo que depende del líder de diseño explicar los beneficios. En general, la mayoría de los diseñadores ven rápidamente el valor de una función de este tipo y se adaptan fácilmente a trabajar en un entorno compartido.

Figma usa Slack para la comunicación del equipo

Figma usa Slack como su canal de comunicación. Cuando se crea un canal de Figma en Slack, todos los comentarios o ediciones de diseño realizados en Figma se "aflojan" para el equipo. Esta funcionalidad es crucial cuando se diseña en vivo porque los cambios en un archivo Figma actualizarán todas las demás instancias donde el archivo está incrustado (un dolor de cabeza potencial para los desarrolladores). Los cambios en una maqueta, garantizados o no, se examinan de inmediato y el canal de comentarios está activo.

Compartir Figma es sencillo y flexible

Figma también permite compartir cualquier archivo, página o marco (llamado mesa de trabajo en otras herramientas de diseño) basado en permisos. Cuando se crea un enlace para compartir en un marco de 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 uso compartido selectivo, desde el archivo hasta el marco, permite a los diseñadores, propietarios de productos y desarrolladores compartir exactamente lo que se necesita en las herramientas de seguimiento de errores y el software comunitario como Confluence o SharePoint.

Los archivos Figma integrados brindan actualizaciones en tiempo real

Figma también comparte fragmentos de código de inserción en vivo para pegar un iFrame en herramientas de terceros. Por ejemplo, si se usa Confluence 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 en Figma realiza un cambio en la maqueta, ese cambio se puede ver en vivo en la maqueta de Confluence incrustada. (Puede leer más sobre la integración de Figma y Confluence aquí).

El efecto de esta función en el proceso de UX se ilustra en el siguiente diagrama:

Antes de Figma, se usaban varias otras herramientas para facilitar el intercambio de maquetas y actualizaciones de diseño. El ciclo de iteración fue 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 se pueden usar si se desea). Dado que Figma maneja la funcionalidad de las herramientas de terceros descritas anteriormente, solo hay un paso en el proceso: pasar de bocetos a Figma y todos los grupos tienen las maquetas más recientes. No hay “entrega” en el sentido más estricto de la palabra.

Figma es ideal para comentarios de revisión de diseño

Figma admite comentarios en 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 correo electrónico. No es necesario publicar archivos PNG ni realizar actualizaciones constantes para recibir 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, registrar comentarios y solucionar problemas, todo en Figma. Esta forma de retroalimentación en vivo no es posible con Sketch, que requiere carga a un servicio en la nube para obtener información del equipo.

El traspaso del desarrollador se facilita con Figma

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

Los archivos del proyecto Figma residen en un solo lugar: en línea

Dado que Figma es una aplicación en línea, maneja la organización de archivos al mostrar proyectos y sus archivos en una vista dedicada. Figma también admite varias páginas por archivo, como Sketch, para que los equipos ágiles puedan organizar sus proyectos de forma lógica:

• Cree un proyecto para el tema principal.
• Cree un archivo para una característica épica o grande.
• Cree páginas en ese archivo para cada historia de usuario.

Este es solo un método de organización de archivos que podría hacerse más o menos granular dependiendo de lo que exija el proceso.

Las API de Figma proporcionan integración de herramientas de terceros

Figma ahora tiene API de desarrollador para permitir una verdadera integración con cualquier aplicación basada en navegador. Las empresas están utilizando esto para integrar visualizaciones en tiempo real de archivos de diseño en sus aplicaciones. Por ejemplo, Uber tiene pantallas grandes que muestran archivos de diseño "en vivo" alrededor de su empresa. Los diseños se comparten y se agradecen los comentarios de cualquier miembro de la empresa.

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

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

El control de versiones de archivos es automático o bajo demanda

Cualquier incertidumbre en torno a la actualización de archivos en vivo se mitiga aún más con el sistema de control de versiones integrado de Figma. En cualquier momento, un diseñador puede crear una versión con nombre y una descripción de un archivo Figma; esto se puede hacer inmediatamente después de realizar los cambios acordados en un diseño.

El archivo en vivo en el entorno compartido no se verá afectado hasta que los cambios se confirmen deliberadamente en la versión original. También es posible restaurar cualquier versión guardada automáticamente para crear un duplicado o sobrescribir el original.

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

Si bien Sketch agregó recientemente una mesa de trabajo a la creación de prototipos de mesa de trabajo, Figma ha ido más allá al proporcionar transiciones entre fotogramas. La función de creación de prototipos simple de Figma elimina la necesidad de otra herramienta que haga prototipos de estilo de presentación de diapositivas, como InVision o Marvel. Cuando todo lo que se necesita es una presentación simple con transiciones, no es necesario exportar a herramientas de revisión.

Los prototipos de Figma se pueden distribuir como los archivos de diseño de Figma; cualquier persona con permiso de enlace puede ver y comentar un prototipo y, nuevamente, esa retroalimentación se captura en el panel de comentarios de la herramienta y se registra en Slack. Los desarrolladores pueden ver el flujo de trabajo del diseño, dejar @mensajes directos para los diseñadores y obtener medidas y atributos CSS desde dentro del prototipo.

Las bibliotecas de equipo de Figma son ideales para sistemas de diseño

Los sistemas de diseño se han convertido en una necesidad para muchas empresas, y existe la necesidad de componentes (símbolos en Sketch e Illustrator) que sean reutilizables, escalables y "tokenizados" para usar en las bibliotecas de patrones disponibles para los diseñadores de UX y los desarrolladores front-end.

La frase de uso frecuente "fuente única de verdad" encaja aquí: una vez que se crea una biblioteca de equipo de Figma, cualquier persona con acceso a un proyecto puede usar instancias de los componentes en sus diseños y asegurarse de que están trabajando con las últimas versiones.

El enfoque de Figma para las bibliotecas de componentes es simple y fácil de administrar. Los diseñadores pueden crear archivos llenos de componentes o usar componentes en la página para organizar una biblioteca de patrones. Cada cuadro en una página de Figma se convierte en la sección organizativa en la biblioteca del equipo (no hay necesidad de crear jerarquías\como\ésta).

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

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

El uso de Figma durante cualquier período de tiempo demostrará los beneficios de esta herramienta de colaboración en vivo. Mantiene a los equipos concentrados en la tarea y fomenta la divulgación completa, algo esencial cuando se construye un sistema de diseño para una variedad de disciplinas. Figma es fácil de usar para cualquier persona en cualquier plataforma y permite que los equipos compartan su trabajo y bibliotecas rápidamente.

Los expertos en diseño que usan Figma después de hacer el cambio de Sketch (los archivos de Sketch se pueden importar con paridad en Figma) no están decepcionados:

… transforma por completo la forma en que puede trabajar con sus colegas y clientes: agilice el diseño colaborativo con Figma

Figma unió lo mejor de todo en el mundo de las herramientas de diseño de interfaz de usuario en los últimos años: por qué su equipo de diseño debería considerar cambiarse a Figma

Durante el último año, he estado usando Figma para mi proceso de diseño de UI/UX y me ha ahorrado horas de trabajo. Realmente transformó mi flujo de trabajo de diseño: cómo optimizar su flujo de trabajo de UI/UX con Figma

El tiempo que paso en Figma suele ser la parte más agradable y productiva de mi día: Figma está transformando todo mi flujo de trabajo, ¡y es increíble!

• • •

Otras lecturas:

• Domina tu oficio con estas herramientas UX superiores
• Optimice el diseño colaborativo con Figma
• Use Craft by InVision para agilizar la colaboración en equipo
• Muerte al Wireframe. ¡Directo a la alta fidelidad!
• Conviértase en un diseñador de clase mundial haciendo del globo terráqueo su oficina