デザインシステムカタログ

注目の5件

5

GitHubスター数を参考に選定

67 件のデザインシステム — Adobe Spectrum 2

Ant Design — 全体像 — 公式コンポーネントの実装見本Ant Design中国企業・OSS参考Microsoft Fluent 2 — 全体像 — 公式コンポーネントの実装見本Microsoft Fluent 2米国企業・OSS参考Astryx — 全体像 — 公式コンポーネントの実装見本Astryxアメリカ企業・OSSAdobe React Aria — 全体像 — 公式コンポーネントの実装見本Adobe React Aria米国企業・OSSGitHub Primer — 全体像 — 公式コンポーネントの実装見本GitHub Primer米国企業・OSS参考

公開日が新しい順

62
Cloudflare Kumo — 全体像 — 公式コンポーネントの実装見本Cloudflare Kumo米国企業・OSS参考Salesforce Lightning Design System 2 — 全体像 — 公式コンポーネントの実装見本Salesforce Lightning Design System 2米国企業・OSSSansan One Design System — 概要 — 公式サイトのキャプチャ公式サイトのキャプチャSansan One Design System日本企業・OSSCoinbase Design System — 全体像 — 公式コンポーネントの実装見本Coinbase Design System米国企業・OSS参考Serendie Design System — 全体像 — 公式コンポーネントの実装見本Serendie Design System日本企業・OSSkaonavi sugao — 概要 — 公式サイトのキャプチャ公式サイトのキャプチャkaonavi sugao日本企業・OSS参考Ubie Vitals — 全体像 — 公式コンポーネントの実装見本Ubie Vitals日本企業・OSS参考freee vibes — 全体像 — 公式コンポーネントの実装見本freee vibes日本企業・OSSAdobe Spectrum 2 — 全体像 — 公式コンポーネントの実装見本Adobe Spectrum 2米国企業・OSS一休 Design Guideline — 概要 — 公式サイトのキャプチャ公式サイトのキャプチャ一休 Design Guideline日本企業・OSSDBS Data Visualisation — デザイン活動 — 公式サイトのキャプチャ公式サイトのキャプチャDBS Data Visualisationシンガポール企業・OSSBits UI — 全体像 — 公式コンポーネントの実装見本Bits UI国際OSS企業・OSS参考GC Design System — 全体像 — 公式コンポーネントの実装見本GC Design Systemカナダ政府・公共Wise Design — 全体像 — 公式コンポーネントの実装見本Wise Designイギリス企業・OSSデジタル庁デザインシステム (DADS) — 全体像 — 公式コンポーネントの実装見本デジタル庁デザインシステム (DADS)日本政府・公共Kobalte — 全体像 — 公式コンポーネントの実装見本Kobalte国際OSS企業・OSS参考KoliBri — 全体像 — 公式コンポーネントの実装見本KoliBriドイツ政府・公共参考Cloudscape — 全体像 — 公式コンポーネントの実装見本Cloudscapeアメリカ企業・OSSpixiv Charcoal — 全体像 — 公式コンポーネントの実装見本pixiv Charcoal日本企業・OSSCookpad Apron — 公開紹介 — 公式サイトのキャプチャ公式サイトのキャプチャCookpad Apron日本企業・OSS参考Agriculture Design System (AgDS) — 全体像 — 公式コンポーネントの実装見本Agriculture Design System (AgDS)オーストラリア政府・公共Tencent TDesign — 全体像 — 公式コンポーネントの実装見本Tencent TDesign中国企業・OSS参考SPEEDA FALCON — 公開紹介 — 公式サイトのキャプチャ公式サイトのキャプチャSPEEDA FALCON日本企業・OSSArco Design — 全体像 — 公式コンポーネントの実装見本Arco Design中国企業・OSS参考Semi Design — 全体像 — 公式コンポーネントの実装見本Semi Design中国企業・OSS参考Spindle — 全体像 — 公式コンポーネントの実装見本Spindle日本企業・OSSFinastra Design System — 全体像 — 公式コンポーネントの実装見本Finastra Design System英国企業・OSS参考Decathlon Vitamin — 全体像 — 公式コンポーネントの実装見本Decathlon Vitaminフランス企業・OSS参考monday.com Vibe — 全体像 — 公式コンポーネントの実装見本monday.com Vibeイスラエル企業・OSS参考Système de Design de l’État (DSFR) — 全体像 — 公式コンポーネントの実装見本Système de Design de l’État (DSFR)フランス政府・公共参考SmartHR Design System — 全体像 — 公式コンポーネントの実装見本SmartHR Design System日本企業・OSSCzech Design System — 全体像 — 公式コンポーネントの実装見本Czech Design Systemチェコ政府・公共参考Twilio Paste — 全体像 — 公式コンポーネントの実装見本Twilio Pasteアメリカ企業・OSS参考SGDS — 全体像 — 公式コンポーネントの実装見本SGDSシンガポール政府・公共参考Airtable Blocks SDK UI — 概要 — 公式サイトのキャプチャ公式サイトのキャプチャAirtable Blocks SDK UI米国企業・OSS参考CFPB Design System — 全体像 — 公式コンポーネントの実装見本CFPB Design Systemアメリカ政府・公共参考Esri Calcite Design System — 全体像 — 公式コンポーネントの実装見本Esri Calcite Design System米国企業・OSS参考ING Lion — 全体像 — 公式コンポーネントの実装見本ING Lionオランダ企業・OSS参考BC Design System — 全体像 — 公式コンポーネントの実装見本BC Design Systemカナダ政府・公共参考Porsche Design System — 全体像 — 公式コンポーネントの実装見本Porsche Design Systemドイツ企業・OSS参考Contentful Forma 36 — 全体像 — 公式コンポーネントの実装見本Contentful Forma 36ドイツ企業・OSS参考GOV.UK — 全体像 — 公式コンポーネントの実装見本GOV.UKイギリス政府・公共Vaadin Design System — 全体像 — 公式コンポーネントの実装見本Vaadin Design Systemフィンランド企業・OSS参考Uber Base Web — 全体像 — 公式コンポーネントの実装見本Uber Base Web米国企業・OSS参考Gestalt — 全体像 — 公式コンポーネントの実装見本Gestaltアメリカ企業・OSS参考Kiwi.com Orbit — 全体像 — 公式コンポーネントの実装見本Kiwi.com Orbitチェコ企業・OSS参考Ariakit — 全体像 — 公式コンポーネントの実装見本Ariakit国際OSS企業・OSS参考Francfranc Design System — 概要 — 公式サイトのキャプチャ公式サイトのキャプチャFrancfranc Design System日本企業・OSSSegment Evergreen — 全体像 — 公式コンポーネントの実装見本Segment Evergreen米国企業・OSS参考Shopify Polaris — 全体像 — 公式コンポーネントの実装見本Shopify Polarisカナダ企業・OSS参考IBM Carbon Design System — 全体像 — 公式コンポーネントの実装見本IBM Carbon Design System米国企業・OSS参考Europa Component Library — 全体像 — 公式コンポーネントの実装見本Europa Component LibraryEU政府・公共参考Audi Brand Guidelines — 概要 — 公式サイトのキャプチャ公式サイトのキャプチャAudi Brand Guidelinesドイツ企業・OSS参考Designers Italia — 全体像 — 公式コンポーネントの実装見本Designers Italiaイタリア政府・公共参考GitLab Pajamas — 全体像 — 公式コンポーネントの実装見本GitLab Pajamasアメリカ企業・OSS参考Orange Boosted — 全体像 — 公式コンポーネントの実装見本Orange Boostedフランス企業・OSS参考U.S. Web Design System (USWDS) — 全体像 — 公式コンポーネントの実装見本U.S. Web Design System (USWDS)アメリカ政府・公共WFP UI Kit — 全体像 — 公式コンポーネントの実装見本WFP UI Kit国際機関政府・公共参考Liferay Lexicon — 全体像 — 公式コンポーネントの実装見本Liferay Lexicon米国企業・OSS参考Bristol Design System — 全体像 — 公式コンポーネントの実装見本Bristol Design Systemイギリス政府・公共参考Red Hat PatternFly — 全体像 — 公式コンポーネントの実装見本Red Hat PatternFly米国企業・OSS参考Atlassian Design System — 全体像 — 公式コンポーネントの実装見本Atlassian Design Systemオーストラリア企業・OSS参考

Adobe Spectrum 2

公式サイト (新しいタブで開く)GitHub (新しいタブで開く)

Adobeの制作ツールを支えるSpectrumの第2世代。複雑な操作画面の階層や入力部品を設計する指針を公開しています。

実装プレビュー
@react-spectrum/s2 1.8.2
Adobe米国React / React Aria / Web Components
公開日
公開日の根拠と補足

公式発表に記載された公開日。

公開日の根拠
利用条件と実装の出典

ライセンス: Apache-2.0

公式の公開実装を共通の内容で描画しています。各ライブラリの利用条件は出典で確認してください。

実装の出典ソースコード

Adobe Spectrum 2全体像

1 / 4

キーボード操作

↓↑JK
デザインシステムを選択
HomeEnd
最初・最後の項目を選択
←→HL
プレビューを切り替え
V
プレビューを拡大
O
公式サイトを開く
?
このヘルプを表示
Esc
オーバーレイを閉じる / 一覧に戻る
TabShift + Tab
操作対象を移動
EnterSpace
フォーカス中の操作を実行

入力欄や言語選択の操作中はショートカットを無効にします。