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

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

Avatar for mk0812 mk0812
November 19, 2022

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

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

Avatar for mk0812

mk0812

November 19, 2022
Tweet

More Decks by mk0812

Other Decks in Programming

Transcript

  1. ©︎ 2012-2022 BASE, Inc. 2 ࣗݾ঺հ ࢯ໊: Matsuoka Kosuke ॴଐ:

    BASEגࣜձࣾ ೖࣾ: 2022/4 ~ ݱࡏ ۀ຿: ϑϩϯτΤϯυΤϯδχΞ ReactɺVueɺPHPΛ৮͍ͬͯΔ ςοΫϒϩάॻ͍ͨͷͰ͓࣌ؒ͋Δ࣌ʹͥͻˣ BASEϑϩϯτΤϯυMonorepo ԽͷऔΓ૊Έ mk0812 @mk0812__
  2. ©︎ 2012-2022 BASE, Inc. 5 ͱ͋Δݱ৔Ͱ... ΤϯδχΞ σβΠφʔ font-size͋͛ͯ΄ ͍͠

    ࣮૷ͨ͠ޙͷσβΠφʔͷࢦఠ padding1px ͭΊͯ΄͍͠ Typography ͳΜ͔͓͔͍͠... ࣮૷ͨ͠ޙʹ ৭ʑࢦఠ͕͋Δ... ࿈ܞ࣮ͯ͠૷ͯ͠Δͱ͜Ζ
  3. ©︎ 2012-2022 BASE, Inc. 6 ͜Ε͸࿈ܞෆ଍͔ ΤϯδχΞͱͨ͠Βʮ1ճͰऴΘΓ͍ͨɺमਖ਼͸ͳΔ΂͘ආ͚͍ͨʯ͕ • ࣮૷ͨ͠ޙʹؾͮ͘͜ͱ͸গͳ͘͸ͳ͍ •

    σβΠφʔͷཁٻΛFigmaͷΑ͏ͳσβΠϯπʔϧΛݟͳ͕Β࣮૷ͯ͠΋ࡉ͔ ͍ࢦఠ͸࢒Δ • සൟʹσβΠϯ͕มΘΔΑ͏ͳίϯϙʔωϯτ͸ͳ͍ ΤϯδχΞ⁶σβΠφʔͰͷϧʔϧΛ࡞Ζ͏
  4. ©︎ 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)
  5. ©︎ 2012-2022 BASE, Inc. 10 Style Dictionary • JSONϑΝΠϧͳͲͰߏ੒͞ΕͨσβΠϯτʔΫϯΛCSSΧελϜϓϩύςΟ ͱͯ͠ग़ྗ͢Δπʔϧ

    JSONϑΝΠϧͳͲͰߏ੒͞Εͨ σβΠϯτʔΫϯ ্هσβΠϯτʔΫϯΛݩʹੜ੒͞ ΕΔCSSʢSCSSͱ͔΋Մʣ style-dictionary.config.json ࢀߟ https://github.com/amzn/style-dictionary
  6. ©︎ 2012-2022 BASE, Inc. 11 ࿈ܞͯ͠Έͨ ࿈ܞͯ͠ΈͨʢฐࣾͰ΋৭ʑࢼߦࡨޡதʣ + uiσΟϨΫτϦ ʢσβΠϯτʔΫϯ͔Βੜ੒͞Εͨ

    CSSΛ഑৴͢Δʣ σβΠϯτʔΫϯΛੜ੒ CSSΛίϯϙʔωϯτʹ૊ΈࠐΉɺstorybookͰ ֬ೝͯ͠΋Β͏ ※ίϯϙʔωϯτ։ൃ͸hygenͱ͔Ͱ ͋Δఔ౓ςϯϓϨʔτԽ͓ͯ͘͠ͱޮ཰త Github
  7. ©︎ 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