Libx Awesomeリスト

    このページの内容

    Awesome Design Systems

    Design Systemsを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

    目次

    デザインシステム

    デザインシステムは、あらゆるプロダクト開発における唯一の信頼できる情報源として、一貫性と速度を保証するルールに導かれた、進化し続ける再利用可能コンポーネントのコレクションである。

    主な企業のデザインシステム

    • Atlassian Design Guidelines - 明快で美しい体験を作るためのエンドツーエンドのデザイン言語。
    • Firefox Photon Design System - 認識しやすく楽しいFirefoxの製品・機能をより速くリリースする。
    • GitHub Primer - コミュニティが自身のプロジェクトを設計・構築できるようにオープンソース化したもの。
    • GitLab Design System - Pajamas - GitLabを支えるリソース、コンポーネント、デザインガイドライン。
    • Google Material Design - Material Designで直感的で美しいプロダクトを作る。
    • IBM Carbon - プロダクトと体験のためのIBMのオープンソースデザインシステム。
    • Shopify Polaris - Shopifyのすべての販売者に優れた体験を提供するための協働を支援するデザインシステム。

    その他のデザインシステムはこちらを参照。

    デザインシステムの記事

    その他のリソース

    • Design system checklist - より良いデザインシステムを構築する。計画、構築、成長を助けるオープンソースのチェックリスト。
    • Design Systems Survey - 20以上の業界のデザイナーと開発者が、デザインシステムとその利用法を紹介する。
    • Design.system - デザインシステムコミュニティ向けのリソース。
    • Super friendly - デザインシステムで社内チームがより良いデジタルプロダクトを作るのを支援する。
    • AI Web Design Codex - 人間とAIエージェント向けに、Webデザイン、UX、アクセシビリティ、コンバージョンを扱う相互リンク済み60ガイドのナレッジベース。

    UIデザインツール

    デザインツール

    • Figma - チームが最初から最後まで、より良いデザインを作成、テスト、出荷するのを支援する（クロスプラットフォーム）。
    • InVision - 世界最高水準のユーザー体験を支えるデジタルプロダクトデザインプラットフォーム。
    • Sketch - 初期アイデアから最終アートワークまで最高の仕事を作るためのデザインツールキット（macOS向け）。
    • AdobeXD - 本物のように見え、感じられるデザインでストーリーを共有する。ワイヤーフレーム、アニメーション、プロトタイプ、コラボレーションなどを一つのUI/UXデザインツールで提供する。
    • Marvel - アイデアを形にし、チームのデジタルプロダクト作成方法を変えるために必要なすべてを備える。誰もがデザインの力を使えるようにする。
    • UXPin - UX/UIプロジェクト全体を一つのツールで設計・管理する。
    • Penpot - 分野横断チーム向けの、初のオープンソースデザイン・プロトタイピングプラットフォーム。
    • Lunacy - オフラインモード、組み込みアセット（アイコン、イラスト、写真）、リアルタイムコラボレーションを備える無料グラフィックデザインツール。Sketch・Figmaの優れた代替（macOS、Windows、Linux）。

    See design tools plugins here!

    連携

    • Abstract - 混乱のないデザインコラボレーション（macOSのSketch・XD向け）。
    • Avocode - デザインファイルの共有、変更の議論、Webサイト・モバイルアプリ・ニュースレターのコーディングを速くする。
    • InVision Design System Manager - デザインとコード化済みコンポーネントを一元管理し、大規模でも創造的で一貫したデザインを可能にする。
    • Zeplin - 開発者を念頭に置いて作られた、デザインを共有、整理、共同作業するためのより良い方法。

    アクセシビリティ（a11y）

    • Accessibility for developers - 開発者がWebサイトのアクセシビリティ改善・徹底に役立てられる5つの簡単な方法。
    • Stark - ブランド構想からプロダクト完成まで、アクセシビリティを考慮した設計を可能にする。コントラストチェッカー、色覚特性シミュレーション、配色提案を提供する。
    • The A11Y Project - Webアクセシビリティを容易にするためのコミュニティ主導の取り組み。リソース節を参照。
    • InclusiveColors palette creator - WCAGコントラストチェックを通過し、CSS/Figma/AdobeへエクスポートできるアクセシブルなカスタムTailwind風カラーパレットを作成する。
    • Nutilz Color Shades Generator - 任意の16進カラーから50〜950の色調・濃淡スケールを生成し、CSS変数、SCSS、Tailwind設定として書き出す。

    デザインツールの記事

    デザイントークン

    • Design Tokens W3C Community Group - GitHubのリポジトリはこちら。
    • DesignTokens.dev - インフラ管理なしでデザイントークンをリリースする。
    • Diez - コードベース、ネイティブプラットフォーム、チーム間で共有できる視覚スタイルを表現する、無料・オープンソースの開発者ツールキット。
    • Design Tokens Validator - Design Token Community Group仕様に対してデザイントークンを検証する。

    プラグイン

    • Abstract Connect - AbstractとJavaScriptを使う開発者向けのデザイントークン抽出ツール。
    • Zeplin JSON export tokens - トークンをJSON形式で生成するZeplin用デザイントークン拡張。

    ツール

    • CSS Variable Generator - ライト・ダークテーマの組を持つスコープ付きCSSカスタムプロパティを生成し、SCSS、Less、JSONのデザイントークンとして書き出す。
    • Figmagic - Figma文書からデザイントークンを生成し、グラフィックをエクスポートし、デザイントークン駆動のReactコンポーネントを抽出する。
    • Style Dictionary - デザイントークンにより一度スタイルを定義し、任意のプラットフォーム・言語で使用する。
    • Superposition - Webサイトからデザイントークンを抽出してコードやデザインツールで使う。すでにあるデザインシステムを活用する。
    • Theo - デザイントークンを変換・整形するための抽象化。

    記事

    その他のデザイントークン情報はこちらを参照。

    コーディングツール

    • Backlight — 開発者とデザイナーの協働を中心に据え、チームがデザインシステムを構築、文書化、公開、拡張、保守できる非常に包括的なコーディングプラットフォーム。

    パターンライブラリ

    スタイルガイドとドキュメント

    • Stencil - 再利用可能でスケーラブルなデザインシステムを構築するツールチェーン。
    • Zeroheight - 美しい生きたスタイルガイドを作り、すべてのデザインシステムリソースを一か所に文書化する。詳細。

    分離コンポーネントの開発

    • Backlight - コード側でデザインシステムを構築する協働プラットフォーム。コンポーネントを管理するオールインワンのソリューションでフロントエンドを強化し、すばやい開始と協働の加速を実現する。
    • Pattern Lab - アトミックデザインの原則を使い、チームが熟慮されたパターン駆動のUIを構築するのを支援する。
    • React Styleguidist - 生きたスタイルガイドを備えた、分離されたReactコンポーネント開発環境。
    • Storybook - 堅牢なUIコンポーネントをより速く構築する。React、Vue、Angular向けにUIコンポーネントを分離して開発するオープンソースツールであり、美しいUIの構築を整理され効率的にする。
    • Styled System - Reactコンポーネントへスタイルpropsを追加し、グローバルテーマオブジェクトに基づいてスタイルを制御できるユーティリティ関数群。

    Storybookアドオン

    • Accessibility - コンポーネントのWebアクセシビリティ標準準拠をテストする。
    • Actions - 対話要素でアクションが行われた際にUIフィードバックを得る。
    • Backgrounds - 背景を切り替え、異なる設定でコンポーネントを表示する。
    • Console - ログ、エラー、警告などのコンソール出力をStorybookに表示する。
    • Docs - コンポーネントの使用法とプロパティをMarkdownで文書化する。
    • Knobs - Storybook UIでコンポーネント入力と動的に対話する。
    • Links - ストーリーを結び、UIコンポーネントのデモとプロトタイプを作る。
    • Source - ストーリーのソースコードを表示して動作を確認し、アプリへ貼り付ける。
    • Storyshots - Jestで各ストーリーのコードスナップショットを自動取得する。
    • Viewport - Storybookのビューポートサイズと向きを調整してレスポンシブコンポーネントを構築する。

    Storybookの詳細はこちらを参照。

    パターンライブラリの記事

    テスト

    ユニット・リグレッションテスト

    • Chromatic - React、Angular、Vue向けのビジュアルテスト。UIコンポーネントのピクセル単位の一貫性を保証し、クラウドでコミットごとに視覚変更を自動テストする。
    • Sherlo - React Native Storybook向けビジュアルテストプラットフォーム。クラウド上のiOS・Androidシミュレーターでスクリーンショットを取得し、視覚変更を自動検出する。
    • Testing library - 優れたテスト実践を促す、シンプルで完全なテストユーティリティ。

    書籍

    • Acing the System Design Interview - 最難関のシステム設計面接質問を突破するために必要な洞察、技能、練習を提供するZhiyong Tanの書籍。
    • Atomic Design - Brad Frostによる、デザインシステムを作るためのアトミックデザイン手法。
    • Building Design Systems - Sarrah VesselovとTaurie Davisによる、共有デザイン言語でユーザー体験を統一する書籍。
    • Design systems - Alla Kholmatova（Smashing Magazine）による、デジタルプロダクトのデザイン言語を作る実践ガイド。
    • Front-End Style Guides - Anna Debenhamによる、Webサイトのスタイルガイドを作成・保守する書籍。
    • Frontend Architecture for Design Systems - Micah Godboltによる、スケーラブルで持続可能なWebサイトの現代的な設計図。
    • Introduction to Design Systems - Emma Bostianによる、React、Figma、Storybookを用いたデザインシステムの実践的入門。
    • Modular Web Design - Nathan Curtisによる、ユーザー体験デザインと文書化のための再利用可能コンポーネント作成。

    講演

    • Building Accessible Interfaces: Patterns And Techniques - Sara Soueidanによる、一般的なUIコンポーネントの構築・リファクタリングと、アクセシビリティを念頭に置いた構築技法の紹介。
    • Design Processes & Systems in Craft - Courtney Bradfordによる、デザインをサイロ化された実践ではなくプロセスに根ざす協働と捉え、人間中心・システム志向へ再構成する方法。
    • Design Systems - The State of the Web - Adam Argyle（GoogleのDesign Advocate）による、現代Web開発におけるデザインシステムの役割と、デザイナー・開発者間の力学を変える可能性についての対話。
    • Design Systems - Women of React conf by Neha Sharma.
    • How To Build a Design System | UXPin - UXPinのプロトタイピング・デザインプラットフォームを使ってUXデザインシステムを構築する方法を教える。
    • Introducing Design Systems Into Chaos - Diana Mounter（GitHubのDesign Systems Lead）による、デザインシステム導入の開始点、優先順位、顧客・同僚への大きな効果を生む実践例。混沌に秩序をもたらすシステムの導入を支援する。
    • Jina Anne - Designing a Design System - Jina（Salesforce UXのDesign SystemsチームLead Designer）による、効果的なデザインシステムへの取り組み方、設計・構築、継続的な有用性を確保する保守の戦略。
    • Level up your Design System with styled-system - Women of React conf by Taley’a Mirza.
    • Maintaining Design Systems - Brad Frost（フロントエンドデザイナー）による、システムと対象プロダクトの同期を保ち、ユーザーへ最善の体験を提供するためにデザインシステムを保守・進化させる方法の解説。

    コントリビュート

    コントリビューションを歓迎します。まずはコントリビューションガイドラインを読んでください。