AtomicDesignに挑戦した所感 ~Storybookの利用~

管理画面ベースのサイトを構築するにあたり、AtomicDesignを導入しデザイン・フロントトコーディングを進めている。
その中で出た疑問や、つまずきのメモになります。
————
現在、制作中のサイトをVue.jsで構築している。
そのため、Vue.jsに対応しており、コンポーネントパーツをそのまま反映することが出来るStorybookをコンポーネントの管理ツールとして使用している。
プレビュー時には変更をリアルタイムに反映出来ること、「どのようにソースを書くと」「見た目にどんな変化が起こるのか」を、触りながらメンバー間で共有できることは想像していた以上に価値があった。


◆アイコン管理
 使用中のアイコンの確認が行える。
 アイコンの確認の他、サイズ、丸枠配置の有無、アニメーションの有無を切り替えて表示できる。


◆ボタン管理
 使用中のボタンの確認が行える。
 色のパターン確認のほか、サイズ、付随するアイコン、非有効の場合の表示、カプセル型に指定した場合を切り替えて表示できる。