Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

mk0812
November 19, 2022

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

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

mk0812

November 19, 2022
Tweet

More Decks by mk0812

Other Decks in Programming

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)Ͱྑ͍։ൃΛʂ