Kit UI de login para Figma: acceso, errores y recuperación

Un kit UI de login para Figma resulta útil cuando permite adaptar una pantalla de acceso a un conjunto coherente de estados: entrada, envío, fallo y recuperación. Empieza por los datos que acepta el producto, conserva etiquetas visibles, define qué sucede al enviar y revisa el recorrido con textos largos y una anchura reducida. Elige el kit por la claridad con la que permite esos cambios.

Desarrollaremos un ejercicio propuesto para Fieldnote, un espacio ficticio de proyectos que permite acceder a una cuenta existente con correo y contraseña. Los nombres de estados, textos y procedimientos son recomendaciones editoriales. Un kit no aporta por sí solo autenticación funcional. La tarea consiste en aplicar un kit al acceso; el registro de cuentas y la arquitectura general de componentes tienen otro alcance.

Define el contrato de acceso

Escribe cuatro líneas junto al primer marco: identificador admitido, acción principal, destino tras el éxito y entrada a recuperación. En Fieldnote, el identificador es el correo, la acción es Iniciar sesión, el éxito abre el espacio de trabajo y ¿Has olvidado la contraseña? inicia la recuperación. Evita alternar usuario y correo si el servicio no acepta ambos. Otra persona debería explicar el recorrido sin abrir documentos adicionales.

Elige una pantalla candidata, duplícala en una página de pruebas y sustituye los textos antes de cambiar su apariencia. Utiliza una cuenta ficticia como reader@example.com. Retira del ejercicio las promociones y testimonios decorativos. Aquí interesa comprobar si una persona reconoce los campos, intenta acceder y encuentra un siguiente paso útil cuando el intento no funciona.

Crea un inventario con pantalla, desencadenante, mensaje y siguiente acción. Incluye entrada vacía, entrada completada, envío, respuesta fallida, solicitud de recuperación y confirmación. Es un mínimo propuesto para practicar, no una política exhaustiva de identidad. Añade acceso corporativo u otros métodos cuando el producto los admita. Un botón que promete un método inexistente plantea una cuestión pendiente de implementación.

Mantén visible ese alcance mientras eliges el kit. Un marco vacío bien resuelto representa solo una fila del inventario. Comprueba si sus elementos editables permiten introducir ayuda en dos líneas, una acción traducida y un mensaje general sin desvincular todos los componentes. Para ampliar después la revisión de integración, consulta la guía de kits React, formularios y estados.

Conserva las etiquetas al escribir

Coloca una etiqueta encima de cada campo del ejercicio: Correo electrónico y Contraseña. Introduce contenido realista e inspecciona el estado completado. La persona debe seguir sabiendo a qué corresponde cada valor. Un placeholder puede mostrar un formato, pero desaparece al escribir; evita que el ejercicio dependa de recordar una instrucción que ya no está visible.

El tutorial de etiquetas de WAI explica la relación entre etiqueta y control. Anota la asociación prevista para la implementación. En Figma, conserva nombre del campo, instrucción opcional y error como capas editables independientes. Así existe un lugar para cada explicación sin comprimir todos los textos dentro de la caja de entrada.

Añade un control propuesto de Mostrar contraseña junto al valor oculto y especifica sus dos acciones: Mostrar contraseña y Ocultar contraseña. Trátalo como un control interactivo durante la entrega. En este ejercicio, alternar la visibilidad conserva el valor introducido. Pide a otra persona que inspeccione ambos estados con una cadena larga inventada; nunca uses una contraseña real.

Anota username para el identificador por correo y current-password para la contraseña de una cuenta existente en la especificación de autocomplete. La referencia de autocomplete de MDN documenta estos valores. El contrato técnico es distinto de la etiqueta visible: un correo puede funcionar como nombre de usuario. Una captura no demuestra qué metadatos reciben el navegador o el gestor de contraseñas.

Separa envío y fallo

Da al envío su propio marco en lugar de sustituir todo el formulario por una animación genérica. En el ejercicio, el botón muestra Iniciando sesión y mantiene reconocible el contexto. Documenta si se admite otro envío durante la petición. El equipo de implementación debe definir tiempos de espera y respuestas; una transición de Figma no debería inventar garantías del servicio.

Prepara dos muestras de fallo. Si falta el identificador, puede aparecer un mensaje local como Introduce tu correo electrónico. Una respuesta del servicio necesita un tratamiento general y una siguiente acción útil. Deja que el equipo de identidad apruebe su redacción exacta. El diseño no debe deducir la existencia de una cuenta a partir de una respuesta simulada ni inventar una política de divulgación.

El tutorial de notificaciones de WAI recomienda comunicar claramente el resultado del envío y orientar sobre los errores. En nuestra muestra, coloca el mensaje cerca del contenido relacionado y reserva altura para dos líneas. Combina el énfasis visual con una explicación escrita. Pregunta después cómo se asociará y anunciará ese mensaje en el formulario implementado.

Para revisar de forma repetible, simula una respuesta fallida, modifica el identificador y vuelve a intentarlo. El archivo debe mostrar tanto la corrección como la siguiente acción. Esperar una respuesta y tener que corregir algo exigen decisiones distintas. Si cuesta mantener esa diferencia en el kit, continúa con variantes de Figma para estados de interfaz.

Completa la ruta de recuperación

Sigue ¿Has olvidado la contraseña? hasta una confirmación explícita. Define pantalla de solicitud, acción de envío y vuelta al acceso. Incluye un identificador editable para corregir errores antes de pedir otro mensaje. Mantén pendientes los intervalos de reenvío y las garantías de entrega hasta conocer las reglas del servicio de identidad real.

Una confirmación ficticia útil dice Revisa tu correo para continuar y ofrece volver al inicio de sesión. Márcala como propuesta pendiente de revisión. Su función es evitar que el recorrido termine en una marca de verificación sin explicación. Si el producto utiliza enlaces de recuperación, prepara también una muestra de enlace caducado e identifica a la persona responsable de ese estado.

La guía de autenticación accesible de WCAG contempla mecanismos de ayuda como gestores de contraseñas y copiar y pegar. Traslada un requisito breve a la entrega: permitir esos mecanismos en el acceso implementado. Unas casillas de código bien dibujadas no prueban su funcionamiento. Comprueba los controles reales en lugar de aceptar una animación como evidencia.

Centra la revisión en una pregunta observable: después de pedir ayuda, ¿puede la persona explicar el siguiente paso y regresar al acceso? No intentes verificar la recepción de un correo real desde una maqueta visual. Para preparar simulaciones pequeñas con alternativas deliberadas, consulta los ejemplos de prototipos para tareas de recuperación.

Adapta el formulario antes que la decoración

Parte de la composición ancha y crea un marco estrecho con el mismo contenido. Deja que el formulario determine la altura necesaria. En Fieldnote, la ilustración grande es secundaria; la propuesta estrecha retira ese panel y conserva juntos identificador, contraseña, acción principal y recuperación, con la misma secuencia de lectura.

La explicación de redistribución de WCAG describe una anchura equivalente a 320 píxeles CSS para contenido con desplazamiento vertical, con excepciones indicadas. Úsala como referencia de aceptación para la implementación. Un marco Figma de 320 no demuestra conformidad. En el diseño revisa saltos de línea y acciones; en el navegador comprueba el comportamiento en las condiciones requeridas.

Sustituye Sign in por Iniciar sesión y añade una explicación de recuperación más larga. Inspecciona botón, área de mensajes y separación entre contraseña y control adyacente. Prefiere un formulario más alto a texto recortado. Recomendamos variar primero el contenido y después la anchura: así el defecto tiene un desencadenante identificable en vez de varias causas simultáneas.

Define el foco de teclado visible como requisito de implementación con la referencia Focus Visible de WAI. Añade muestras para campo, control de visibilidad, botón y enlace de recuperación. Mantén identificable el control activo en el diseño y revisa después la navegación real. Un contorno dibujado no demuestra orden de tabulación ni operabilidad.

Inspecciona la pantalla real de acceso de EmviUI

La pantalla real de EmviUI que aparece debajo combina una tarjeta de acceso a la izquierda con una ilustración grande. Contiene Username, Password, Log in, Remember me, Reset y Register. Usa el kit Figma editable de EmviUI como punto de partida visual y adapta términos y estados al contrato del producto, sin copiar automáticamente todos sus controles.

En Fieldnote cambiamos Username por Correo electrónico porque ese es el identificador acordado. Decide si Remember me corresponde a la implementación antes de conservarlo. Revisa Reset como entrada a recuperación y mantén el registro como acción secundaria. La muestra enseña composición y controles visibles; no demuestra autenticación funcional, compatibilidad con gestores ni una evaluación completa de accesibilidad.

La imagen contiene contenido de demostración y promoción decorativa. No reutilices su testimonio como prueba sobre tu producto. Conserva la referencia original junto al marco adaptado para que otra persona distinga los cambios intencionados. Si hacen falta muchas reparaciones para cubrir los estados acordados, registra ese coste antes de elegir otro kit únicamente por sus colores.

Organiza los estados sin un laberinto de variantes

Separa la apariencia de cada campo del resultado general de la petición. Una contraseña puede tener foco mientras el formulario muestra una respuesta fallida. En nuestro ejercicio usamos un conjunto pequeño de estados de campo y otra muestra para el estado del formulario. Evitamos que una propiedad enorme intente describir todas las combinaciones de foco, visibilidad, contenido y respuesta.

La documentación de variantes de Figma explica cómo agrupar componentes similares y exponer propiedades. Aplica esa capacidad donde ayude a elegir una configuración significativa. Marca una instancia como referencia y otra como pantalla adaptada. Pide a otra persona que cambie el estado de un campo sin alterar el contenido de recuperación que lo rodea.

Termina con un registro compacto: identificador admitido, etiquetas, intención de autocomplete, estados de petición, responsable de errores, destino de recuperación y comprobaciones pendientes. El tutorial de validación de WAI distingue las comprobaciones del cliente de la validación del servidor. Asigna autenticación y validación al equipo de implementación: el kit aporta material de diseño editable y el recorrido implementado aporta evidencia del comportamiento.

Ensaya la aceptación antes de elegir el kit

Añade un registro breve de decisiones después del ensayo. Anota componente inicial, etiquetas modificadas, estados añadidos y comprobaciones pendientes en navegador. Por ejemplo, un kit que se adapte bien al contrato de correo pero necesite una confirmación de recuperación puede seguir siendo candidato con ese trabajo estimado. Compara el esfuerzo con otro kit utilizando el mismo inventario, en lugar de enfrentar capturas de portadas que resuelven tareas diferentes.

Propón una tarea de cinco minutos: abrir el acceso adaptado, señalar el identificador, enviar vacío, corregirlo, encontrar la respuesta fallida y entrar en recuperación. No expliques la pantalla mientras la otra persona trabaja. Registra el primer punto donde necesita ayuda y el componente o texto que provoca la incertidumbre.

Repite con el texto español y el marco estrecho; traslada las comprobaciones pendientes a una revisión de implementación en navegador. Acepta el ejercicio cuando cada estado tenga propósito y siguiente acción visibles, la traducción quepa y otra persona reproduzca la adaptación. Elige el kit que facilite entender y mantener el trabajo, dejando asignado cualquier comportamiento sin resolver.