Upgrade to Pro — share decks privately, control downloads, hide ads and more …

加速するコンポーネント設計入門 / Component Design as an Accelerator

ダーシノ
October 07, 2022

加速するコンポーネント設計入門 / Component Design as an Accelerator

社内勉強会用

デザイナーとフロントエンドエンジニアの境界をなくし、UI開発を加速させるためのコンポーネント設計入門
※フロントエンドエンジニア視点

[Keywords]
- 共通認識としてのデザインシステム
- 共通認識としてのコンポーネント設計

ダーシノ

October 07, 2022
Tweet

More Decks by ダーシノ

Other Decks in Design

Transcript

  1. 実践 Atomic Design - Atoms Atoms 最小のコンポーネント単位 HTMLの1つの要素 ≒ Atoms

    SearchButton <button type="submit">Search</button> SearchInput <input type="search">
  2. 実践 Atomic Design - Molecules Molecules Atoms を組み合わせたコンポーネント単位 SearchForm <div

    class="search-form"> <SearchInput /> <SearchButton>Search</SearchButton> </div>
  3. 実践 Atomic Design - Organisms Organisms Molecules(+ Atoms) を組み合わせたコンポーネント単位 HeaderMenu

    <header class="header-menu"> ... <SearchForm> <SearchInput /> <SearchButton>Search</SearchButton> </SearchForm> </header>
  4. 世の中、そんなに単純じゃない Atomic Design のルールだけでは、どうしようもできないことがある 原理主義的になりすぎると運用が難しくなる <!-- Atoms だよね --> <Button>Submit</Button>

    <!-- Atoms?Molecules? --> <Button> <Icon /> Submit </Button> Button は Atoms に分類できる Icon を含んだ Button はいったい Atoms or Molecules のどちらになるんだ?!
  5. 命名規則 - Vue.js スタイルガイド Atoms Base や App をPrefixにする htmlタグとコンフリクトするため複数単語で命名する

    例: BaseButton 、 AppButton <AppButton type="submit">Submit</AppButton> <AppLabel for="search-text">Search...</AppLabel> <AppSearchInput id="search-text" />
  6. 命名規則 - Vue.js スタイルガイド Molecules以上 複数単語をつける(htmlのタグとコンフリクトさせないため) 例: TodoItem 、 SearchForm

    ページに1つしか存在しないコンポーネントには The をつける 例: TheHeader 、 TheSidebar 密結合のコンポーネントは親の名前(ドメインの名前)をつける 例: TodoList > TodoListItem > TodoListItemButton
  7. 命名規則 - Vue.js スタイルガイド(続き) Molecules以上 <TheHeader></TheHeader> <TodoList> {items.map(item => {

    return <TodoListItem data={item} /> })} </TodoList> <TodoListItem> <span>{ item.name }</span> <TodoListItemButton>...</TodoListItemButton> </TodoListItem>
  8. 参考リンク Design Systems 101 | Nielsen Norman Group Atomic Design

    | Brad Frost Design Tokens Format Module | W3C Community Group スタイルガイド | Vue.js