Mini tutorial: aprovechar las funciones de Figma para todo el proceso de diseño

El mundo de las herramientas de diseño emergentes es increíblemente emocionante. Se están lanzando nuevos programas prometedores en rápida sucesión, pero hay uno en particular que se ha convertido lentamente en la mejor opción para equipos de diseño más grandes y distribuidos en su mayoría.

Figma tiene el potencial de respaldar todo el proceso de diseño de principio a fin. Los primeros bocetos, la recopilación de comentarios, la colaboración, los prototipos listos para probar y la transferencia del desarrollador están dentro de sus capacidades. Figma también simplifica el trabajo de los gerentes de producto y los líderes de diseño, así como de todas las demás partes interesadas.

Entonces, ¿qué diferencia a Figma de la competencia? Hay varios aspectos clave, pero todos se remontan al hecho de que Figma está basado en la web. Esto levantó muchas cejas cuando la herramienta se lanzó por primera vez, pero finalmente allanó el camino para la flexibilidad y las funcionalidades únicas de Figma.

¿Qué es fundamental para un proceso de diseño de productos fluido?

Si bien es cierto que cada equipo y proyecto puede tener un flujo de trabajo diferente, existen funciones y fases que son componentes esenciales del diseño y la gestión del producto. Figma cubre cada uno.

1. Accesibilidad y colaboración . Independientemente de las herramientas que utilice un equipo, debe haber una manera de trabajar juntos, presentar proyectos, recopilar comentarios y mantener informados a los interesados. Todas estas características están disponibles en Figma.
2. Flexibilidad para iterar y producir entregables . Figma es flexible y se puede usar como una pizarra colaborativa para esbozar ideas iniciales e iterar todo, desde estructuras alámbricas hasta maquetas de alta fidelidad.
3. Habilidad para construir prototipos y pruebas . ¿Estás diseñando una aplicación móvil? Cree y publique prototipos interactivos y pruébelos directamente en teléfonos inteligentes, todo desde Figma.
4. Establecer una única fuente de verdad . Figma es una excelente manera de definir sistemas de diseño de productos que residen completamente en línea. Es una única fuente de verdad por defecto. No más preguntas, "¿Es esta la última versión?"
5. Transferencia suave . Simplemente comparta un vínculo con los desarrolladores y tendrán acceso a toda la información necesaria para implementar el diseño: líneas rojas, medidas y recursos gráficos listos para exportar.
6. Versatilidad para ser personalizado y mejorado . La API de complementos de Figma permite a los equipos escribir sus propios complementos o aprovechar la comunidad de usuarios más amplia y ampliar la herramienta con nuevas funcionalidades.

1. Accesibilidad y colaboración

Haga que el equipo suba a bordo

Echemos un vistazo más de cerca a cómo Figma contribuye a las seis áreas clave cubiertas anteriormente. Es posible que los nuevos usuarios deseen crear una cuenta gratuita de Figma, configurar un equipo y ver cómo se inicia con Figma. Una vez que se crea un equipo, invite a los miembros del equipo y a las partes interesadas relevantes a unirse.

Hay tres niveles de acceso disponibles. Se explica por sí mismo, pero por lo general, los derechos de edición se otorgan al equipo de diseño y los derechos de visualización a todos los demás. Esto incluye a los desarrolladores y otras partes interesadas que necesitan poder seguir el proceso de diseño y proporcionar comentarios.

Hay opciones de uso compartido similares disponibles a nivel de equipo (como se muestra arriba), nivel de proyecto y nivel de archivo. Si no se especifican los niveles de acceso, se propagan del equipo al proyecto y del proyecto a los archivos.

Dado que Figma está disponible en el navegador, no importa cómo se invite a alguien o en qué sistema se encuentre. Siempre que el dispositivo y el navegador que utilizan cumplan con los requisitos mínimos, pueden ingresar directamente con un enlace y la interfaz cambia según tengan derechos de edición o visualización.

Incrustar un archivo de proyecto

Los archivos de proyecto de Figma se pueden incrustar en software de terceros. Por ejemplo, se puede usar un documento de Dropbox Paper compartido para presentar el estado actual de un proyecto.

Para incrustar archivos de proyecto, establezca la visibilidad del archivo en Cualquiera que tenga el enlace: puede ver , copiar el código de incrustación e incrustar el archivo de proyecto en cualquier software de terceros compatible con embed.ly.

Comentarios y revisiones

Otra funcionalidad clave para el proceso de diseño de productos es la capacidad de distribuir diseños, recopilar comentarios y administrar revisiones. Cualquier persona con un enlace de Figma puede ver la última versión y comentar directamente sobre el punto sobre el que desea dar su opinión.

Para etiquetar a los miembros del equipo, use el carácter @ y el sistema presentará una lista de nombres para elegir. Al hacerlo, se notifica a los miembros del equipo y, una vez que se han procesado los comentarios, las discusiones se pueden cerrar haciendo clic en Resolver .

Para mantener a los equipos alineados, hay una buena integración que puede publicar discusiones desde archivos Figma en un canal de Slack designado.

Colaboración real en tiempo real

Una de las funcionalidades más intrigantes de Figma es lo que llaman multijugador . Permite que varios miembros del equipo abran y trabajen en un archivo de diseño al mismo tiempo. Todos los que trabajan en el archivo son visibles en la parte superior derecha de la página, y sus avatares tienen nombre y se puede hacer clic en ellos.

Puede llevar algún tiempo apreciar lo que esto significa en términos prácticos. Si bien es poco probable que los diseñadores usen el modo multijugador para trabajar simultáneamente en la misma parte de un archivo, es increíblemente reconfortante no tener que preocuparse por el conflicto de versiones de archivos, especialmente para equipos distribuidos más grandes.

El modo multijugador es útil cuando se presenta de forma remota porque hace posible que todos los conectados al archivo sigan la ventana gráfica del presentador. También permite a los equipos eludir programas adicionales y usar Figma como una pizarra en línea (aunque las soluciones específicas, como Miro, en última instancia, pueden ser más adecuadas para el trabajo).

Con este fin, es recomendable crear componentes personalizados para replicar activos específicos como notas post-it virtuales o elementos de diagrama.

2. La flexibilidad para iterar y producir entregables

Una vez que los miembros del equipo han sido invitados y los bocetos iniciales están en marcha, Figma se puede usar para iterar. La razón principal por la que se creó Figma es el diseño de la interfaz: con la pizarra blanca terminada, los equipos pueden pasar a mapas de flujo y estructuras alámbricas. Una vez más, es inteligente crear bibliotecas de componentes que puedan reutilizarse para estas tareas. La colección de plantillas oficiales proporciona inspiración y arreglos de diseño para empezar.

3. La capacidad de construir prototipos y probar

Es bastante fácil crear prototipos interactivos con Figma. Cuando un archivo Figma está abierto con derechos de edición, es posible cambiar entre el modo de diseño y creación de prototipos. Una vez en modo prototipo, es posible hacer clic en un elemento para hacerlo interactivo, ya sea desde el escenario o desde la barra lateral de capas.

Con un elemento seleccionado en el modo Prototipo, aparece un pequeño círculo a un lado. Cuando se arrastra, aparecen líneas azules y se pueden soltar en la pantalla o en el estado para mostrar el resultado de la interacción.

Las transiciones comunes están disponibles en Figma, lo que facilita mucho la creación de prototipos de alta fidelidad. De hecho, el equipo de Figma lanzó recientemente una función inteligente de activación de animación y arrastre. El aspecto de animación inteligente interpola el movimiento de elementos similares, mientras que el gatillo de arrastre es un nuevo tipo de interacción. Ambos mejoran drásticamente la calidad de los prototipos interactivos.

Pruebas de usuario

Nuevamente, un enlace es todo lo que se necesita para distribuir prototipos de Figma, incluso para pruebas de usuarios. Al hacer clic en el pequeño icono de reproducción en la parte superior derecha, se inicia el prototipo y se genera una nueva URL. Es posible copiar la URL o usar el botón azul Compartir prototipo . Una vez que los usuarios abren el enlace, se les presenta un prototipo interactivo y pueden dejar comentarios si lo desean.

Pruebas en el móvil

Los diseños para dispositivos móviles se presentan con una maqueta de un dispositivo real que rodea al prototipo. Si se necesita más realismo para probar la interacción, es mejor descargar la aplicación Figma Mirror para realizar pruebas específicas del dispositivo.

4. Establecer una única fuente de verdad

Historial de versiones

¿No sería genial si los archivos del proyecto estuvieran siempre actualizados y constantemente respaldados? Esta funcionalidad está incluida en Figma por defecto. Cada archivo se guarda automáticamente mientras se trabaja en él y Figma crea una nueva entrada en el historial de versiones después de 30 minutos de inactividad. Se crea un registro de todas las versiones guardadas automáticamente y cada versión se puede restaurar si es necesario.

Por supuesto, el control de versiones automático no es la única opción para ahorrar trabajo. Es posible guardar una versión manualmente o editar una versión específica en el historial de versiones.

Sistemas de diseño y bibliotecas de componentes

Otro aspecto en el que brilla Figma es cómo permite a los diseñadores crear, organizar y distribuir bibliotecas de componentes. Cualquier archivo se puede publicar como una biblioteca, y cada color, estilo de texto, efecto, cuadrícula o componente está disponible para usarse en otros archivos de Figma.

Cuando se realizan cambios en cualquier elemento de una biblioteca, las ediciones se pueden publicar y propagar a los archivos que utilizan esos elementos. Los diseñadores que trabajan en estos archivos pueden decidir aceptar ediciones o no.

La capacidad de decidir cómo distribuir las bibliotecas, combinada con la opción de alternar la visibilidad o invisibilidad de los elementos de la biblioteca, hace que toda la experiencia sea fluida y poderosa.

Los componentes y las bibliotecas se pueden anidar para crear sistemas de diseño sofisticados donde todo está versionado y actualizado para todos los involucrados. Y todos los componentes se pueden anotar con comentarios.

5. Transferencia fluida

Entrega del desarrollador

Con Figma, los diseñadores y desarrolladores no necesitan una herramienta separada, como Zeplin, para administrar la transferencia. Simplemente pueden abrir archivos y cambiar al modo Código en la barra lateral derecha, incluso con acceso de solo lectura.

Cuando el modo Código está activo, la selección de un elemento en el escenario revelará toda la información relevante necesaria para la implementación, y toda la demás información relacionada con la posición del componente en relación con otros elementos será visible. Al igual que con soluciones similares, el código generado no debe copiarse y pegarse por completo, pero es útil tener un acceso tan fácil.

6. La versatilidad para ser personalizado y mejorado

API de Figma y complementos personalizados

La API y el sistema de complementos de Figma facilitan que una amplia gama de equipos de diseño y disciplinas personalicen el programa para sus necesidades específicas de proceso. La flexibilidad de Figma brinda a los usuarios la capacidad de interactuar mediante programación con la plataforma. Algunos ejemplos:

Uso de datos reales

Es inmensamente valioso poder usar datos reales en maquetas y prototipos, y Figma lo hace posible al permitir que se importe contenido de fuentes externas. Al aprovechar el contenido real, es posible realizar pruebas de estrés en los componentes del diseño, mantener las maquetas actualizadas e involucrar a equipos que no están relacionados con el diseño.

Un complemento llamado Google Sheets Sync es un ejemplo perfecto de lo que se puede hacer. Este complemento simplifica la integración de Google Sheets como una fuente para completar y sincronizar el contenido de los componentes en los archivos Figma.

Flujos de trabajo avanzados

La capacidad de albergar un sistema de diseño dentro de un programa de diseño de interfaz de usuario solo es valiosa si el sistema se implementa de manera consistente en las pantallas orientadas al cliente. Afortunadamente, existen API, complementos e integraciones de Figma que pueden ayudar.

El complemento Storybook sincroniza los archivos de Figma y muestra los componentes de diseño de Figma en un panel junto con los componentes implementados. Otro caso de uso interesante es Figma to React Converter, una mejora del flujo de trabajo que convierte los componentes de Figma en código.

Las características de Figma son ideales para todo el proceso de diseño

No existe un único programa de diseño que pueda manejar las necesidades de cada diseñador o problema de diseño, y eso es algo bueno. La competencia entre las herramientas de diseño es ventajosa para los diseñadores. Garantiza que las empresas que fabrican nuestras herramientas escuchen lo que necesitamos y nos proporcionen funciones actualizadas adecuadas para los trabajos que hacemos.

Dicho esto, Figma es una herramienta avanzada pero intuitiva que ha demostrado ser más que capaz de abordar todo el proceso de diseño digital. Tanto los diseñadores individuales como los equipos pueden beneficiarse de sus características únicas de colaboración e iteración, y donde el programa se queda corto, una gran selección de complementos llena el vacío.

• • •

Lectura adicional en el blog de diseño de Toptal:

• El poder de Figma como herramienta de diseño
• Figma vs. Sketch vs. Axure: una revisión basada en tareas
• Mini tutorial: trabajar con componentes de botones de Figma
• Domina tu oficio con estas herramientas UX superiores
• Diseño con precisión: una revisión de Adobe XD