En Logto, creemos en el poder de la colaboración y la transparencia. Por eso nos complace informarte que hemos hecho que nuestro diseño de experiencia de inicio de sesión en Figma sea de código abierto y esté disponible para que todos lo usen. Para acceder a los recursos de Figma: Explora la experiencia de inicio de sesión en Figma **¡Recuerda darle al botón de me gusta y compartir con tus amigos si lo encuentras útil!**

## Catálogo de recursos de diseño de la experiencia de inicio de sesión Este diseño incluye dos componentes principales: el flujo de autenticación (experiencia de inicio de sesión) y los estilos y componentes. Vamos a explorar cada uno en detalle. ### Flujo de autenticación Hemos elaborado meticulosamente varias combinaciones de escenarios de registro, inicio de sesión y primer inicio de sesión social tanto para plataformas móviles como PC. Cada escenario viene con su configuración de consola correspondiente, brindándote una visión completa del flujo de autenticación. Aquí tienes un adelanto de algunos de los escenarios: | | Registro | Inicio de sesión | Primer inicio de sesión social | | --------------------- | ------------------------------------------------- | ----------------------------------------------- | ---------------------------------------- | | Nombre de usuario | Nombre de usuario + Contraseña | Nombre de usuario + Contraseña | Inicio de sesión social + Configurar nombre de usuario | | Correo electrónico (más popular) | Correo electrónico + Código de verificación + Contraseña | Correo electrónico + Contraseña | Inicio de sesión social + Vincular correo electrónico | | Número de teléfono | Número de teléfono + Código de verificación | Número de teléfono + Código de verificación | Inicio de sesión social + Vincular número de teléfono | | Correo y teléfono mezclados | Correo/Teléfono + Código de verificación + Contraseña | Correo/Teléfono + Código de verificación/Contraseña | Inicio de sesión social + Vincular correo/teléfono | | Solo inicio de sesión social | / | / | Solo inicio de sesión social | | | Olvidé la contraseña | | --------------------- | ------------------------------------------------ | | Correo y teléfono mezclados | Restablecer contraseña verificando correo/teléfono | ![Diseño del flujo de autenticación](https://uploads.strapi.logto.io/1/authentication_flow_988bc7732a.webp) ## Estilos y componentes Nuestro diseño también incluye un conjunto de estilos y componentes simples y versátiles que facilitan la personalización de la interfaz de usuario general de tu experiencia de inicio de sesión. Aquí está lo que encontrarás: | | Introducción | | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Estilos de fuente | Hemos simplificado la clasificación de fuentes en categorías como cuerpo, etiqueta, título y encabezado. Se usan los mismos estilos de fuente para plataformas móviles y PC, asegurando consistencia y facilidad de uso. | | Estilos de color | Con la ayuda de paletas y tokens, puedes modificar fácilmente los colores del tema para que coincidan con tu marca. Nuestra paleta de colores se genera utilizando Google Material Design, y ofrece modos claro y oscuro, facilitando el entendimiento de tus diseñadores. | | Iconos | Hemos incluido una colección seleccionada de iconos funcionales que cubren una amplia gama de casos de uso que se pueden usar directamente o reemplazar fácilmente. Además, proporcionamos una variedad de iconos de redes sociales diseñados específicamente para tus botones de inicio de sesión social. | | Componentes | Hemos organizado componentes para plataformas tanto móviles como web, incluyendo Marca, Botón, Caja de verificación, Diálogo, Navegación, Toast, Campo de texto y Teclado (Móvil). | ![Estilos y componentes](https://uploads.strapi.logto.io/1/styles_and_components_d7cdf031d4.webp) ## Configuración simplificada ¡Pero eso no es todo! Con Logto, puedes omitir los detalles complicados arriba mencionados y confiar en nosotros para ofrecer una experiencia de integración perfecta. En Logto Console, puedes explorar configuraciones de métodos fácilmente y hacer que coincidan con la interfaz de usuario de tu marca. En minutos, tendrás una experiencia de inicio de sesión y registro personalizada que se alinea perfectamente con tu negocio. Prueba Logto Cloud hoy ![Consola Logto Cloud](https://uploads.strapi.logto.io/1/logto_cloud_console_febf6718e1.webp) ## ¿Por qué hicimos público nuestro diseño en Figma? Logto siempre se ha comprometido a proporcionar un servicio de código abierto, pero es posible que te preguntes por qué decidimos extender esta apertura también a nuestro diseño. ### Entendiendo y configurando la experiencia de inicio de sesión Queremos que Logto sea no solo amigable para los desarrolladores, sino también el mejor amigo de los PMs y Diseñadores. Creemos en fomentar una mejor colaboración a lo largo de todo el proceso de desarrollo, lo que lleva a una alta eficiencia, transparencia y confianza. - **Comprensión completa del flujo de autenticación**: Aunque tu producto podría usar solo un método específico de inicio de sesión o registro, como diseñador, querrás tener una visión holística. Este conocimiento te permite determinar el enfoque que mejor se adapta a tu negocio y maximizar las tasas de conversión. La lógica de autenticación no debería ser una entidad ambigua. Sin embargo, la correspondencia entre identificadores y métodos de autenticación no es simplemente una relación N\*N; implica diversas restricciones y decisiones de producto. Nuestro Figma te ayudará. Para aprender más sobre esto, puedes referirte al artículo “[Consideraciones de diseño para una experiencia de inicio de sesión perfecta](https://blog.logto.io/design-for-seamless-sie-1/)”. - **Diseña directamente tu UI**: Los diseñadores están acostumbrados a proporcionar soluciones completas en Figma. Si tu proyecto involucra diseñadores, este diseño de código abierto les ayudará a hacer coincidir rápidamente la identidad visual de tu marca. ### Potenciando la experiencia y servicios de Logto Mientras Logto se compromete a proporcionar un servicio en la nube eficiente, surgió de la comunidad de código abierto y planea permanecer públicamente transparente a largo plazo. - **Adopción del espíritu de código abierto**: Creemos que los beneficios derivados del código abierto también se pueden aplicar al diseño. Invitando a más atención sobre la experiencia del usuario a través de la apertura, el uso y la discusión dentro de la comunidad de código abierto, podemos mejorar continuamente la experiencia de autenticación. - **Proporcionando información sobre el diseño de producción a largo plazo**: Aunque la mayoría de nuestros esfuerzos están enfocados actualmente en desarrollar capacidades de Autenticación y Autorización, la experiencia de inicio de sesión que proporcionamos es altamente extensible y satisface la mayoría de tus necesidades. A través de comentarios y colaboración de código abierto, esperamos integrar mejor los procesos y configuraciones visuales de SIE en nuestros productos, reduciendo en última instancia el costo de la productización. ## Notas finales A medida que continuamos iterando sobre el producto Logto, mantendremos el diseño de Figma actualizado. Esperamos que utilices Logto para crear experiencias excepcionales en los primeros pasos de tus productos y dejes una impresión duradera en tu marca. Valoramos tu experiencia y comentarios, así que mantén abiertos los canales de comunicación. Esperamos tener noticias tuyas. Prueba Logto Cloud hoy