Por qué dejé Figma. ¿Cansado del diseño de carga frontal? Esto es… | Shamsi Brinn | octubre 2022

¿Cansado del diseño de carga frontal? Esto es lo que hago en su lugar.

Colección de letreros de papel de colores con la inscripción
Foto de JACQUELINE BRANDWAYN en Unsplash

Primero, esta no es una publicación contra Figma. Necesitamos muchas herramientas y procesos para muchos diseñadores y tareas de diseño. Esta publicación describe por qué ya no uso Figma y qué proceso funcionó mejor para mí.

Figma es un programa ambicioso y genial: mejora la colaboración y hace que la transferencia de proyectos sea más precisa que las herramientas anteriores.

Mi trabajo, como el tuyo, es un tipo especial de UX y diseño: hago desarrollo web; Nuestro equipo de programación trabaja en sprints ágiles de dos semanas; somos una organización sin fines de lucro; y así. En cuanto a mí en mi función actual, y a pesar de sus características geniales, descubrí que Figma crea ineficiencias y malentendidos en el camino de nuestro equipo hacia un producto que funcione.

A continuación, hablaré sobre las desventajas de Figma que encontramos, el flujo de trabajo alternativo y sus ventajas.

  1. En Figma, la transferencia está incluida en el proceso. Como se describe en su propio sitio web, Figma puede “crear componentes receptivos que se ajustan al código, lo que hace que la entrega del desarrollador sea más fluida”. más cerca del código lejos de ser código, y transmisión más suave todavía la transmisión. Un ejemplo de esto es la falta de puntos de interrupción de Figma: cualquier punto de interrupción que desee mostrar debe crearse manualmente en Figma y luego volver a renderizarse en el código. Los pases innecesarios no son un uso eficiente del tiempo de diseño.
  2. Figma no puede contribuir directamente a los objetivos de nuestro equipo ágil de construir, probar y mejorar a través de iteraciones incrementales de productos por una sencilla razón: crea un artefacto de diseño y no contribuye al producto en sí.
  3. Todo el mundo puede entender un sitio web, pero no una maqueta. Las impresiones de Figma también requieren descripciones adjuntas y documentación de la intención para que todas las partes puedan entenderlas o corremos el riesgo de crear una deuda de comprensión.
  4. La precarga del diseño de Figma se trata más de procesos en cascada. No me importa la cascada, es un gran modelo cuando las especificaciones se conocen por adelantado y es poco probable que cambie… pero ese no es el caso de ningún proyecto de software en el que haya trabajado.
  5. Los programadores que confían en la tecnología de asistencia no participan en el proceso hasta que Figma se haya traducido al código. proyectos figma nacido inaccesibleque es lo contrario de lo que estamos buscando. Los prototipos accesibles de Figma están en fase de prueba beta, pero incluso cuando se completen en BEST, proporcionarán una versión muy limitada de la accesibilidad que ya ofrece HTML.
  6. Otra consecuencia del proceso de diseño fragmentado es que los programadores deben tener lista la papa caliente de la accesibilidad. Los diseñadores también deben participar activamente en la creación y prueba de maquetas accesibles, y el proyecto es más débil para fragmentar la creación y prueba del producto desde su diseño.
  7. Finalmente, Figma es una herramienta de diseño visual, y aunque no dicta resultados perfectos, ciertamente los alienta. Un hermoso artefacto que aparece demasiado pronto desvía la atención de los requisitos y la usabilidad hacia el diseño. El diseño es una poderosa herramienta de persuasión, pero la aceptación demasiado rápida mata el descubrimiento.

Mi proceso alternativo es trabajar directamente sobre prototipos funcionales escritos en HTML. Algunos diseñadores se ponen realmente nerviosos en este punto, pero tengan un poco más de paciencia conmigo: los diseñadores tenemos una larga historia de enfatizar demasiado la complejidad de la codificación, y también tenemos constantemente más oportunidades para hacer que el código sea accesible. No hay opciones de código como Webflow o Quixi que puedan satisfacer sus necesidades. O, si desea un control total, hay muchas bibliotecas de componentes de interfaz de usuario y marcos CSS que facilitan mucho la creación de prototipos front-end.

En mi equipo, usamos marcos CSS/HTML y bibliotecas de componentes para la creación rápida de prototipos, y casi se convierte en un ejercicio de copiar y pegar. Esto no es difícil; de hecho, es tan simple que a menudo me siento como un estafador, quizás porque mi formación en diseño me ha enseñado que codificar sitios web al mismo tiempo difícil tanto como el trabajo de otra persona. Pero estoy ignorando ese voto porque la creación de prototipos al nivel que necesito es factible, crea un código utilizable y acelera los objetivos de nuestro proyecto.

  1. La mayor ventaja es que un prototipo funcional habla inmediatamente el idioma de todos: ingenieros, diseñadores, usuarios finales, todos, todos entendemos las funciones web que se presentan en el navegador. Utiliza modelos mentales que ya compartimos. Como nos anima Teresa Torres, debemos constantemente “visualizar nuestro pensamiento” de manera “que sea fácil de entender para otras personas de su equipo”. No conozco nada más fácil de entender para un grupo diverso de personas que un prototipo funcional en HTML.
  2. Trabajar en un prototipo funcional reduce el riesgo de entrega porque el prototipo es el producto. Por supuesto, en algún momento mi código choca contra una pared (y a menudo con bastante rapidez), y luego llega el momento de los desarrolladores. El prototipo simplifica enormemente esta transición. Actúa como una especificación viva, aclara la intención de múltiples maneras y es un único punto de referencia para todas las partes.
  3. Además, ningún diseño puede pensar en todo antes de tiempo. Como dice Raj Naggapan, “Tener que pivotar en función de los comentarios de una demostración en ejecución no es una idea descabellada”. Con un prototipo, los diseñadores e ingenieros pueden trabajar en los requisitos de cambio a medida que ocurren y en un entorno compartido sin necesidad de transferencias adicionales.
  4. La capacidad de respuesta y la accesibilidad se pueden probar en un entorno nativo y con herramientas estándar desde las primeras etapas de un proyecto. La accesibilidad no es una ocurrencia tardía forzada debido al desarrollo de herramientas web no nativas; en cambio, se convierte en una parte natural de cada paso de construcción del proyecto. Y si tiene la suerte de tener un ingeniero en su equipo que depende de la tecnología de asistencia, su participación no tardará mucho. A diferencia de trabajar en Figma, podemos asegurarnos de que nuestro producto esté disponible incluso en las primeras etapas.
  5. La única constante en la que podemos confiar es que los proyectos cambian y se transforman, que es lo que la programación ágil se esfuerza por lograr. A través de este proceso, el diseño también puede ser iterado e informado por las pruebas continuas de los usuarios que puede traer esta forma de trabajo.

En mi equipo de productos, el diseño de carga frontal tiene demasiados inconvenientes. Nos hemos alejado del proceso de diseño basado en Figma a favor de la creación rápida de prototipos en HTML/CSS utilizando marcos y bibliotecas de interfaz de usuario. Aquí hay un estudio de caso reciente que escribí, solo un ejemplo de cómo podría ser este proceso. Para mí, la creación de prototipos funcionales iterativos hace que la UX y el diseño sean demasiado agradables y eficientes para volver a la forma de trabajar precargada y dependiente del equipo.

Previous post ¡Solo el 2% puede detectar un gato escondido en un armario en 15 segundos!
Next post Patrones hostiles en los mensajes de error

Deja una respuesta