日本語
コードからキャンバスへ: Logtoがサインイン体験デザインをオープンソース化
私たちは公開されたサインイン体験の Figma リソースを公開し、包括的な認証フローデザインと多用途なスタイルとコンポーネントを含めました。
Ran
Product & Design
Product & Design
私たちは公開されたサインイン体験の Figma リソースを公開し、包括的な認証フローデザインと多用途なスタイルとコンポーネントを含めました。
Logto では、協力と透明性の力を信じています。だからこそ、私たちのサインイン体験デザインを Figma でオープンソース化し、誰でも使用できるようにしたことをお知らせします。Figma リソースにアクセスするには:
このデザインには、2 つの主要なコンポーネントが含まれています: 認証フロー（サインイン体験）とスタイルとコンポーネント。それぞれを詳しく見ていきましょう。
私たちは、モバイルと PC プラットフォームの両方におけるサインアップ、サインイン、最初のソーシャルサインインシナリオのさまざまな組み合わせを注意深く作成しました。各シナリオにはそれに対応するコンソール設定が付いており、認証フローの包括的な概要を提供します。ここにいくつかのシナリオを紹介します:
| サインアップ | サインイン | 最初のソーシャルサインイン | |
|---|---|---|---|
| ユーザー名 | ユーザー名 + パスワード | ユーザー名 + パスワード | ソーシャルサインイン + ユーザー名を設定 |
| メール（最も人気がある） | メール + 認証コード + パスワード | メール + パスワード | ソーシャルサインイン + メールをリンク |
| 電話番号 | 電話番号 + 認証コード | 電話番号 + 認証コード | ソーシャルサインイン + 電話番号をリンク |
| メールと電話の混合 | メール／電話番号 + 認証コード + パスワード | メール／電話番号 + 認証コード／パスワード | ソーシャルサインイン + メール／電話番号をリンク |
| ソーシャルサインインのみ | / | / | ソーシャルサインインのみ |
| パスワードを忘れた場合 | |
|---|---|
| メールと電話の混合 | メール／電話番号の確認でパスワードをリセット |
私たちのデザインには、サインイン体験の全体的な UI を簡単にカスタマイズできるようにするシンプルで多用途なスタイルとコンポーネントのセットも含まれています。手に入るものは次のとおりです:
| 紹介 | |
|---|---|
| フォントスタイル | 本文、ラベル、タイトル、ヘッドラインなどのカテゴリにフォントの分類を簡素化しました。同じフォントスタイルがモバイルおよび PC プラットフォームの両方で使用され、一貫性と使いやすさを確保しています。 |
| カラースタイル | パレットとトークンを使用して、テーマの色を簡単にカスタマイズしてブランドに一致させることができます。私たちのカラーパレットは Google のマテリアルデザインを使用して生成されており、ライトモードとダークモードの両方を提供し、デザイナーが簡単に理解できるようにします。 |
| アイコン | 幅広いユースケースをカバーする機能的なアイコンを厳選して含めました。これらは直接使用または簡単に置き換えることができます。また、ソーシャルサインインボタン用に特別にデザインされたさまざまなソーシャルメディアアイコンも提供しています。 |
| コンポーネント | ブランド、ボタン、チェックボックス、ダイアログ、ナビゲーション、トースト、テキストフィールド、キーボード（モバイル）を含むモバイルおよびウェブプラットフォーム用のコンポーネントを整理しました。 |
しかし、それだけではありません！Logto を使用すると、上記の面倒な詳細をスキップし、シームレスな統合体験を提供することを信頼できます。Logto コンソールでは、方法の構成を簡単に探り、ブランドの UI と一致させることができます。数分で、ビジネスに完全に一致するカスタマイズされたログインおよび登録体験を手に入れることができます。
Logto は常にオープンソースのコードサービスを提供することにコミットしていますが、なぜデザインにもこのオープン性を拡大することにしたのか疑問に思うかもしれません。
Logto を開発者にとってだけでなく、PM やデザイナーにとっても親友にしたいと考えています。全体の開発プロセスを通じてより良い協力を促進し、高効率、透明性、信頼を築くことを信じています。
Logto は効率的なクラウドサービスを提供することにコミットしている一方で、オープンソースコミュニティから発展し、長期的には公開透明を保つことを意図しています。
Logto 製品の反復を続ける中で、Figma デザインを最新の状態に保ちます。Logto を利用して、製品の優れたファーストステップエクスペリエンスを作成し、ブランドに長く残る印象を与えることを願っています。
あなたの体験とフィードバックを大切にしているため、コミュニケーションチャネルをオープンに保ってください。皆様からのお便りをお待ちしております。