Introducción
En RoomsyDevs, el diseño empieza mucho antes de que algo se vea. Lo que no aparece en pantalla —las validaciones, los flujos, las decisiones técnicas— también forma parte del proceso. Usamos Figma como herramienta para representar ese trabajo invisible: estructuras que responden a necesidades reales, componentes que se justifican, y pantallas que pueden ser defendidas con argumentos sólidos.
Esta entrada surge mientras trabajamos en el diseño de la web principal de RoomsyDevs, un proyecto que reúne distintas vistas funcionales como formularios de registro, galerías de hospedajes y secciones de descripción. A lo largo del proceso, fuimos tomando decisiones que no siempre son visibles en el resultado final, pero que sostienen la lógica y la claridad de cada pantalla.
1. Diseñar desde la documentación
Antes de abrir Figma, trabajamos sobre flujos técnicos, requerimientos funcionales y estructuras que ya están pensadas desde el código. No diseñamos desde cero: diseñamos desde lo que necesita ser representado.
Cada input, cada botón, cada card tiene una lógica detrás. En nuestros formularios, por ejemplo, cada campo está pensado con su validación nativa, su mensaje de error y su comportamiento en distintos estados. Eso se traduce visualmente en el wireframe, y se documenta para que pueda ser comprendido por todo el equipo.
2. Claridad visual como decisión técnica
El diseño visual no es decorativo: es funcional. Usamos jerarquías claras, etiquetas comprensibles, contrastes adecuados y foco visible. Cada elemento está ubicado para facilitar la lectura, la interacción y la comprensión.
Además, incluimos notas explicativas dentro del archivo Figma. No son solo para nosotros: son para quienes recorren el diseño después. Porque una pantalla bien diseñada también puede enseñar cómo funciona el sistema.
3. Componentes que escalan y se explican
Construimos componentes reutilizables con variantes, auto layout y constraints. Pero no basta con que funcionen: tienen que poder explicarse. Por eso documentamos cada propiedad, cada estado y cada contexto de uso.
En la galería de hospedajes, por ejemplo, usamos un componente card que incluye imagen, título, descripción y botón. Está pensado para adaptarse a distintos contenidos sin perder estructura ni intención. Y está documentado para que cualquier persona del equipo pueda entender cómo se usa y por qué.
4. Diseño que se sostiene en equipo
Nos gusta trabajar con estructuras que puedan ser comprendidas por distintos perfiles: quienes desarrollan, quienes documentan, quienes revisan y quienes validan. Por eso, cada archivo en Figma está pensado para ser claro, recorrible y coherente.
En los diseños por ejemplo de formularios de registro de hospedajes turísticos, incluimos anotaciones visuales, agrupaciones lógicas y nomenclaturas consistentes. Cada pantalla tiene una estructura que permite entender qué hace cada componente, cómo se relaciona con el flujo general, y qué validaciones contempla.
No diseñamos para que se vea bien solamente: diseñamos para que se pueda seguir, mantener y escalar. Lo que no se ve —la lógica detrás del layout, los estados contemplados, las decisiones de accesibilidad— también forma parte del diseño.
Cierre
Diseñar no es solo decidir colores o ubicar botones. Es pensar cómo se estructura la información, cómo se valida lo que el usuario ingresa, y cómo se comunica cada decisión. En ROOMSYDEVS, usamos Figma para representar ese trabajo técnico que muchas veces no se ve, pero que sostiene todo lo demás. Porque detrás de cada pantalla hay una arquitectura pensada, una lógica funcional y una forma clara de explicarla.
