We have published the sign-in experience Figma resources to public, including comprehensive authentication flow designs and versatile styles and components.
At Logto, we believe in the power of collaboration and transparency. That's why we are happy to let your know that we have made our sign-in experience design in Figma open-source and available for everyone to use. To access the Figma resources:
This design includes two main components: the authentication flow (sign-in experience) and the styles & components. Let's explore each in detail.
We've meticulously crafted various combinations of sign-up, sign-in, and first social sign-in scenarios for both mobile and PC platforms. Each scenario comes with its corresponding console configuration, giving you a comprehensive overview of the authentication flow. Here's a sneak peek at some of the scenarios:
| Sign-up | Sign-in | First social sign-in | |
|---|---|---|---|
| Username | Username + Password | Username + Password | Social sign-in + Set username |
| Email (most popular) | Email + Verification code + Password | Email + Password | Social sign-in + Link email |
| Phone number | Phone number + Verification code | Phone number + Verification code | Social sign-in + Link phone number |
| Mixed email and phone | Email/Phone number + Verification code + Password | Email/Phone number + Verification code/Password | Social sign-in + Link email/Phone number |
| Only social sign-in | / | / | Only social sign-in |
| Forgot password | |
|---|---|
| Mixed email and phone | Reset password by verifying email/phone number |
Our design also includes a set of simple and versatile styles and components that make it easy for you to customize the overall UI of your sign-in experience. Here's what you'll find:
| Introduction | |
|---|---|
| Font styles | We've simplified font classification into categories such as body, label, title, and headline. The same font styles are used for both mobile and PC platforms, ensuring consistency and ease of use. |
| Color styles | With the help of palettes and tokens, you can effortlessly modify the theme colors to match your brand. Our color palette is generated using Google Material Design, and offers both light mode and dark mode, making it easy for your designers to understand. |
| Icons | We've included a curated collection of functional icons that cover a wide range of use cases that can be directly used or easily replaced. Additionally, we provide a variety of social media icons specifically designed for your social sign-in buttons. |
| Components | We have organized components for both mobile and web platforms, including Branding, Button, Checkbox, Dialog, Navigation, Toast, Text Field, and Keyboard (Mobile). |
But that's not all! With Logto, you can skip the nitty-gritty details above and trust us to deliver a seamless integration experience. In Logto Console, you can effortlessly explore method configurations and match them with your brand's UI. In minutes, you'll have a customized login and registration experience that perfectly aligns with your business.
Logto has always been committed to providing an open-source code service, but you may be wondering why we decided to extend this openness to our design as well.
We want Logto to be not only developer-friendly but also PMs' and Designers' best friends. We believe in fostering better collaboration throughout the entire development process, leading to high efficiency, transparency, and trust.
While Logto is committed to providing efficient Cloud Service, it originated from the open-source community and intends to remain publicly transparent in the long run.
As we continue to iterate on the Logto product, we will keep the Figma design up to date. We hope you'll utilize Logto to create exceptional first-step experiences for your products and leave a lasting impression on your brand.
We value your experience and feedback, so please keep the communication channels open. We look forward to hearing from you.