AWS Dev Day 2023 Tokyo: Small Design System
ちいさくはじめるデザインシステム
本がある(マルチプロダクト向けのやつには特に有用)
デザインの再現性を高める
一貫した製品体験を効率よく表現する
そのためのドキュメントやリソース全般
リソースには、ロゴや写真・イラストなども含まれる
株式報酬をより報酬として意識できるようなサービスを作っている
このためのデザインシステムを作りたかった
デザイントークン
Primitive token
4xlarge みたいな(フォントサイズ44px)
Semantic token
Heading1 みたいな文脈、マークアップで使うっもの
「まず最初にこれは作りましょう」レベルで便利
定義はNotionで、実装はCSS Modulesで
コンポーネントの props に semantic token を指定できるようにしている
逆に、コンポーネントに任意のCSSを渡せるようにしない
CSSを使いたい場合、なにか間違えているはず、という設計
margin padding も同一
余白専用のコンポーネントを作って責務を寄せている
Figmaをエンジニアも使えるようにする
今回のスライドもFigmaで作っている
Figmaでスライドを作るのは入門としてもとても良い!
エンジニアもデザインシステムを作るメンバーである!