| タイトル | 発表者 |
|---|---|
| Figma・Storybookでのコンポーネント運用から考えるデザインシステムとの付き合い方 | 伊東 将太 |
| 2019年の Atomic Design コンポーネント設計 | 原口 渉 |
| パネルディスカッション | 横井 麻里乃 / 小林 春彦 |
Figma・Storybookでのコンポーネント運用から考えるデザインシステムとの付き合い方
- 伊東 将太さん
FigmaでUIコンポーネントを運用
- どんなコンポーネントがあるか視認性を高めたい
- 操作感を確かめられるようにしたい
- AtomicDesign
- Atomsはデザイナー
- それ以降は実装しながら
- デザイナーとフロントエンドエンジニアの協業が楽になった
運用していく中で
- 前に似たようなコンポーネントあったような・・・
- UIコンポーネント集はFigma
- どういう目的でどういう画面で使われてるかを見られるドキュメントがない
- ガイドラインはあるけどその背景が書かれたものがない
デザインシステム
- デザイン原則
- ガイドライン
- カラーパレット
- アイコン
- パターンライブラリ
Storybook
- コードでデザインシステムを可視化できるのがいい
- より本番に近い状態
まとめ
- プロダクトの方向性を明確にして開発効率/一貫性を向上したければ取り入れる価値ありそう
2019年の Atomic Design コンポーネント設計
- 原口 渉さん
マークアップ
コンポーネント推進PJ
共通コンポーネントの反映
- せっかく用意してあるのに使われていないページがあった
- 同じコンポーネントｗｐそれぞれで実装しているため修正もれやデザインのばらつきが起きる
- 共通ライブラリを変更したら利用者も更新されるようにした
- プライベートなnpmリポジトリ化してる
コンポーネントの粒度と命名規則の策定
- 明確に決めてなかったので作業者によってばらついていた
- 似た見た目でもコンポーネントを分ける
- 再利用性は副次的なものと考えた
- OrganismsとMoleculesの基準
- 単体で意味を成せばOrganisms
- 命名規則
- Page名を接頭辞につける
課題管理フローの策定
- JIRAで可視化
プロダクトとStorybookの状態が異なる
- 本番だけ反映されてStorybookが更新されていないことがあった
- storiesのファイルを先に書くようにした？
- 定期的にチェックするようにした
まとめ
- デザイナーとエンジニアで共通の認識を持つことができた
- デザイナーと連携とりやすくなった
パネルディスカッション
- 横井 麻里乃さん
- 小林 春彦さん
なぜAtomicDesign
組織的なコンポーネント運用の課題
- リリース優先でコンポーネントをきれいに運用することは後回しになりがち
- Atomsだけはきれいに管理すると決めている
- 同じ設計ルールで誰でも作れるようにする工夫が必要
- 自動化とか仕組み化をしていきたい
