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
フロントエンドカンファレンス資料沖縄2022_mk0812
Search
mk0812
November 19, 2022
Programming
1
120
フロントエンドカンファレンス資料沖縄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
140
Other Decks in Programming
See All in Programming
今、知っておきたい! 生成AIエージェントの世界
elith
3
350
雑に思考を整理する技術と効能
konifar
58
29k
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
코틀린으로 멀티플랫폼 만들기
pangmoo
0
150
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
26
8.2k
Snowflakeで眠ったデータを起こそう!
estie
0
110
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
940
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
370
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.2k
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
175
21k
Why Our Code Smells
bkeepers
PRO
331
56k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
Thoughts on Productivity
jonyablonski
58
3.8k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
Adopting Sorbet at Scale
ufuk
68
8.6k
Side Projects
sachag
451
41k
Writing Fast Ruby
sferik
621
60k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
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)Ͱྑ͍։ൃΛʂ