Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
フロントエンドカンファレンス資料沖縄2022_mk0812
mk0812
November 19, 2022
Programming
1
30
フロントエンドカンファレンス資料沖縄2022_mk0812
フロントエンドカンファレンス資料沖縄2022です!
mk0812
November 19, 2022
Tweet
Share
More Decks by mk0812
See All by mk0812
BASE_Tech_Talk_2__2022年にBASEへ入社したエンジニアが語る技術的チャレンジ__mk0812_.pdf
mk0812
0
48
Other Decks in Programming
See All in Programming
How to Fight Production Incidents?
asatarin
0
230
Gradle build: The time is now
nonews
1
500
データドリブンな組織の不正検知
fkubota
0
300
TokyoR#103_DataProcessing
kilometer
0
550
Hono v3 - Do Everything, Run Anywhere, But Small, And Faster
yusukebe
4
140
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
630
フロントエンドで 良いコードを書くために
t_keshi
3
1.7k
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
130
Rust、何もわからない...#6発表資料
ryu19
0
140
Git Rebase
bkuhlmann
10
1.2k
T3 Stack and TypeScript ecosystem
quramy
3
800
The State of Kotlin | FOSDEM 2023
prof18
1
110
Featured
See All Featured
The Cult of Friendly URLs
andyhume
69
5.1k
Building Flexible Design Systems
yeseniaperezcruz
314
35k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
175
9.1k
Writing Fast Ruby
sferik
613
58k
The Straight Up "How To Draw Better" Workshop
denniskardys
226
130k
A better future with KSS
kneath
230
16k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
197
10k
4 Signs Your Business is Dying
shpigford
171
20k
Robots, Beer and Maslow
schacon
154
7.3k
Building an army of robots
kneath
301
40k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
Into the Great Unknown - MozCon
thekraken
2
300
Transcript
©︎ 2012-2022 BASE, Inc. 1 ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ2022 2022/11/19 Figma TokensͱStyle Dictionary͔Β
࢝ΊΔσβΠφʔͱΤϯδχΞ͕ ࿈ܞ͍͢͠औΓΈͷ
©︎ 2012-2022 BASE, Inc. 2 ࣗݾհ ࢯ໊: Matsuoka Kosuke ॴଐ:
BASEגࣜձࣾ ೖࣾ: 2022/4 ~ ݱࡏ ۀ: ϑϩϯτΤϯυΤϯδχΞ ReactɺVueɺPHPΛ৮͍ͬͯΔ ςοΫϒϩάॻ͍ͨͷͰ͓࣌ؒ͋Δ࣌ʹͥͻˣ BASEϑϩϯτΤϯυMonorepo ԽͷऔΓΈ mk0812 @mk0812__
©︎ 2012-2022 BASE, Inc. 3 ࠓͷຊ σβΠφʔͱΤϯδχΞͷ ࿈ܞͬͯͲ͏͢Ε͍͍͔
©︎ 2012-2022 BASE, Inc. 4 ࠓͷຊ ͦΕϧʔϧͰ͢
©︎ 2012-2022 BASE, Inc. 5 ͱ͋ΔݱͰ... ΤϯδχΞ σβΠφʔ font-size͋͛ͯ΄ ͍͠
࣮ͨ͠ޙͷσβΠφʔͷࢦఠ padding1px ͭΊͯ΄͍͠ Typography ͳΜ͔͓͔͍͠... ࣮ͨ͠ޙʹ ৭ʑࢦఠ͕͋Δ... ࿈ܞ࣮ͯͯ͠͠Δͱ͜Ζ
©︎ 2012-2022 BASE, Inc. 6 ͜Ε࿈ܞෆ͔ ΤϯδχΞͱͨ͠Βʮ1ճͰऴΘΓ͍ͨɺमਖ਼ͳΔ͘ආ͚͍ͨʯ͕ • ࣮ͨ͠ޙʹؾͮ͘͜ͱগͳ͘ͳ͍ •
σβΠφʔͷཁٻΛFigmaͷΑ͏ͳσβΠϯπʔϧΛݟͳ͕Β࣮ͯ͠ࡉ͔ ͍ࢦఠΔ • සൟʹσβΠϯ͕มΘΔΑ͏ͳίϯϙʔωϯτͳ͍ ΤϯδχΞ⁶σβΠφʔͰͷϧʔϧΛ࡞Ζ͏
©︎ 2012-2022 BASE, Inc. 7 ΤϯδχΞͱσβΠφʔͷϧʔϧ ͨͩҋӢʹ࡞ΔͷͰͳ͘ɺ͋ΔఔͷζϨΛղফ͢ΔͨΊʹϧʔϧ ඞཁʢશ͕ͯղফ͞ΕΔͷͰͳ͘ɺແବͳίϛϡχέʔγϣϯΛݮΒͦ͏ʣ ແବͳࢦఠ͕ͳ͘ίϯϙʔωϯτΛ࡞Γ͍ͨ ίϯϙʔωϯτΛ࡞͢Δʹ͋ͨͬͯͷϕʔεͱͳΔ
ϧʔϧʢ৭ɺϑΥϯτʣࣗಈੜ͍ͨ͠ Figma TokensͱStyle DictionaryΛͬͯ ϧʔϧΛܾΊΑ͏
©︎ 2012-2022 BASE, Inc. 8 Figma Tokens × Style Dictionary
©︎ 2012-2022 BASE, Inc. 9 Figma Tokens • Figma Plugin
◦ ৭ɺλΠϙάϥϑΟͳͲΛσβΠϯτʔΫϯͱͯ͠ఆٛ • σβΠϯτʔΫϯJSONܗࣜͰग़ྗ͞ΕΔ • σβΠϯτʔΫϯΛGithubϦϙδτϦͰཧՄೳ + σβΠϯτʔΫϯΛੜ Github ※ࢀߟ: Supported Tokens • Colors (Fill, Border Color — hex, rgba, hsla) • Spacing (Horizontal, Vertical, Gap) • Sizing (Width/Height) • Border Radius (individually or each corner) • Border Width • Opacity • Typography (Font family, font weight, font size, line height, letter spacing, paragraph spacing) • Shadow tokens (both dropShadow and innerShadow) • [Pro]: Composition tokens (think css classes for Figma)
©︎ 2012-2022 BASE, Inc. 10 Style Dictionary • JSONϑΝΠϧͳͲͰߏ͞ΕͨσβΠϯτʔΫϯΛCSSΧελϜϓϩύςΟ ͱͯ͠ग़ྗ͢Δπʔϧ
JSONϑΝΠϧͳͲͰߏ͞Εͨ σβΠϯτʔΫϯ ্هσβΠϯτʔΫϯΛݩʹੜ͞ ΕΔCSSʢSCSSͱ͔Մʣ style-dictionary.config.json ࢀߟ https://github.com/amzn/style-dictionary
©︎ 2012-2022 BASE, Inc. 11 ࿈ܞͯ͠Έͨ ࿈ܞͯ͠ΈͨʢฐࣾͰ৭ʑࢼߦࡨޡதʣ + uiσΟϨΫτϦ ʢσβΠϯτʔΫϯ͔Βੜ͞Εͨ
CSSΛ৴͢Δʣ σβΠϯτʔΫϯΛੜ CSSΛίϯϙʔωϯτʹΈࠐΉɺstorybookͰ ֬ೝͯ͠Β͏ ※ίϯϙʔωϯτ։ൃhygenͱ͔Ͱ ͋ΔఔςϯϓϨʔτԽ͓ͯ͘͠ͱޮత Github
©︎ 2012-2022 BASE, Inc. 12 ࿈ܞͯ͠ΈͨΒͲ͏ͳΔ͔ • ແବͳίϛϡχέʔγϣϯݮΔ ◦ ੜ͞ΕͨCSSΛͱʹίϯϙʔωϯτ͕࡞ΒΕ͍ͯΔͷͰσβΠϯ͕͍͠έʔε
Λআ͍ͯ͏·͍͖ͦ͘͏ ◦ ແବͳίϛϡχέʔγϣϯ͕ͳ͚Ε։ൃޮ্͕Δ • ࣗಈੜͨ͠ʢDesign TokensʣΓָ ◦ story.to.designͳͲFigma X StorybookपΓͷ࿈ܞָ [ิ] • Figma Tokensɹˡ͜͜ʹϑΥʔΧεͨ͠ ◦ ίϯϙʔωϯτ࡞ͷޮԽ • Design Docs ◦ ίϯϙʔωϯτͷӡ༻͓Αͼ༻ํ๏ ྫ v1.1.0 … ʙͱ͍͏propsΛՃ v2.0.0 … primary colorมߋʢมߋܦ Ңͪ͜Βʣ Design Docs
©︎ 2012-2022 BASE, Inc. 13 ·ͱΊ
©︎ 2012-2022 BASE, Inc. 14 ·ͱΊ ΤϯδχΞͱσβΠφʔ͕ ཱͪฦΔϧʔϧ͋Δ͔ • ϧʔϧʢج൫ʣ͕͋Δ͜ͱͰޮྑ͍ϑϩϯτΤϯυ։ൃ͕Ͱ͖Δͱࢥ
͏ ◦ Figma Token + Style Dictionary + (Design Doc)Ͱྑ͍։ൃΛʂ