En la asignatura de Desarrollo de Interfaces Web (DIW) del Grado Superior de Desarrollo de Aplicaciones Web (DAW), dedicamos una gran parte del tiempo a la creación de mockups y wireframes con herramientas como Figma. Esto puede resultar útil desde una perspectiva de diseño, pero a menudo se pierde de vista el enfoque que realmente necesitaríamos como desarrolladores: aprender a usar estas herramientas para optimizar el flujo de trabajo de desarrollo, no solo para crear maquetas estáticas.
El problema: mucho diseño, poco desarrollo
Figma es una herramienta poderosa y versátil que brinda a los diseñadores la flexibilidad de crear prototipos, esqueletos y modelos. Sin embargo, en la asignatura de DIW, la atención se centra tanto en estos aspectos del diseño que a menudo se desvía de los intereses y necesidades de quienes estamos aprendiendo a convertirnos en desarrolladores web. Sí. Los modelos y wireframes son muy útiles en la fase de conceptualización de proyectos web, ya que nos permiten arreglar la estructura y el diseño visual de la página antes de continuar con la codificación. Sin embargo, la realidad es que los desarrolladores no siempre somos responsables de estas tareas de diseño.
Figma desde una perspectiva de desarrollo
En lugar de pasar largas horas perfeccionando un mockup, podría ser mucho más enriquecedor que en la asignatura se enseñara cómo integrar Figma con el flujo de trabajo de desarrollo. Por ejemplo:
Exportar assets optimizados para la web.
Utilizar Figma para generar especificaciones y estilos CSS.
Entender cómo leer los prototipos de manera eficiente para traducirlos a código.
Aprovechar plugins de Figma que nos faciliten la exportación de medidas, colores, y tipografías, de forma que podamos integrarlos directamente en nuestros archivos de estilos.
Estas habilidades son más cercanas a lo que un desarrollador hace día a día. Nos permitirían trabajar mejor en equipo con diseñadores, respetando sus visiones creativas, pero enfocándonos en lo que sabemos hacer mejor: el código.
La importancia de un enfoque equilibrado
No se trata de despreciar la creación de wireframes o mockups, sino de entender que el tiempo invertido en estas tareas debería tener un equilibrio adecuado. Al dedicar tantas horas a los detalles de diseño en Figma, se resta tiempo que podría usarse para aprender metodologías de desarrollo, mejorar nuestra competencia en JavaScript, o profundizar en la optimización del rendimiento web.
El desarrollo de interfaces no es solo diseño; es saber cómo hacer que esas interfaces sean rápidas, accesibles, y mantenibles. Necesitamos entender cómo Figma puede ser un aliado en el proceso de desarrollo, no solo una herramienta de diseño visual.
¿Qué deberíamos aprender realmente con Figma?
Colaboración con diseñadores
Aprender a trabajar con diseños OpenSource de creadores de la propia comunidad, sabiendo cómo interpretar su visión y traducirla en código. Otra muy buena idea sería crear un clon de una web real, como Netflix, Wikipedia, Facebook...
Generación de estilos
Usar Figma para extraer variables de diseño, como colores y tipografías, que se puedan utilizar en archivos CSS o preprocesadores como SASS.
Automatización del flujo de trabajo
Conocer plugins que permiten exportar diseño a código, generar CSS o incluso React components básicos.
Diseño adaptativo
Entender cómo los diseños en Figma pueden adaptarse a diferentes dispositivos, y cómo eso se traduce en nuestra estructura de CSS y media queries.
Un llamado a la actualización del plan de estudios
La asignatura de DIW tiene un potencial enorme para mejorar la formación de futuros desarrolladores, y una simple reorientación del enfoque en herramientas como Figma podría marcar una gran diferencia. Al incluir módulos que se enfoquen en cómo usar Figma desde una perspectiva de desarrollo, se estarían preparando profesionales mejor capacitados para enfrentar la realidad del mercado laboral.
Es fundamental que los planes de estudio se mantengan alineados con las necesidades del mercado y del rol que vamos a desempeñar. Saber hacer mockups está bien, pero saber cómo integrar esos diseños de forma eficiente en un sitio web es lo que verdaderamente nos permitirá destacar como desarrolladores y desenvolvernos bien en la maquetación web.
En conclusión, en DIW necesitamos un cambio de enfoque: menos horas puliendo mockups, y más tiempo aprendiendo a aprovechar Figma como desarrolladores. Esto no solo nos hará más eficientes, sino que nos preparará mejor para trabajar en proyectos reales, donde lo que importa es convertir las ideas en interfaces funcionales y atractivas para los usuarios.
Y algo que parece poco importante pero no lo es... ¡El uso de pseudoclases! :is(), :has(), :not().. Ya que serán el pan de cada día desde el inicio de las prácticas cuando toca hacer front!