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
50
Other Decks in Programming
See All in Programming
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
730
Ktorで簡単AIアプリケーション
tsukakei
0
100
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
240
Catch Up: Go Style Guide Update
andpad
0
250
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
Pythonに漸進的に型をつける
nealle
1
120
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
330
Devvox Belgium - Agentic AI Patterns
kdubois
1
150
CSC509 Lecture 07
javiergs
PRO
0
240
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
290
Featured
See All Featured
Writing Fast Ruby
sferik
630
62k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Speed Design
sergeychernyshev
32
1.2k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Become a Pro
speakerdeck
PRO
29
5.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
It's Worth the Effort
3n
187
28k
Documentation Writing (for coders)
carmenintech
75
5.1k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
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の自動生成やリリース自動化な どに取り組んでいきたい 運用面・技術面含めて誰でも気軽に触れるデザインシステムを目指していき たい
ご静聴ありがとうございました!