advent calendar
12日目はドキュメントについて。 When creating a design system it’s important to be mindful that you won’t be the only designer (or developer) who works with it. Plasma design system – Andrew Couldwell – Medium デザインシステムを作る上で、デ…
11日目はvoice & tone。 voice & tone は、UI上でのユーザとのコミュニケーションについてのあり方を示すことと、その状況による使い分け方に関してのガイドラインのことを指しているもの。例えば、何かしらエラーが発生したときにエラーメッセージをどのよ…
10日目はアクセシビリティ(A11y)について。 アクセシビリティは、どのようなユーザに対しても十分な利便性が保たれてるかどうかを計るもので、デザインシステムにおいて重要な要素の1つ。多くのデザインシステムでは、アクセシビリティに関してガイドライ…
9日目はモーションについて。 デザインシステムにおいてモーションをどのように管理するか。 モーションの分類 カラーパレットなどと同様に、モーションもプロダクト内でどのようなパターンを持っているのか、全て洗い出す必要がある。全てのモーションが同…
7日目はスペースについて。 デザインシステムにおいてスペースをどのように管理するか。 構成要素 UI上の空間を作り出すものをスペースの構成要素と考えると、CSSにおいてはmargin、paddingやtop、leftなども含めてスペースに該当すると考えられる。flexbox…
6日目はタイポグラフィについて。 デザインシステムにおいてタイポグラフィをどのように管理していくか。 構成要素 まずタイポグラフィはどのような要素で構成されるか。代表的なものをあげると大体以下のようなものになる。 font-family font-size font-wei…
1日目から4日目まで、デザインシステムの構成要素やInterface Inventoryなどを対象にして、デザインシステムの全体像の把握や必要性について書いた。 5日目からはデザインシステムの構成要素それぞれについて見ていく。5日目は、カラーパレットについて。 デ…
4日目はデザイントークンについて見ていく。 Design Tokens(デザイントークン)とは Design Tokens are an abstraction for everything impacting the visual design of an app/platform.— Sönke Rohde (@soenkerohde) 2016年6月24日 デザイントークンとは…
3日目はInterface Inventoryについて見ていく。 An interface inventory is a comprehensive collection of the bits and pieces that make up your interface. Interface Inventory | Brad Frost Interface Inventoryとは、プロダクトのUIを作り上げている…
1日目に、デザインシステムとはプロダクトであり、他の全てのプロダクトで利用可能なUIのエコシステムを提供するものであること等について学んだ。 じゃあ、実際にデザインシステムを作ろうとなったとして、どういうもので構成するべきなのか。 medium.com …
1日目は、まずデザインシステムとは何かを整理。 デザインシステムとは何か。いくつかの資料に目を通した上で、主要要素と考えるのは以下の点。 プロダクトにおけるデザインのSingle Source of Truth 従来のスタイルガイドがプロダクトのコードベースの中で…
デザインシステムについて学ぶ1人advent calendarを以下の予定で進める。 日付 内容 12/01 デザインシステムとは何か 12/02 デザインシステムの構成 12/03 Interface Inventory 12/04 Design Tokens 12/05 カラーパレット 12/06 タイポグラフィ 12/07 スペー…