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
560
Design System Discussion
Yosuke Furukawa
PRO
September 19, 2019
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Removing Corepack
yosuke_furukawa
PRO
9
1.2k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.3k
Strip Types と Storage
yosuke_furukawa
PRO
4
320
Module Harmony について
yosuke_furukawa
PRO
3
1.5k
LTのやり方
yosuke_furukawa
PRO
16
2.1k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
670
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
25
9.4k
JavaScript Server Runtime History
yosuke_furukawa
PRO
9
3.7k
Other Decks in Programming
See All in Programming
クラウドサービスの 利用コストを削減する技術 - 円安の真南風を感じて -
pyama86
3
390
[PHPカンファレンス沖縄2024]「無理なくできるだけ安全に」テストもないレガシーコードをリファクタリングするテクニック
ikezoemakoto
3
130
タイミーにおけるデータの利用シーンと データ基盤の挑戦
marufeuille
4
3.2k
PHPを書く理由、PHPを書いていて良い理由 / Reasons to write PHP and why it is good to write PHP
seike460
PRO
5
460
Integrating AI in Your Enterprise Java Applications
ivargrimstad
0
120
複数プロダクトの技術改善・クラウド移行に向き合うチームのフレキシブルなペア・モブプログラミングの実践 / Flexible Pair Programming And Mob Programming
honyanya
0
230
WEBアプリケーションにおけるAWS Lambdaを用いた大規模な非同期処理の実践
delhi09
PRO
7
4.1k
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
530
What is TDD?
urakawa_jinsei
1
220
VS Code extension: ドラッグ&ドロップでファイルを並び替える
ttrace
0
170
perl for shell, awk and sed programmers
mackee
1
700
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
6
1.7k
Featured
See All Featured
Music & Morning Musume
bryan
46
6.1k
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
We Have a Design System, Now What?
morganepeng
49
7.2k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2k
Code Reviewing Like a Champion
maltzj
519
39k
Building Better People: How to give real-time feedback that sticks.
wjessup
362
19k
How GitHub Uses GitHub to Build GitHub
holman
473
290k
GraphQLとの向き合い方2022年版
quramy
43
13k
Raft: Consensus for Rubyists
vanstee
136
6.6k
The Invisible Side of Design
smashingmag
297
50k
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 Ͱ͍͢͝ࠔΔΜͰ͢ΑͶɻɻɻ