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
旅行プランAIエージェント開発の裏側
ippo012
2
890
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
Deep Dive into Kotlin Flow
jmatsu
1
310
機能追加とリーダー業務の類似性
rinchoku
2
1.2k
私の後悔をAWS DMSで解決した話
hiramax
4
210
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
480
Cache Me If You Can
ryunen344
2
640
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
290
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
22
12k
AIコーディングAgentとの向き合い方
eycjur
0
270
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
510
Rancher と Terraform
fufuhu
2
240
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Six Lessons from altMBA
skipperchong
28
4k
Code Review Best Practice
trishagee
70
19k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
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の自動生成やリリース自動化な どに取り組んでいきたい 運用面・技術面含めて誰でも気軽に触れるデザインシステムを目指していき たい
ご静聴ありがとうございました!