フロントエンドカンファレンス資料沖縄2022_mk0812

フロントエンドカンファレンス資料沖縄2022です！

Transcript

1. ©︎ 2012-2022 BASE, Inc. 1 ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ2022 2022/11/19 Figma TokensͱStyle Dictionary͔Β ࢝ΊΔσβΠφʔͱΤϯδχΞ͕ ࿈ܞ͠΍͍͢औΓ૊Έͷ࿩
2. ©︎ 2012-2022 BASE, Inc. 2 ࣗݾ঺հ ࢯ໊: Matsuoka Kosuke ॴଐ: BASEגࣜձࣾ ೖࣾ: 2022/4 ~ ݱࡏ ۀ຿: ϑϩϯτΤϯυΤϯδχΞ ReactɺVueɺPHPΛ৮͍ͬͯΔ ςοΫϒϩάॻ͍ͨͷͰ͓࣌ؒ͋Δ࣌ʹͥͻˣ BASEϑϩϯτΤϯυMonorepo ԽͷऔΓ૊Έ mk0812 @mk0812__
3. ©︎ 2012-2022 BASE, Inc. 3 ࠓ೔ͷຊ୊ σβΠφʔͱΤϯδχΞͷ ࿈ܞͬͯͲ͏͢Ε͹͍͍͔
4. ©︎ 2012-2022 BASE, Inc. 4 ࠓ೔ͷຊ୊ ͦΕ͸ϧʔϧͰ͢
5. ©︎ 2012-2022 BASE, Inc. 5 ͱ͋Δݱ৔Ͱ... ΤϯδχΞ σβΠφʔ font-size͋͛ͯ΄ ͍͠ ࣮૷ͨ͠ޙͷσβΠφʔͷࢦఠ padding1px ͭΊͯ΄͍͠ Typography ͳΜ͔͓͔͍͠... ࣮૷ͨ͠ޙʹ ৭ʑࢦఠ͕͋Δ... ࿈ܞ࣮ͯ͠૷ͯ͠Δͱ͜Ζ
6. ©︎ 2012-2022 BASE, Inc. 6 ͜Ε͸࿈ܞෆ଍͔ ΤϯδχΞͱͨ͠Βʮ1ճͰऴΘΓ͍ͨɺमਖ਼͸ͳΔ΂͘ආ͚͍ͨʯ͕ • ࣮૷ͨ͠ޙʹؾͮ͘͜ͱ͸গͳ͘͸ͳ͍ • σβΠφʔͷཁٻΛFigmaͷΑ͏ͳσβΠϯπʔϧΛݟͳ͕Β࣮૷ͯ͠΋ࡉ͔ ͍ࢦఠ͸࢒Δ • සൟʹσβΠϯ͕มΘΔΑ͏ͳίϯϙʔωϯτ͸ͳ͍ ΤϯδχΞ⁶σβΠφʔͰͷϧʔϧΛ࡞Ζ͏
7. ©︎ 2012-2022 BASE, Inc. 7 ΤϯδχΞͱσβΠφʔͷϧʔϧ ͨͩҋӢʹ࡞ΔͷͰ͸ͳ͘ɺ͋Δఔ౓ͷζϨΛղফ͢ΔͨΊʹϧʔϧ͸ ඞཁʢશ͕ͯղফ͞ΕΔ΋ͷͰ͸ͳ͘ɺແବͳίϛϡχέʔγϣϯΛݮΒͦ͏ʣ ແବͳࢦఠ͕ͳ͘ίϯϙʔωϯτΛ࡞Γ͍ͨ ίϯϙʔωϯτΛ࡞੒͢Δʹ͋ͨͬͯͷϕʔεͱͳΔ ϧʔϧʢ৭ɺϑΥϯτʣ͸ࣗಈੜ੒͍ͨ͠ Figma TokensͱStyle DictionaryΛ࢖ͬͯ ϧʔϧΛܾΊΑ͏
8. ©︎ 2012-2022 BASE, Inc. 8 Figma Tokens × Style Dictionary
9. ©︎ 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)
10. ©︎ 2012-2022 BASE, Inc. 10 Style Dictionary • JSONϑΝΠϧͳͲͰߏ੒͞ΕͨσβΠϯτʔΫϯΛCSSΧελϜϓϩύςΟ ͱͯ͠ग़ྗ͢Δπʔϧ JSONϑΝΠϧͳͲͰߏ੒͞Εͨ σβΠϯτʔΫϯ ্هσβΠϯτʔΫϯΛݩʹੜ੒͞ ΕΔCSSʢSCSSͱ͔΋Մʣ style-dictionary.config.json ࢀߟ https://github.com/amzn/style-dictionary
11. ©︎ 2012-2022 BASE, Inc. 11 ࿈ܞͯ͠Έͨ ࿈ܞͯ͠ΈͨʢฐࣾͰ΋৭ʑࢼߦࡨޡதʣ + uiσΟϨΫτϦ ʢσβΠϯτʔΫϯ͔Βੜ੒͞Εͨ CSSΛ഑৴͢Δʣ σβΠϯτʔΫϯΛੜ੒ CSSΛίϯϙʔωϯτʹ૊ΈࠐΉɺstorybookͰ ֬ೝͯ͠΋Β͏ ※ίϯϙʔωϯτ։ൃ͸hygenͱ͔Ͱ ͋Δఔ౓ςϯϓϨʔτԽ͓ͯ͘͠ͱޮ཰త Github
12. ©︎ 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
13. ©︎ 2012-2022 BASE, Inc. 13 ·ͱΊ
14. ©︎ 2012-2022 BASE, Inc. 14 ·ͱΊ ΤϯδχΞͱσβΠφʔ͕ ཱͪฦΔϧʔϧ͸͋Δ͔ • ϧʔϧʢج൫ʣ͕͋Δ͜ͱͰޮ཰ྑ͍ϑϩϯτΤϯυ։ൃ͕Ͱ͖Δͱࢥ ͏ ◦ Figma Token + Style Dictionary + (Design Doc)Ͱྑ͍։ൃΛʂ