フロントエンジニア、はじめてのデザインシステム
はじめに
フロントエンドエンジニアの僕が、初めてデザインシステム(というよりスタイルガイド)を作成することとなった。
作成する際に、僕が「あったら嬉しいな」と思って作成したものをまとめる。
参考程度に僕の情報として、直近2年はReactでフロントエンド担当。Amazonで「デザイン」と検索して出てくる上の方の書籍を数冊読んでいる程度のエンジニア。
僕の考えるデザインシステム
デザインシステムとは!!
暗闇の荒野に！！
進むべき道を切り開くものだッ！！
…「デザインシステム」という言葉自体は結局、概念であって、以下を目指せたらいいかな。
- アプリケーション内のUIの一貫性を保てる
- デザイナーのデザイン工数短縮につながる
- エンジニアの実装工数短縮にもつながる
要は仕事で楽をするための道具です。
(プロジェクトを丁寧に早く進めるための道具です。)
参考にしたもの
Design Systems for Figmaの中でも特にGitLab Component Libraryを参考にしました。
ちなみにサイトの見方は以下。
多分、最初の方に考慮されるもの
かつ、変更が少ないものとして、以下があると思う。
- Color Pallte (Primary Buttonの色とかベースカラー)
- Typography (タイトルは〇〇remとか)
- 画面サイズ (PC、スマホ、または両方)
- 使用頻度高い部品 (ボタンなど)
上記は語れるほど知識がないので省略。
エンジニア的に考慮されていると嬉しいもの
- Spacingを考慮したレイアウト
- (可変要素の)min, max-width(height)
具体的に何が知りたいか、順番に説明する。
Spacingを考慮したレイアウト
以下はちょっと、大げさな例。
「そのボタン、paddingはどれくらい？」問題。
「OKボタン」があったとして、「OK」が中央寄せなのは分かる。
文字数の多い「DELETEボタン」が欲しいとき、左右の余白はなくなるの？
そんなわけはない。余白は想定しているはずである。
それを定義してあると実装しやすいし、アプリケーション内のUIの統一もしやすいはず。
GitLab Component Libraryの中でも特に「Spacing」は、まとまってて良いなと思った。
(2021/12/13時点で「In progress」と書いてある。)
ここまでのものをプロジェクト初期にまとめるのは難しいと思うが、適度にまとめていくべき内容であると思う。
部品単位だけではなく、レイアウトとしても定義しておいてもらえると、きっとエンジニアは嬉しい。
以下みたいな感じ。「paddingがあって中央寄せだね」と分かる。
もう少し詳細例を出すなら以下。
「headerとbodyのgapは〇〇pxだね」と分かる。
min, max-width(height)
次は「min, max-width(height)」についてである。
以下のような覚えはあるだろうか？
「サーバーから取得した文字列を表示するぞ！」
↓
「うわっ！文字数多すぎて、レイアウトがダサくなっちゃった！！」
固定ラベル以外は常に「表示文字数多い問題」を考慮する必要がある。
ラベル表示であれば、
- 折り返し表示にする
- 省略表示(text-overflow: ellipsis)にする
- ツールチップで見えない文字を表示する
文字を表示するだけのダイアログの場合、
- 最小サイズを設定する
- 最大サイズを設定する
これらを意識しないと以下のようなダイアログが生まれちゃう。
左はちょっと、ダサいですよね？
ダイアログなんかだと、当然Spacingも意識しておく必要がある。
文字数なんかはダミーデータ表示の時から、長い文字列を入れるクセをつけとくといいんですかね。
おわりに
「代わりに投稿」用のために、さっと資料を書きました。
これを機に、「さいきょうのデザインシステム」を考え始めていこうかなと思います。
Discussion