「年の瀬に振り返る Figma & React コンポーネントでのサービス開発」に参加してきました

spacemarket.connpass.com

タイトル 発表者
Figma・Storybookでのコンポーネント運用から考えるデザインシステムとの付き合い方 伊東 将太
2019年の Atomic Design コンポーネント設計 原口 渉
パネルディスカッション 横井 麻里乃 / 小林 春彦

Figma・Storybookでのコンポーネント運用から考えるデザインシステムとの付き合い方

  • 伊東 将太さん

FigmaでUIコンポーネントを運用

  • どんなコンポーネントがあるか視認性を高めたい
  • 操作感を確かめられるようにしたい
  • AtomicDesign
    • Atomsはデザイナー
    • それ以降は実装しながら
  • デザイナーとフロントエンドエンジニアの協業が楽になった

運用していく中で

デザインシステム

  • デザイン原則
  • ガイドライン
  • カラーパレット
  • アイコン
  • パターンライブラリ

Storybook

  • コードでデザインシステムを可視化できるのがいい
    • より本番に近い状態

まとめ

  • プロダクトの方向性を明確にして開発効率/一貫性を向上したければ取り入れる価値ありそう

2019年の Atomic Design コンポーネント設計

  • 原口 渉さん

マークアップ

コンポーネント推進PJ

共通コンポーネントの反映

  • せっかく用意してあるのに使われていないページがあった
    • 同じコンポーネントwpそれぞれで実装しているため修正もれやデザインのばらつきが起きる
  • 共通ライブラリを変更したら利用者も更新されるようにした

コンポーネントの粒度と命名規則の策定

  • 明確に決めてなかったので作業者によってばらついていた
  • 似た見た目でもコンポーネントを分ける
    • 再利用性は副次的なものと考えた
  • OrganismsとMoleculesの基準
    • 単体で意味を成せばOrganisms
  • 命名規則
    • Page名を接頭辞につける

課題管理フローの策定

  • JIRAで可視化

プロダクトとStorybookの状態が異なる

  • 本番だけ反映されてStorybookが更新されていないことがあった
    • storiesのファイルを先に書くようにした?
    • 定期的にチェックするようにした

まとめ

  • デザイナーとエンジニアで共通の認識を持つことができた
  • デザイナーと連携とりやすくなった

パネルディスカッション

  • 横井 麻里乃さん
  • 小林 春彦さん

なぜAtomicDesign

  • photoshopのファイル数が150超
    • 管理しきれなくなった
  • もともとデザイナーとエンジニアで別リポジトリで同じようなもの管理してた

組織的なコンポーネント運用の課題

  • リリース優先でコンポーネントをきれいに運用することは後回しになりがち
    • Atomsだけはきれいに管理すると決めている
  • 同じ設計ルールで誰でも作れるようにする工夫が必要
    • 自動化とか仕組み化をしていきたい

なぜFigma

  • いろいろ変遷してる
    • コミュニケーションがしやすいからFigmaにした
    • Figmaにコメント書くとSlack連携できるように