Vi har publicerat Figma-resurserna för inloggningsupplevelsen till allmänheten, inklusive omfattande autentiseringsflödesdesigner och mångsidiga stilar och komponenter.
På Logto tror vi på kraften i samarbete och transparens. Därför är vi glada att meddela att vi har gjort vår inloggningsupplevelsedesign i Figma open-source och tillgänglig för alla att använda. För att komma åt Figma-resurserna:
Denna design inkluderar två huvudkomponenter: autentiseringsflödet (inloggningsupplevelse) och stilar & komponenter. Låt oss utforska varje komponent i detalj.
Vi har noggrant utformat olika kombinationer av registrering, inloggning och första sociala inloggningsscenarier för både mobila och PC-plattformar. Varje scenario kommer med sin motsvarande konsolkonfiguration, vilket ger dig en omfattande översikt över autentiseringsflödet. Här är en förhandsvisning av några av scenarierna:
| Registrering | Inloggning | Första sociala inloggning | |
|---|---|---|---|
| Användarnamn | Användarnamn + Lösenord | Användarnamn + Lösenord | Social inloggning + Ange användarnamn |
| E-post (mest populärt) | E-post + Verifikationskod + Lösenord | E-post + Lösenord | Social inloggning + Länka e-post |
| Telefonnummer | Telefonnummer + Verifikationskod | Telefonnummer + Verifikationskod | Social inloggning + Länka telefonnummer |
| Blandad e-post och telefon | E-post/Telefonnummer + Verifikationskod + Lösenord | E-post/Telefonnummer + Verifikationskod/Lösenord | Social inloggning + Länka e-post/telefonnummer |
| Endast social inloggning | / | / | Endast social inloggning |
| Glömt lösenord | |
|---|---|
| Blandad e-post och telefon | Återställ lösenord genom att verifiera e-post/telefonnummer |
Vår design innehåller även ett set med enkla och mångsidiga stilar och komponenter som gör det enkelt för dig att anpassa det övergripande UI:et för din inloggningsupplevelse. Här är vad du hittar:
| Introduktion | |
|---|---|
| Typsnittsstilar | Vi har förenklat klassificeringen av typsnitt till kategorier som kroppstext, etikett, titel och rubrik. Samma typsnitt används för både mobila och PC-plattformar, vilket säkerställer konsistens och enkel användning. |
| Färgstilar | Med hjälp av paletter och tokens kan du enkelt ändra temafärgerna för att matcha ditt varumärke. Vår färgpalett genereras med hjälp av Google Material Design och erbjuder både ljusläges- och mörkerlägesalternativ, vilket gör det enkelt för dina designers att förstå. |
| Ikoner | Vi har inkluderat en utvald samling av funktionella ikoner som täcker en rad användningsfall som kan användas direkt eller enkelt bytas ut. Dessutom erbjuder vi olika sociala medieikoner specifikt designade för dina sociala inloggningsknappar. |
| Komponenter | Vi har organiserat komponenter för både mobila och webbplattformar, inklusive Branding, Knapp, Kryssruta, Dialog, Navigering, Toast, Textfält och Tangentbord (Mobilt). |
Men det är inte allt! Med Logto kan du hoppa över de små detaljerna ovan och lita på att vi levererar en sömlös integrationsupplevelse. I Logto Console kan du enkelt utforska metodkonfigurationer och matcha dem med ditt varumärkes UI. På några minuter har du en anpassad inloggnings- och registreringsupplevelse som perfekt ligger i linje med ditt företag.
Logto har alltid varit engagerade i att tillhandahålla en öppen källkodstjänst, men du kanske undrar varför vi beslutade att utöka denna öppenhet till vår design också.
Vi vill att Logto ska vara inte bara utvecklarvänligt utan även fungera som PMs och Designers bästa vän. Vi tror på att främja bättre samarbete genom hela utvecklingsprocessen, vilket leder till hög effektivitet, transparens och tillit.
Medan Logto är engagerade i att tillhandahålla en effektiv molntjänst, härstammar det från open source-samhället och avser att förbli offentligt transparent på lång sikt.
Allteftersom vi fortsätter att iterera på Logto-produkten kommer vi att hålla Figma-designen uppdaterad. Vi hoppas att du kommer att använda Logto för att skapa exceptionella första stegs upplevelser för dina produkter och lämna ett bestående intryck på ditt varumärke.
Vi värdesätter din erfarenhet och feedback, så håll gärna öppna kanaler för kommunikation. Vi ser fram emot att höra från dig.