アクセシビリティとはアクセシビリティは、サービスや情報をどんな利用者も円滑に利用できるかの度合いです。 アクセシビリティが高いほど、より多くのユーザーが円滑に利用でき、アクセシビリティが低いほど、より多くのユーザーが利用できないということです。 アクセシビリティ向上は、障害当事者だけでなく、さまざまな環境や状況にいる人、高齢者、日本語以外を得意な言語とする人など、すべての人のためのものです。人だけでなく、サービスや情報にアクセスする機械(ロボット)もアクセシビリティの影響を受けます。 SmartHRの開発方針SmartHRは「well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会を作る。」というミッションを掲げ、働くすべての人を後押しするプラットフォームをつくっています。 誰もがその人らしく働ける社会を実現するため、SmartHRはアクセシビリティの向上に取
Design System 1.4.1 | Figma
デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザインデータを閲覧することができます。 デザインシステムについての詳細や更新履歴はデジタル庁ウェブサイトをご覧ください。 ※Figma Communityにて公開中のデータは、Figma Communityの規定によりCC BY 4.0のライセンスが表記されます。ただし、このファイル内のイラストレーション・アイコン素材に関してはデジタル庁ウェブサイトに掲載の「イラストレーション・アイコン素材利用...
社外にも公開しているSmartHR Design Systemは、ライティングに関するガイドラインも充実しています。この記事では、UI文言を検討したいと思ったときにそれらのガイドラインをどのように活用するとよいのか、おすすめの参照方法を紹介します！ チェックリスト的に参照したいライティングスタイル ライティングスタイルには、UI文言に限らずヘルプページやリリースノートなどにも適応したいガイドラインがまとまっています。 基本的かつ具体的な内容で、数も多くないので都度チェックリスト的に参照するのがおすすめです！ヘルプページやリリースノートも含めて、開発に関わる文言や文章を書く機会に参照すると、自然と頭に入っていきます。 迷ったときに参照したい用字用語
How Spotify’s Design System Goes Beyond Platforms | Figma Blog
Design Manager Juli Sombat sheds light on how a need for more cohesion led Spotify’s design systems team to take a cross-platform approach to components. In 2019, when our leadership at Spotify unveiled their ambition to make audio content available and consistent to anyone on any device, our design team faced a significant challenge: Spotify would now be available across 45 unique platforms, and
ユーザーにとって取り返しのつかない操作を提供する際の基準を定義しています。 基本的な考え方一度実行するとやり直しや巻き戻しが効かない操作のことを「取り返しのつかない操作」としています。 サービス内でのデータ損失の原因の多くは人的ミスによるものです。 ユーザーの誤操作によって「取り返しのつかない操作」が実行されないよう、提供時に十分に配慮しましょう。 代表的な取り返しのつかない操作取り返しのつかない操作の代表的なものとして以下のような操作があります。 登録されたデータを削除する操作設定をリセットする操作復元方法がない、または復元に複雑な手順を要するステータスの変更操作取り返しのつかない操作ボタンの提供方法取り返しのつかない操作をボタンなどのコンポーネントで提供する際は、ユーザーの誤操作を防ぐために可能な限りメイン操作領域の遠くに置く（1）、または領域を変更して置くこと（2）を推奨します。 上
GitHub - digital-go-jp/design-system-example-components: デジタル庁デザインシステムのサンプルコンポーネント
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Compose Multiplatform で Bluesky のクライアント作ってみた / Bluesky client with Compose Multiplatform
The Design System Ecosystem
What does a mature, end-to-end design system look like in a big, complex organization? What are all the moving pieces, and how do they hang together as a well-considered architecture? What’s required and what’s optional? Hold onto your butts, because we’re going to go deep on this one. Let’s start here: a design system’s relationship to digital products can be boiled down like so: There’s a design
I've updated Figma's internal design system file to include all the latest features introduced since its last update in 2019: Components with variantsVariablesAuto layoutFigJam
Understand the basics of design systems, what they are, how they work, and how they can change the way you design. Design systems are often the unsung heroes of the products we use every day—from mobile apps and websites to the interfaces on television screens and car dashboards. They serve as the DNA for product design, encoding the principles and elements that define the very experience users in
ヘルプページを書くうえでの基本的な考え方と表記ルールをまとめました。 ドラフトを自分でレビューする際は「チェックリスト」を活用してください。 また、このページで記載していない表記ルールは、プロダクトデザインにおけるライティングスタイル、用字用語、UIテキストに準拠します。 ユーザーが確実に目的を達成できる状態を目指しましょうヘルプページの役割は、ユーザーが目的を達成するサポートです。 情報を簡潔明瞭に伝えて、ユーザーが操作につまずかないようにしましょう。 不要な情報や曖昧な表現は目的達成の妨げとなるため、削除や言い換えを検討しましょう。 チェックリスト情報を取捨選択しましょう必要な情報を漏れなく記載する不要な情報を記載しない本文への追加情報に用いる囲み要素の多用を避ける情報を適切に配置しましょう先に知っておくべき情報から順番に配置する関連する情報は近くに配置する見出しや箇条書きを適切に使う
SmartHRのプロダクトデザインシステム史上最大のアップデートがはじまります。 ー SmartHR Design Systemの現在地（2024年4月版）｜週刊プロデザ by SmartHR
開発組織も当然大きくなっており、プロダクトデザイナーのプロダクト開発への関わり方もアップデートしつつあります。 「デザインシステムは、それを運用する組織の体制や構造に強く影響を受ける」ということで、現在、2つの状況からデザインシステムは次のステップに進むフェーズにきています。 デザインシステムの進化を後押しする2つの状況 マルチプロダクト戦略SmartHR がマルチプロダクト戦略を打ち出したことで、「ユーザーインターフェースの品質と一貫性がもたらす使いやすさ」がより重要になってきました。競合他社との機能のコモディティ化が進むなか、「使いやすさ」は商品価値として差別化要素の一つと位置づけられます。詳細はダイレクターのfumiya(@tyoys00)さんの前回の記事をぜひ読んでください。 プロダクトデザイン組織の拡大マルチプロダクト戦略を受けて、私たちは「プロダクトの使用性を担保する開発者で
Our UX writing style follows our in-product voice principles. These guidelines apply to text in U.S. English, our source language for writing in-product content. Defer to component-level style guidance when needed, and keep in mind that in-product language is internationalized according to specific locale standards and style.
The two-dimensional Design System Attributes Framework graph. Illustration by author using Miro. Naming things is hard. Sometimes, classifying the things you’ve just named is even harder. As a content modelist, I’ve had my fair share of battles with the process of classification. I wouldn’t exactly say it’s more of an art than a science — but then again, not even the periodic table is systematical
Geist, Vercel's design system
Geist Design SystemVercel design system for building consistent web experiences.
Porsche Design System
Find all the fundamental UXI guidelines and pattern-based web components to build brand driven, consistent and intuitive designs for digital Porsche products.
A Global Design System
TL;DR: This is a call to action to create a Global Design System that provides the world’s web designers & developers a library of common UI components. A Global Design System would improve the quality and accessibility of the world’s web experiences, save the world’s web designers and developers millions of hours, and make better use of our collective human potential. Sounds pretty good, right? I
Kamii | Raksul Design System
What does a mature, end-to-end design system look like in a big, complex organization? What are all the moving pieces, and how do they hang together in a well-considered architecture? What’s required and what’s optional? Hold onto your butts, because we’re going to go deep on this one. Let’s start here: a design system’s relationship to digital products can be boiled down like so: The virtuous cyc
私ごとですが、ついにデザイナー歴が17年を超えてきました。 時代の変化とともにツールや常識も変わりつづけています。 現在はFigmaがUIツールとしては一強で、UIデザイナーの方はほとんどの方が使われているのではないかと思います。 とても使いやすく管理もしやすいツールですが、使い方を理解していないと混乱を招いたり、自分しか使えないコンポーネントも作り得てしまいます。 今回はUI,UXでいうと10年以上携わってきた私が経験を通して考える、使いやすいFigmaのVariantsの作り方をシェアしようと思います。 良いツール ≠ 良いDesign SystemFigmaは色々な機能がついていて日々進化をしています。 痒いところに手が届く機能がたくさんありとても良いツールで、Figma出現のおかげで、Design Systemを手軽に作り、身近に運用できるようになりました。 ただし、Figmaを使
SmartHRオプション機能の管理者, 組織図機能管理者, サーベイ機能管理者, 評価機能管理者, 配置シミュレーション管理者
SmartHR UIが大切にしていることSmartHR UIの開発における価値観や行動指針を以下のように定めています。これらはただ大切にしているだけでなく、開発コミュニケーションやタスクの優先順位づけなどにおける判断基準としても使っています。 使い勝手を損なわないことUIコンポーネントの使い勝手は、プロダクトの使い勝手に直結するため非常に重要です。 ユーザーエージェントの振る舞いからかけ離れないようにすることやアクセシビリティに取り組むことも使い勝手に関わります。もちろんプログレッシブエンハンスメントな考え方も大切にしています。 またコンポーネント単体の振る舞いだけでなく、プロダクトで一貫したUIになっているかどうかも忘れてはいけません。 開発者の生産性を損なわないこと私たちは、サービスを通じてプロダクトの利用者や社会に価値を届けることを目的にしています。その状態に早く到達するためにも、質
SmartHRが採用している游ゴシック体はmacOSやWindowsに標準インストールされているシステムフォントです。基本的にすべての従業員が游ゴシック体を利用できるため、別途ウェブフォントを入れる必要がないという利点があります。ですが、CSSで游ゴシック体を指定する際に注意が必要です。 ここでは、ウェブサイトで游ゴシック体を利用するとき、どのようにCSSを書けばよいか、なぜそのように書くのかを説明します。ただし、これは2023年9月時点のもので、将来的に状況が変わっていく可能性があることも留意してください。 游ゴシック体のCSSでの指定方法CSSで次のように指定してください。font-familyの値であるAdjustedYuGothicの部分は任意の名称で構いません。
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog はじめに こんにちは、コミュニケーションアプリ LINE のAndroidクライアントを開発している森です。 LINEでは現在、Jetpack Composeの導入を進めています。 導入を進めるにあたって、LINEのDesign Systemや独自機能である「着せかえ」機能を実装する必要がありました。 この記事では、LINEがどのようにJetpack ComposeでUIの基盤を作っているのか、その実装方法について紹介します。 ダークテーマ対応とSemantic Color LINEアプリはダークテーマに対応しているため、Jetpack Composeでも同様にダークテーマを実装する必要がありました。 ダークテーマを実現するた
モード、モーダル、モードレスの概念と、SmartHRプロダクトにおけるモーダルなUIのパターンを定義しています。 基本的な考え方モードとはプロダクトが特定のタスクを実行することに特化した状態になっているとき、この状態のことを「モード（英：mode）」、タスク完了のために特定のモードを提供するUIを「モーダル（英：modal）なUI」と呼びます。モーダルなUIでは、モードの目的であるタスクを完了するか、モードから抜け出す操作をするまで、他のタスクを実行できません。 逆に、特定のモードに切り替えることなくタスクを完了できるUIは「モードレス（英：modeless）なUI」と呼びます。 モーダルなUIの使いどころSmartHRでは、プロダクトの中心的な画面はモードレスであるように設計しつつ、モードの提供が適切である場面ではモーダルなUIを使用しています。 モードの提供を検討する場面として、以下が
Secondary画面でのアクションを促す、Primaryボタンに対する副次的なボタンとして使います。 SmartHR UI では特に種類の指定をしない場合はSecondaryになります。 画面内にボタンが多すぎる場合、ユーザーは次に何をすればいいのか戸惑うかもしれません。その場合はボタンを減らしたり、画面を簡略化したり、複数の画面に分けることを検討しましょう。 Danger破壊的なアクション（データの永久消去など）の実行前に、ユーザーに一歩立ち止まって考えてもらいたいときに使います。 Dangerボタンが頻出すると効果がありません。主に削除ダイアログ）で使います。削除ダイアログを呼び出すボタンにはDangerボタンを使いません。すべてのユーザーが色を見たり、理解できるわけではないため、警告を促す赤色（DANGER）に頼らないでください。ボタン配置のコンテキストやラベルテキストは重要です。
こんにちは。ウォンテッドリーで Frontend Chapter Leader をしている原(@chloe463)です。 9月に Design System Guild という組織を立ち上げたので、その立ち上げの背景と今後について説明していこうと思います。 デザインシステムとはデザインシステムとは、一貫したデザインや操作性でアプリやWebサイトを提供するための仕組みです。デザイン原則、ブランドガイドライン、デザインルール、デザインのパターンライブラリなど様々なものが含まれます。 デザインシステムがあることにより、本質的なデザイン作業や実装に集中することができ、生産性の向上やユーザーの課題解決に取り組むことができます。毎回このボタンをどの色にしようか、レイアウトどうしよかと迷ったりすることがなくなったり、毎回スタイルを再実装する必要がなくなったりします。 また、デザインシステムが広く適用され
デザインパターン特別なテキストリンク特定の役割を示すためにアイコンを使います。これはテキストが異なっていても、同じ挙動であることを示すためです。 新規ウィンドウで開くテキストリンク新規ウィンドウ（新規タブ）で開くテキストリンクには、テキストの右側に 新規ウィンドウ アイコン（FaUpRightFromSquareIcon）を必ず配置します。リンク先がSmartHRの内部ページ、外部サイトに関わらず表示します。
ここでは、ゲートについての記事を書いていこうと思います☆ ６４個もあるゲートを、全部記載するのは大変ですが それらからの日々の影響や、それぞれの個性など おりおりに触れて、トピックしていけたらいいな〜と思っています。(^^) ■HDSゲートと、星座度数の対応表☆ ********************************* １つのゲートは「５度３７分３０」で、 太陽の場合は、１つのゲートを約５.６日で通過していきます。 * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * ゲート／センター／星座度数／季節（参考太陽日付） ------------------------------------------------------------ ●アルシオネの領域（創始・始動） 13／G／水瓶13.15'00"
![[mixi]「ゲート」： ニュートリノが届く道筋（＝ - Human Design System (HDS) | mixiコミュニティ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a3afee8c052ba0076e70fe24f1dab41a236114d8/height=288;version=1;width=512/https%3A%2F%2Flogo-imagecluster.img.mixi.jp%2Fphoto%2Fcomm%2F5%2F23%2F1250523_49.jpg)
LINE Design Systemを公開します！
世界中において19の言語で提供されている「LINE」。このたび、そのデザインの原則と価値を含んだLINE Design Systemを公開します。 2021.11.01 FacebookTwitterLineLine LINEは19の言語で提供されるグローバルサービスです。より多くの国でさまざまなサービスを提供するようになり、プロダクトデザイナーたちは似ているコンポーネントを何度もデザインすることになったため、度重なるコミュニケーションリソースが発生してしまい、どんどん不要な「負の遺産」が溜まっていくようになりました。そこで「各国のLINEデザイナーたちが、各国のユーザーに同じLINE Designの価値を伝えられるシステムを構築しよう」という想いからLINE Deisgn Systemプロジェクトが始まりました。 まず、Efficiency, Good Design, High Stan
Design token(デザイントークン)という名前が普及してからしばしの時は経ちますが、いまだによくトークンを理解しきれていません。 そんなデザイナー歴18年目になる私なりに、Tokenを理解し、わかりやすく伝えようと思い記事を書いています。 どこまで正確かはわかりませんが、今現在の私の理解を書き綴りますので、解釈は自己責任でお願いします。 トークンの必要性さて、デザイントークンとはなんでしょう？ 色々な記事があるものの、すごくわかりやすくてこれを見れば一目稜線！というものにまだ出会ったことがありません。 デザインシステムとトークンは何が違うの？ トークンを使うメリットは？ トークンを取り入れた方が良いの？ と、ここ数年試行錯誤していますが、結論からいうと 長期のプロジェクトやデザインルールを一括管理したいプロジェクトでは取り入れた方が良い 短期プロジェクトや単発ページ修正しか発生しな
ユーザビリティテストの計画をはじめるときに知っておきたいことをまとめました。 テスト設計時の観点は、ユーザビリティテスト設計の観点を参照してください。 ユーザビリティテストを計画する流れユーザビリティテストの実施が決まったら、以下の流れで準備を進めます。 ユーザーリサーチの「目的」を確認するプロダクトを理解する検証内容を具体化するテストの被験者の条件を検討するテスト設計をするテスト環境を用意するメンバーの役割分担を決める被験者のリクルーティング、連絡1.ユーザビリティテストの「目的」を確認するユーザビリティテストはユーザーリサーチ手法の1つです。 最初に「何を明らかにしたいのか」というリサーチの目的を明確にしたうえで、リサーチ手法を選びましょう。壮大な目的を用意する必要はありません。具体的で明快な目標を決めましょう。 ユーザビリティテストで、何を観察するためにどんなシナリオとタスクを用意す
SmartHRにおける「権限設定」のパターンをまとめています。 基本的な考え方プロダクトごとにアカウントの権限を管理するための画面です。画面パターンは以下のとおりです。 基本機能についてはこの限りではありません。 一覧アカウントの詳細権限の分類SmartHRにおける権限は、大きく2つに分けられます。分類によって、権限オブジェクトの考え方や画面設計が異なります。 新しくプロダクトを作る場合は、どちらの分類になるかを理解したうえで設計を進めてください。 RBAC(Role-Based Access Control)パターンABAC(Attribute-Based Access Control)パターンRBAC(Role-Based Access Control)パターンRBACは、ユーザーに役割（例：業務担当者、機能管理者）を割り当て、その役割に応じた特定の行動許可を設定するパターンです。 例
「使いやすい」プロダクトには、プロダクトの実用性やユーザー利用の感性による品質だけでなく、利用中のつまづきを解消できるサポート体制やコンテンツの品質、使いやすさを継続して向上できる組織体制など、さまざまな要素が影響します。 デザインシステムは、使いやすさを維持・向上する仕組みの1つとして、高いユーザビリティを実現するためのガイドラインやコンポーネントライブラリなどを提供しています。 複数のプロダクトを複数の開発チームで自立分散的に開発する状況では、その数が増えるほどプロダクト全体で一貫性のあるUIに保つなどの難易度は飛躍的に上がっていきます。 開発者が各々の裁量でガイドラインを参照し活用するだけでなく、準拠すべき共通の判断基準をもとに細部の設計に対しても判断を行なえる、より高度なシステムを提供していきます。 ユーザビリティ（使用性）の定義ユーザビリティを定義した規格は JIS Z 8530
グリッドレイアウト ( グリッドデザイン、グリッドシステム ) はweb制作でのデザイン手法の一つです。 画面やページを縦横に分断する直線で格子状に分割し、これを組み合わせてブロック内の要素の大きさや配置を決定していく方法です。 グリッドはさまざまなレイアウト間の一貫性を維持しデザイン上の意思決定を迅速化するのに役立ち。グリッドを使用すると様々なスクリーンサイズでの配置やレイアウトをより正確にコントロールすることができます。 元を辿るとグリッドシステムはヨゼフ・ミューラーブロックマン(Josef Müller-Brockmann, 1914年5月9日 - 1996年8月30日 スイスのGraphic designer )が考案したデザインの手法だそうです。 960 Grid System https://960.gs/ デモページ 960 Grid Systemはページ幅 960px(コン
弱視・ロービジョンのユーザーのウェブ利用時の課題と解決案(WIP) | アクセシビリティ | SmartHR Design System
弱視・ロービジョンのユーザーの特性と利用環境弱視・ロービジョンのユーザーの多くは、画面拡大や色反転などの支援技術を活用して、ウェブを利用します。 弱視・ロービジョンの視覚特性と、支援技術の仕様によって、特有の困難に直面することがあります。 このページでは、弱視・ロービジョンのユーザーがSmartHR製品を利用する際に観察された問題点と、その解決案をまとめています。 画面拡大弱視・ロービジョンのユーザーは、OSの標準機能や専用ソフトを用いて画面の全体や一部を拡大して閲覧することがあります。拡大時はウェブページ全体を俯瞰することが難しくなります。 色反転機能弱視・ロービジョンのユーザーは、画面上の色を見やすい組み合わせに変更したり、色を反転するOSの設定や機能を利用することがあります。設定や機能の仕様により、ウェブページのUIは任意の色の組み合わせで表示されます。 スクリーンリーダー弱視・ロー
適切なリンクテキストを設定すると適切なリンクテキストを設定すると、ユーザーは目的のリンクにたどりつきやすくなります。 以下は、適切なリンクテキストが特に役立つ状況の例です。 例1: リンク先のページを開けないときリンク先のページを開けないときに、以下のような状況があります。 リンク先のページが削除などの理由で、閲覧不可リンク先のアドレスが正しくないウェブサイトが印刷された紙の資料を見ているこのような状況でも、リンクテキストでリンク先について説明されていれば、リンクによって提供されていた情報に近づくことができます。 リンクテキストから、どんなページにリンクしていたか推測できるページタイトルなどの情報を利用して、見られるはずだった情報について検索できる例2-1: リンクだけを拾い読みするとき(視覚的な拾い読み)時間に限りがあるユーザーは、ページを拾い読み・斜め読みします。リンクテキストでリンク
デザイントークンの目的デザイナー・エンジニアに低レイヤーな統一言語を提供します。開発設計担当者に必要な情報を明確に伝えられます。スケーラブルで一貫性のあるプロダクト設計を可能にします。ハードコードな設計を減らし、変更に強いプロダクト開発を可能にします。効率的に速いインターフェース設計を可能にします。種類SmartHR Design Systemでは2つのトークンを提供します。 プリミティブトークン具体性のある値です。もっとも低レイヤーで原子的な意味を持つトークンです。十分な値と、増減も容易な名前空間を設定しておくことが望ましいです。セマンティックトークン特定のコンテキストに関連した値です。トークンの意図した目的を伝えるのに役立ちます。単一の意図を持つ値が、複数の場所に現れる場合に使います。参考文献https://www.lightningdesignsystem.com/design-to
はじめにこの手引きはレビュー依頼時の必要事項を網羅的にまとめ、指針として共有するものです。レビュー時の迷いを減らし、レビュー相手への負荷の軽減する目的で定義しています。この手引きはレビューの手段を強制するものではありません。迷ったらお手本とし、必要があればカスタムしてください。項目に更新・改修・削除が必要な場合、どんどん編集していきましょう。本手引きの使い方「推奨事項」として書かれていることは、できるだけその方法に沿ってレビュー依頼をすると望ましい事項です。「任意事項」は、状況に応じて対応する、または不要な事項です。レビュー時は、レビューテンプレートをコピーして文書を作成して使ってください。その後のやり取り方法は各ツールに準拠します。レビューとはレビューはクオリティを高め、レビュー依頼者が気づかないことへの気づきを与えるものです。レビューは意見の押し付けではなく、ディスカッションです。レビ
よくあるテーブルで複数のオブジェクトに対して一括操作するUIのパターンです。 構成「よくあるテーブル」のなかで、複数オブジェクトへの一括操作に関するUIは、以下の要素で構成されます。 テーブル内のその他の要素については、「よくあるテーブル」の構成を参照してください。 一括選択するチェックボックス（必須）個別選択するチェックボックス（必須）テーブル内の一括操作エリア一括操作エリアの表示選択状態の表示わくわくチェック（すべてのオブジェクトの選択）一括操作ボタン 1. 一括選択するチェックボックステーブル内の要素をすべて選択できるチェックボックスです。 デフォルトは未選択状態で、クリックされるとテーブルに表示されているオブジェクトをすべて選択状態にします。 表示しているページ外のオブジェクト（他のページのオブジェクト）は選択状態にしません。 「一括選択するチェックボックス」が未選択状態のときに、
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アクセシビリティ | SmartHR Design System
UI文言を検討するときのSmartHR Design Systemの歩き方｜稲葉志奈
取り返しのつかない操作 | デザインパターン（共通） | SmartHR Design System
Material 3 やめました / Good-bye M3 design system
UI2: Figma's Design System | Figma
What Is a Design System | Design Systems 101 | Figma Blog
ヘルプページの書き方 | ヘルプセンター | SmartHR Design System
Spectrum, Adobe’s design system
How to classify your design system—a framework
The Design System Ecosystem | Big Medium
Figmaの使いやすいDesign Systemの作り方~Color,Font,Variants~｜Nviveto
用字用語：一覧 | 用字用語 | SmartHR Design System
コンポーネント | プロダクト | SmartHR Design System
ウェブサイト | タイポグラフィ | SmartHR Design System
Jetpack ComposeでLINE Design Systemを実装する
モーダルなUI | デザインパターン（共通） | SmartHR Design System
Button | コンポーネント | SmartHR Design System
Design System Guild を立ち上げました | Wantedly, Inc.
TextLink | コンポーネント | SmartHR Design System
[mixi]「ゲート」： ニュートリノが届く道筋（＝ - Human Design System (HDS) | mixiコミュニティ
Token(トークン)とDesign System(デザインシステム)の違いとは？｜Nviveto
ユーザビリティテストの計画をはじめる | ユーザビリティテスト | SmartHR Design System
権限設定 | デザインパターン（共通） | SmartHR Design System
ユーザビリティ（使用性） | プロダクト | SmartHR Design System
Grid layout design system
リンクテキスト | アクセシビリティ | SmartHR Design System
デザイントークン | プロダクト | SmartHR Design System
デザインレビュー | デザインの進め方 | SmartHR Design System
テーブル内の一括操作 | デザインパターン（共通） | SmartHR Design System