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.
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:
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.
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 |
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). |
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.
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.
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.
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.
À 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ê.