Dos páginas de citas se ven ordenadas. Ambas tienen un campo de fecha y un botón Guardar. En la primera, un diálogo cambia la cita; en la segunda, se abre una página aparte. ¿Qué versión es mejor? Una captura de pantalla ayuda con los colores y los espacios. Solo muestra de forma limitada si las personas entienden el flujo.
El 15 de octubre de 2026, Figma abrió Code Layers como beta. Los prototipos compatibles pueden seguir desarrollándose con código y compararse en el lienzo de diseño compartido; el código existente puede incorporarse en las condiciones documentadas. Desde un punto de vista editorial, lo interesante es trabajar juntos en el comportamiento. Así, un prototipo se convierte en objeto de una decisión en lugar de limitarse a mostrar su resultado atractivo.
Primero la misma tarea, después interfaces distintas
Nuestro propio ejemplo es un evento de un club. La persona debe cambiar la fecha, leer la condición de participación y después guardar o cancelar. Ambas versiones reciben el mismo título, la misma fecha y la misma nota más larga. Si una versión mostrara solo un título provisional corto, la comparación ya estaría sesgada.
El diálogo mantiene la vista general de citas en segundo plano. Una página de edición aparte ofrece más espacio. Son decisiones de diseño distintas, no juicios de calidad. Lo interesante está en las transiciones: ¿dónde está la persona después de guardar? ¿Qué pasa con lo que ha empezado a introducir cuando cancela? ¿Qué información sigue visible durante el cambio?
Un modelo de estados hace que el comportamiento se pueda discutir
Primero describe el flujo sin sintaxis de programación. La cita es visible. Editar abre una entrada. Una entrada no válida lleva a una explicación y se conservan los datos válidos. Guardar muestra el estado confirmado. Cancelar vuelve al estado sin cambios. Son requisitos de nuestro ejemplo, no una promesa sobre funciones integradas de Figma.
View → Edit → Input
Input → valid → Save → Confirmation
Input → invalid → Hint + input kept
Input → Cancel → original viewCon este pequeño modelo, cada versión puede examinarse de forma específica. Quizá el diálogo se vea excelente pero pierda el texto de ayuda cuando se produce un error. Quizá la página aparte sea menos elegante pero haga más fácil entender el camino de vuelta. La valoración trata entonces del comportamiento observable, no de una preferencia general por los diálogos.
Los comentarios necesitan un punto de referencia compartido
Un comentario útil dice: «Después de cancelar, no sabía si se había guardado mi nueva fecha». Nombra el lugar, la acción y la incertidumbre. «No se siente lo bastante moderno», en cambio, todavía no plantea una pregunta sobre la que alguien pueda trabajar. Cuando los borradores y los comentarios están en el mismo lienzo, puede conservarse el vínculo con la versión que se está viendo.
Para cada cambio, anota qué incertidumbre debe eliminar. Por ejemplo, cambia primero la confirmación, en lugar de cambiar a la vez la tipografía, los colores y la navegación. Así es más fácil entender por qué una segunda versión transmite algo distinto. No es un estudio de usabilidad controlado, pero sí una disciplina de trabajo sensata para la fase de diseño.
La decisión es transferible; el código no lo es automáticamente
Al final debería haber una breve nota de traspaso: la versión preferida, la tarea que respalda, los estados relevantes y las preguntas pendientes. Un borrador interactivo con datos de ejemplo todavía no es una plataforma de reservas real. El inicio de sesión, los datos almacenados y los permisos reales tienen que funcionar por separado en una aplicación.
Para un pequeño añadido del lado del cliente en una página de KENJTEC, la decisión puede implementarse después con tu propio HTML, CSS y JavaScript. El KENJTEC WebSiteBuilder ai ofrece para ello un modo de desarrollador, con una vista previa aislada y su propio paso de publicación del código. Tú mismo transfieres el componente correspondiente; esto no implica una importación desde Figma ni alojamiento para cualquier aplicación que elijas.
Según el estado documentado, Code Layers sigue siendo una beta. La disponibilidad, los proyectos de partida compatibles y las condiciones deberían comprobarse de nuevo antes de cualquier guía práctica concreta. Aun así, el método se sostiene con independencia de la herramienta: no compares solo dos pantallas atractivas. Compara dos respuestas trazables a la misma pregunta sobre cómo se usa algo.
Fuentes y estado
Investigación y documentación a fecha de 25 de octubre de 2026. Diseña en equipo con code layers en el lienzo.
