De código a tela: Logto torna o design da experiência de login open-source
Publicamos os recursos de experiência de login do Figma para o público, incluindo designs abrangentes de fluxos de autenticação e estilos e componentes versáteis.
Product & Design
Na Logto, acreditamos no poder da colaboração e transparência. É por isso que estamos felizes em informar que tornamos nosso design de experiência de login no Figma open-source e disponível para todos. Para acessar os recursos do Figma:
Catálogo de recursos de design de experiência de login
Este design inclui dois componentes principais: o fluxo de autenticação (experiência de login) e os estilos & componentes. Vamos explorar cada um em detalhe.
Fluxo de autenticação
Criamos meticulosamente várias combinações de cenários de cadastro, login e primeiro login social para plataformas móveis e PC. Cada cenário vem com sua configuração de console correspondente, oferecendo uma visão abrangente do fluxo de autenticação. Aqui está uma prévia de alguns cenários:
| Cadastro | Login | Primeiro login social | |
|---|---|---|---|
| Nome de usuário | Nome de usuário + Senha | Nome de usuário + Senha | Login social + Definir nome de usuário |
| Email (mais popular) | Email + Código de verificação + Senha | Email + Senha | Login social + Vincular email |
| Número de telefone | Número de telefone + Código de verificação | Número de telefone + Código de verificação | Login social + Vincular número de telefone |
| Email e telefone | Email/Número de telefone + Código + Senha | Email/Número de telefone + Código/Senha | Login social + Vincular email/Telefone |
| Somente login social | / | / | Só login social |
| Esqueceu a senha | |
|---|---|
| Email e telefone mistos | Redefinir senha verificando email/telefone |
Estilos & componentes
Nosso design também inclui um conjunto de estilos e componentes simples e versáteis que facilitam a personalização da interface geral da experiência de login. Aqui está o que você encontrará:
| Introdução | |
|---|---|
| Estilos de fonte | Simplificamos a classificação de fontes em categorias como corpo, rótulo, título e manchete. Os mesmos estilos de fonte são usados para ambas as plataformas móveis e PC, garantindo consistência e facilidade de uso. |
| Estilos de cor | Com a ajuda de paletas e tokens, você pode modificar facilmente as cores do tema para combinar com a sua marca. Nossa paleta de cores é gerada usando Google Material Design, e oferece modos claro e escuro, facilitando a compreensão dos seus designers. |
| Ícones | Incluímos uma coleção selecionada de ícones funcionais que cobrem uma ampla gama de casos de uso, que podem ser utilizados diretamente ou facilmente substituídos. Além disso, fornecemos uma variedade de ícones de mídias sociais especificamente desenhados para seus botões de login social. |
| Componentes | Organizamos os componentes para plataformas móveis e web, incluindo Branding, Botão, Checkbox, Diálogo, Navegação, Toast, Campo de Texto e Teclado (Móvel). |
Configuração simplificada
Mas isso não é tudo! Com o Logto, você pode ignorar os detalhes minuciosos acima e confiar em nós para oferecer uma experiência de integração perfeita. No Logto Console, você pode explorar facilmente as configurações de métodos e combiná-las com a interface da sua marca. Em minutos, você terá uma experiência de login e registro personalizada que se alinha perfeitamente ao seu negócio.
Por que tornamos nosso design do Figma público?
A Logto sempre se comprometeu a fornecer um serviço de código open-source, mas você pode estar se perguntando por que decidimos estender essa abertura também ao nosso design.
Entendendo e configurando a experiência de login
Queremos que o Logto seja não apenas amigável para desenvolvedores, mas também o melhor amigo dos PMs e Designers. Acreditamos em fomentar melhor colaboração ao longo de todo o processo de desenvolvimento, levando a uma alta eficiência, transparência e confiança.
- Compreensão abrangente do Fluxo de Autenticação: Embora seu produto possa usar apenas um método específico de login ou registro, como designer, você deve querer ter uma visão holística. Esse conhecimento possibilita determinar a abordagem que melhor se adequa ao seu negócio e maximiza as taxas de conversão. A lógica de autenticação não deve ser uma entidade ambígua. No entanto, a correspondência entre identificadores e métodos de autenticação não é uma simples relação N*N; envolve várias restrições e decisões de produto. Nosso Figma ajudará. Para saber mais sobre isso, você pode se referir ao artigo “As considerações de design para uma experiência de login sem falhas”.
- Desenhe diretamente sua interface: Designers estão acostumados a oferecer soluções completas no Figma. Se seu projeto envolve designers, este design open-source os ajudará a rapidamente corresponder à identidade visual da sua marca.
Capacitando a experiência e serviços do Logto
Enquanto o Logto está comprometido em fornecer um Serviço de Nuvem eficiente, ele se originou da comunidade open-source e pretende permanecer publicamente transparente a longo prazo.
- Abraçando o espírito open-source: Acreditamos que os benefícios derivados do open-sourcing de código também podem ser aplicados ao design. Ao convidar mais atenção para a experiência do usuário por meio da abertura, uso e discussão dentro da comunidade open-source, podemos continuamente aprimorar a experiência de autenticação.
- Fornecendo insights sobre design de produção de longo prazo: Embora a maioria de nossos esforços estejam atualmente focados no desenvolvimento de capacidades de Autenticação e Autorização, a experiência de login que oferecemos é altamente extensível e atende à maioria de suas necessidades. Através do feedback open-source e da colaboração, esperamos integrar melhor os processos e configurações visuais do SIE em nossos produtos, reduzindo, assim, o custo de produtização.
Notas finais
À medida que continuamos a iterar no produto Logto, manteremos o design do Figma atualizado. Esperamos que você utilize o Logto para criar experiências de primeiros passos excepcionais para seus produtos e deixe uma impressão duradoura em sua marca.
Valorizamos sua experiência e feedback, então, mantenha os canais de comunicação abertos. Estamos ansiosos para ouvir de você.