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
Design System Discussion
Search
Yosuke Furukawa
PRO
September 19, 2019
Programming
2
590
Design System Discussion
Yosuke Furukawa
PRO
September 19, 2019
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
3.7k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
190
Removing Corepack
yosuke_furukawa
PRO
9
1.4k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.6k
Strip Types と Storage
yosuke_furukawa
PRO
4
370
Module Harmony について
yosuke_furukawa
PRO
3
1.6k
LTのやり方
yosuke_furukawa
PRO
16
2.3k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
750
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5.7k
Other Decks in Programming
See All in Programming
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
Domain-Driven Transformation
hschwentner
2
1.9k
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
Formの複雑さに立ち向かう
bmthd
1
720
Open source software: how to live long and go far
gaelvaroquaux
0
620
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Designing for Performance
lara
604
68k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Fireside Chat
paigeccino
34
3.2k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Transcript
Design System Discussion 2019/09/19 @ SmartHR ΦϑΟε
Panelist
ݹͷελϯε • σβΠϯγεςϜջٙ • σβΠϯγεςϜࣗମྑ͍ • අ༻ରޮՌ͕ٙ
͜ͷٞͷΰʔϧ • σβΠϯγεςϜͷٙʹ͍ͭͯҙݟΛͿͭ ͚ɺճΛಘΔ • σβΠϯγεςϜͷམͱ͠ॴΛ͠Δ
ͦͦ • ͏·͍ͬͯ͘Δʁ • य़͞Μ: ͻͱ·ͣೖΕͯΈ͚ͨͲɺࠓͷॴճͤͯΔɻ͜Ε͔Βɺ͏·͍ͬͯ͘Δ͔Ͳ͏͔ʑɺ࡞͍͖͍ͬͯͨͱ ͍͏৺ҙؾ͕͋Δɻ • ݱঢ়ࣾͷޮԽͷͨΊͷπʔϧͱ͔ͯ͠͠ݕ౼͍ͯ͠ͳ͍ •
ࣾͷޮԽ͕ϝΠϯͷ͜ͱ͕ଟ͍ => Ϗδωε·Ͱམͱ͢ॴ·Ͱ͍͚ͯͳ͍ • ੴڮ͞Μ: ಉ͘͡ɺࠓͷॴͬͯΔ͕ɺ͏·͘ݴͬͯΔ͔Ͳ͏͔ͷධՁ·ͩԼͤͳ͍ɻ • উखʹ࡞ۭͬͯதʹු͘ͷΊ͔ͨͬͨɻ • খ͘͞࡞ͬͯɺϓϩμΫγϣϯͰಈ͍ͯΔΑ͏ʹ͔ͨͬͨ͠ɻ • => ͜͜ୡɺελʔτ͔ͯ͠Β • ٶݪ͞Μ: ͓ۚʹͶͯͳ͍ɺ͏·͘ݴͬͯͳ͍ͱࢥͬͯΔɻ • ·ͩΓग़͠Ͱࢿظؒɺ։ൃੜ࢈ੑʹͪΌΜͱϑΟʔυόοΫ͍ͯ͘͠ͱΑ͍
ͦͦ • ಋೖ͔ͨ͠Γ? • ಋೖͯ͠ӡ༻ͯ͠Δ? • ӡ༻ख़ظ? • य़͞Μ: 1
• ੴڮ͞Μ • ٶݪ͞Μ 3ϲ݄ • य़͞Μ1ؒӡ༻ͯ͠Δ͕ɺ͕ͦͦσβΠϯ౷Ұ͞Εͯͳ͍ɺ։ൃͷUI͕ό ϥόϥͳͲͷঢ়گ͔Β࢝·ͬͨɻ
ͦͦ • σβΠϯγεςϜͷॳखͰΔ͜ͱ: • ٶݪ: ͓ߦّΑͬͯ͘ͳ͍ɺύλʔϯΛચ͍ग़͠ͱ͔ͬͯͳ͍ɺ࠷ॳʹτοϓμϯͷ͋Δ͖࢟ͷશମ ૾࡞ͬͯΔɺػೳతʹཧͯ͠ϘτϜΞοϓ࡞ΔɺτοϓμϯͱϘτϜΞοϓͷ྆ํ͔Β߈ΊΔ • લ৬ΞτϛοΫσβΠϯ͕ࣦഊ =>
ޙͰฉ͘ • ੴڮ͞Μ σβΠϯγεςϜͷγεςϚνοΫͳͱ͜ΖΛ͍Ε͍ͨɺͲ͏ͬͯΓ͚ͯೖΕ͍͔ͯ͘Λ૬ ஊ • Ұ୴ϖʔδΛεΫγϣͯ͠ɺϋαϛͰͬͯ·ͱΊ͍ͯͬͨ • ࠷ॳ͔Βᘳࢦ͞ͳ͔ͬͨ • ΧϥʔύϨοτ࠷ॳ͔ΒܾΊͯྑ͍ͷͰ => ૾ͱҧͬͯͨ͘͞Μ͋ͬͨɻ • य़͞Μ ελΠϧΨΠυΛ࡞͍ͬͯͬͯɺ͢Ͱʹ͋Δϖʔδ͔ΒίϯϙʔωϯτΛચ͍ग़͢ͷҰॹɺύʔ πύʔπͰ࡞͍ͬͯ͘ɻ
ͦͦ • σβΠϯγεςϜͬͯݴͬͨ࣌ʹͲ͜·ͰͬͯΔ? • UIKitͱ͔࡞ͬͯΔʁ • Styleguideͱ͔ʁ • ͦΕͱσβΠϯͷυΩϡϝϯτԽ =
ϧʔϧͱݪଇͷ໌จԽͷΈʁ • य़͞Μ: UIKit, StyleGuide, React Component ͷఏڙ • ੴڮ͞Μ: ΄΅ࣅ͍ͯΔɺUIιʔείʔυɺ։ൃऀ͚υΩϡϝϯτɺσβΠϯͷυΩϡϝϯτ Խ͕Ͱ͖ͯͳ͍ • ٶݪ͞Μ: sketch library, React Component, UIKit આ໌͢ΔΨΠυϥΠϯ • σβΠφʔ͕ࣗίʔσΟϯά͍ͯ͠Δ
৫ • σβΠφʔͱΤϯδχΞ͕Ͳ͏ͬͯڠۀͯ͠ Δͷ͔ •
৫ • σβΠφʔɺΤϯδχΞ͚ͩͰͳ͘ɺϓϥϯφʔ·Ͱ͍ࠞͥͯ͘ඞཁ͕͋ΔͷͰɺ ͦͷลΓͷԹײΛͲ͏ͬͯௐͯ͠Δͷ͔ • ੴڮ͞Μ: σβΠφʔ͕ϫΠϠʔΛߟ͑Δ͖ͩͱࢥͬͯΔɺσβΠϯγεςϜΛε ΫϥϜͷதͰಋೖ͢Δ͖ͩͱࢥͬͯΔ͕Ͱ͖͍ͯͳ͍ • य़͞Μ:
σβΠφʔ͚ͩͰͬͯΔɺΤϯδχΞͱڠۀ͜Ε͔ΒɻσβΠφʔ͕ ओମͰͬͯΔ͚ͩͰ͜Ε͔Βͷͱ͜Ζ͕ଟ͍ • ٶݪ͞Μ: SmartHRͰظશһἧͬͯΔ => લ৬ɺσβΠϯΛΩϨΠʹͯ͠ Ϗδωεʹܨ͕Βͳ͍ͷͰʁͱ͋ͬͨͷͰɺࣾϚʔέςΟϯάΩϟϥΫλʔ Λ͍ͯͬͨ͠ɻ • σβΠϯγεςϜνʔϜ ͷ໊લΛ vibes ʹ͍ͯͬͨ͠ɺόΠϒε͋͛͋͛ͬͯ͜ͱʁ
։ൃ • Storybook͕Γ͍͢Ͳ͏ͯ͠Δ? • ٶݪ͞Μ: ઈࢍͬͯΔʂͨͩSmartHRࢿʹ͍ͭͯΈΜͳagreeͳͷͰݴ͏͜ ͱແ͍ɻલ৬ΤϯδχΞͷOKRͷதʹೖΕ͍ͯͬͨɻ • ੴڮ͞Μ: ࡞ͬͨUIϥΠϒϥϦඞͣόʔδϣχϯάͯ͠ΔɺͦͷࠩΘ͔ΔΑ͏
ʹͯ͠Δɺࡉ͔͍ͷඞ͍͔ͣͯ͠ͳ͍ͱ͍͚ͳ͍ɻࣾͷͲΜͳਓͰίϛοτ ͯ͠ྑ͍͜ͱʹͨ͠ɻશʹࣾͰOSSʹ͢ΔͷແͩͬͨͷͰɺϝΠϯϝϯς φΛೖΕΔͳͲΛݕ౼ͨ͠ • य़͞Μ: ࢲ͕Storybookܯͩɻදࣔ֬ೝͱͯ͠࠷ॳ͍͕ͬͯͨɺ͍ͭ࠷ۙ Storybook v5.2͕ग़ͯɺΞϧϑΝ൛͔ΒͬͯΔaddon docs͕ग़ͯɺͦΕʹ߹Θͤ ͯstorybookࣗମΛϝϯςφϯε͍ͯ͠Δ
։ൃ • ͦͦStorybookۦಈͰ։ൃͱ͔ͬͯΔ?
։ൃ • ͦͦStorybookۦಈͰ։ൃͱ͔ͬͯΔ?
Q&A • σβΠϯγεςϜΛطଘͷϓϩδΣΫτʹஈ ֊తʹಋೖͨ͠ਓ or ಋೖ͍ͯ͠Δਓ͕ډΔ͔ ฉ͍ͯ΄͍͠Ͱ͢ʂ
Q&A • 1. ԿΛओతʹσβΠϯγεςϜͷඋΛ࢝Ί·͔ͨ͠ʁ • ex. ϒϥϯυΞΠσϯςΟςΟͷೝɺϢʔβೝෛՙͷ ܰݮɺσβΠϯίετݮɺ࣮ίετݮ • 2.
σβΠϯγεςϜͷӡ༻ΛͲͷׂɺ৬छͷਓ͕ओಋ͠ ͯ·͔͢ʁ
Q&A • σόΠεؒͷࠩΛͲ͏ѻ͏ͷ͔օͷݟฉ ͖͍ͨͰ͢ࢲɻ • ωΠςΟϒͷ iOS ͱ Android Ͱ
Platform ʹ ߹Θͤͨύʔπ (τάϧεΠονͱ͔) ͕͋ͬ ͨ߹ɺWeb ΛͲ͏͢Δ͔ɻ߹ʹΑͬͯ WebView Ͱ͍͢͝ࠔΔΜͰ͢ΑͶɻɻɻ