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
110
開発者フレンドリーなデザインシステムを支える技術
shinbey221
July 28, 2022
Tweet
Share
More Decks by shinbey221
See All by shinbey221
カオナビデザインシステムのこれまでとこれから
shinji_bekki
0
24
Other Decks in Programming
See All in Programming
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.3k
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
410
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.3k
Code Reviews
bkuhlmann
4
890
PHPはいつから死んでいるかの調査
chiroruxx
1
400
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
GitHub Copilotのススメ
marcy731
1
200
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
650
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
380
雑に思考を整理する技術と効能
konifar
60
29k
Featured
See All Featured
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
4 Signs Your Business is Dying
shpigford
175
21k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Web development in the modern age
philhawksworth
202
10k
Into the Great Unknown - MozCon
thekraken
10
1k
Building Applications with DynamoDB
mza
88
5.6k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
We Have a Design System, Now What?
morganepeng
43
6.8k
Automating Front-end Workflow
addyosmani
1356
200k
Documentation Writing (for coders)
carmenintech
60
3.9k
Happy Clients
brianwarren
92
6.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
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の自動生成やリリース自動化な どに取り組んでいきたい 運用面・技術面含めて誰でも気軽に触れるデザインシステムを目指していき たい
ご静聴ありがとうございました!