Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
開発者フレンドリーなデザインシステムを支える技術
Search
shinbey221
July 28, 2022
Programming
0
190
開発者フレンドリーなデザインシステムを支える技術
shinbey221
July 28, 2022
Tweet
Share
More Decks by shinbey221
See All by shinbey221
カオナビデザインシステムのこれまでとこれから
shinji_bekki
0
49
Other Decks in Programming
See All in Programming
Benchmark
sysong
0
280
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
4
240
Goで作る、開発・CI環境
sin392
0
190
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
660
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
Select API from Kotlin Coroutine
jmatsu
1
210
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
290
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
700
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
GraphRAGの仕組みまるわかり
tosuri13
8
510
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
2
240
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Docker and Python
trallard
44
3.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Code Review Best Practice
trishagee
69
18k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Thoughts on Productivity
jonyablonski
69
4.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Transcript
開発者フレンドリーな デザインシステムを支える技術 株式会社カオナビ プロダクト本部 サービス開発部DataFrontierグループ 別城慎治
自己紹介 ・フロントエンドエンジニア 別城 慎治(bekki shinji) @shinji_becky ページリニューアル案件やデザインシステム構築を経て現在は新 規機能開発などに携わっています ・趣味 アニメ、サッカー(最近は見る専門)、旅行
2019年11月入社 株式会社カオナビ プロダクト本部 サービス開発部 DataFrontierグループ 神戸在住 フルリモート ・嫌いなもの、苦手なこと 辛いもの、人の名前を覚えること
今日話すこと Kaonavi Tech Talk #2 ・カオナビデザインシステムの運用について
・カオナビデザインシステムの技術面について ※ 以降カオナビデザインシステムは KDSと省略します Kaonavi Tech Talk #7 ※ 少し前回と重複する部分もあります
今日話すこと Kaonavi Tech Talk #2 ・カオナビデザインシステムの運用について
今日話すこと KDSの技術面について ・技術スタック ・ディレクトリ構成 ・Design Token ・Component ・その他
技術スタック
・React + TypeScript ・styled-components ・Storybook ・Jest + React Testing Library
・REG SUIT ・Webpack ・GitLab 技術スタック
ディレクトリ構成
ディレクトリ構成
ディレクトリ構成 Componentを格納
ディレクトリ構成 ・DesingToken系の定義 ・helper ・animation定義 アイコンなどに利用するsvgファイル 型定義 共通関数 コンポーネントなどをexport StorybookのIntroductionページ
DesingToken
DesignTokenとは? Design tokens are indivisible pieces of a design system
such as colors, spacing, typography scale. デザイントークンとは、色、スペーシング、タイポグラフィの スケールなど、デザインシステムを構成する不可分なピースのことです。 W3C Community Group https://github.com/design-tokens/community-group#design-tokens
None
KDS DesignTokenの利用 importして利用 ThemeProviderから利用 ・styled-componentsのThemeProviderを利用してimportせずに利用できる ・TSの補完が効くので利用しやすい
ThemeProvider KDSのDesinTokenなどのスタイル定義系をまとめた オブジェクト ▪ ThemeProviderに設定 FOUDATION_STYLEをstyled-componentで提 供されているThemeProviderのthemeに設定す るとpropsから利用することができる ▪ FOUDATION_STYLE
・importしなくても利用できる ・直感的に利用できる
Component
Component ・classNameの受け取り ・HTMLElementの属性の受け取り ・buttonタグやaタグなどのattributes ・refのforward ・forwardRef利用時のdisplayNameの指定 汎用的なコンポーネントを実装する上で必要な考慮
Component KDSでのコンポーネントは実装用の関数を用意
Component KDSでのコンポーネントは実装用の関数を用意
Component ・refのforward ・classNameを受け取れるように実装 ・displayNameの設定 これらを内部で行なっています コンポーネント独自の型 HTMLタグの指定をしてそ のタグの型を付与する
その他
Storybook MDX ・MDXはMarkdownとJSXを組み合わせた標準のファイル形式 ・StoryはCSF(Component Story Format) or MDXで記述可能 ・Markdownに慣れてる人が書きやすい
Manual Publish パイプラインの「publish-manual」ジョブを実行すると検証用 バージョンとして利用できる
最後に
最後に コンポーネントの実装に関してはwithKDSComponentを用意することで最 低限のルールを担保したコンポーネントの実装ができるようになった 今後は現在取り組んでいるCHANGELOGの自動生成やリリース自動化な どに取り組んでいきたい 運用面・技術面含めて誰でも気軽に触れるデザインシステムを目指していき たい
ご静聴ありがとうございました!