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
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
270
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
540
rage against annotate_predecessor
junk0612
0
170
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
アセットのコンパイルについて
ojun9
0
130
Cache Me If You Can
ryunen344
2
4k
Improving my own Ruby thereafter
sisshiki1969
1
160
個人軟體時代
ethanhuang13
0
330
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
testingを眺める
matumoto
1
140
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Done Done
chrislema
185
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Fireside Chat
paigeccino
39
3.6k
Docker and Python
trallard
46
3.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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の自動生成やリリース自動化な どに取り組んでいきたい 運用面・技術面含めて誰でも気軽に触れるデザインシステムを目指していき たい
ご静聴ありがとうございました!