Loom Base:Loomのエンジンでつくった、Loom自身のデザインシステム

デザインシステムのエンジンを試す一番の方法は、そのエンジンがつくったデザインシステムを見ることです。 Loom Baseは、Loom自身のシステムです。Loom自身の画面の基盤であり、いまその上に移行を進めています。また、まだシステムを持たないチームにも提供しています。お客様のシステムを変換するのと同じエンジンで生成し、同じチェックを課しています。ただし、まだ完成してはいません。終わっていない部分は、このページの後半に記しています。

現在の状況:バージョン1、ベータ版です。すべてのコンポーネントはベータ版と表示しており、準備完了の定義に照らして人がレビューするまでは安定版とみなしません。Loom BaseはMITライセンスで、npmパッケージとshadcn互換のレジストリとしてビルドできます。まだ公開はしていません。

Loom Baseは、多くのプロダクトに必要なコンポーネントをそろえています

  • **69件のコンポーネントのコントラクト(機械可読なコンポーネント仕様)。**振る舞いはデータとして書かれています。プロダクトのデザインシステムを調べた私たちのベンチマークで見つかった、ほぼすべてに共通する31のコンポーネント、レイアウトの基本要素、AIインターフェースの6つのパターン、そしてAIの提案を人が承認するためのコンポーネントです。
  • **同じコントラクトからつくるReactとReact Native。**Webでは、アクセシビリティのためにReact Aria Componentsの上に組み立てています。ネイティブでは、React Native自身のアクセシビリティ機能を使います。
  • 3つの階層のトークン(プリミティブ、セマンティック、コンポーネント)をDTCG形式で。色はOKLCHで、16進数のフォールバックつきです。モードは、ライト、ダーク、ハイコントラスト、密度、動きを減らす設定、日本語の組版に対応しています。
  • **ページテンプレート。**一覧と詳細の画面、設定ページ、ウィザード、サインイン、空の状態とエラーのページなどです。
  • **人とエージェントのためのドキュメント。**コンポーネントごとのページ、型付きのコンポーネントカタログ、llms.txtファイルです。

すべてのコンポーネントを、すべてのモードでチェックしています

以下の数値は、このページをビルドするたびに、カバレッジのレポート(packages/base/COVERAGE.md)から読み込んでいます。

  • 453件中453件の同等性(パリティ)テストに合格しています(Webとネイティブ)。ネイティブ版は、完全対応が65件、一部対応が3件、未対応が1件です。
  • axeによるアクセシビリティのチェックを1,113回実行し、不合格は0件です。対象は371のStorybookのストーリーすべてで、すべてのカラーモードで実行しています。
  • 宣言した2,784組の色の組み合わせのうち、2,784組がWCAG 2.2 AAのコントラストに合格しています(ライト、ダーク、ハイコントラスト)。ブランドのレイヤーが組み合わせをAA未満に下げると、ビルドが失敗します。
  • 26件のキーボード操作のスクリプトのうち、26件が実際のブラウザで合格しています。

Loom Baseについての判断は、すべて記録に残します

Loom Baseは、私たちがお客様のシステムに効かせるのと同じ方法でガバナンスを効かせています。判断はそれぞれ理由とともに、リポジトリの中のファイルとして残します。

テーマは自由に変えられます。ただし、人を守るための制限があります

ブランドのレイヤーは、ロックの範囲内で見た目を変えられます。どのブランドでもロックされているものがあります。フォーカスリング、最小のタップ領域、AIのコンテンツを示す色です。状態を表す色は拡張できますが、変更はできません。色、文字、角丸の役割の多くは、理由を記録したうえで置き換えられます。余白の初期値は自由に調整できます。

まだシステムがないなら、Loom Baseから始めましょう

デザインシステムのないチームのために、LoomはLoom Baseをフォークし、アプリの色と文字からライトとダークのテーマをつくり、アプリが使うコンポーネントだけに絞り込み、移行計画を書きます。チームの規模に合わせたガバナンスを入れたloom/フォルダも用意します。できあがったものは、初日から自社のものです。

このスターターを動かしたのは、これまでのところLoom自身のアプリ一つだけです。

完成していない部分もあり、それがどこかをお伝えします

はっきりお伝えします。ネイティブ版が一部対応にとどまるコンポーネントが3件、ネイティブ版がないコンポーネントが1件あります。メッセージカタログ、ビジュアルリグレッションテスト(VRT)の基準画像、Figmaライブラリ、リリースのツールもまだありません。Loomの監査では、Loom Baseは100点中75点で「Holding together」です。監査が測るのは構造、ガバナンス、ツールで、足りない点の多くはコンテンツのツール、リリースのツール、ドキュメントサイト、Figmaです。

自分たちも、同じ評価基準で監査します

Loom自身の管理画面は、私たちの基準ができる前につくったもので、Loomの監査では100点中22点の「ほつれが多い」です。いま、Loom Baseの上につくり直しています。厳しい基準は私たち自身にも当てはまるべきなので、両方の数値を公開しています。

Loomのエンジンを信頼していただくには、まず私たち自身が使ってみせる必要があります。Loom Baseは、そのためのものです。

よくある質問

すでにデザインシステムがある場合も、Loom Baseを使えますか?

その場合は、いまのシステムと見た目をそのままお使いください。Loom Baseは、システムのないチームと、Loom自身の画面のためのものです。

Loom Baseから始めたシステムは、誰のものですか?

初日から自社のものです。自社のリポジトリの中に置かれます。

Loom Baseから始めたシステムは、どれも同じ見た目になりますか?

いいえ。Loom Baseには標準の見た目がありますが、ブランドのレイヤーで、ロックの範囲内で自社の見た目に置き換えられます。

まずは、自社のデザインシステムについてお聞かせください。

私たちはシステムを読み、見つけたことをお見せし、何から直すかをチームと一緒に決めます。