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

UI デザインシステム

Shota Kashihara
September 12, 2022

UI デザインシステム

このスライドは iOSDC Japan 2022 のスポンサーセッションで発表した内容になります。
---

https://fortee.jp/iosdc-japan-2022/proposal/b225087a-6dac-4d81-9f3f-e09c431e5157

Wantedly では、「デザインの生産性を向上させ、デザイナ - エンジニア 間コミュニケーションを改善することで、ユーザに価値を届ける速度を向上させる」ことを目的として UI デザインシステムを作っています。

今回は現場で運用されているデザインシステムと iOS 実装の成功と失敗について以下の内容を話します。

Wantedly の UI デザインシステムとはなにか
コンポーネントリストではなく「共通の考え方とツール&アセット」
Figma 実装から考える iOS 実装のインターフェース設計
チームへの普及の成功と失敗

Shota Kashihara

September 12, 2022
Tweet

More Decks by Shota Kashihara

Other Decks in Technology

Transcript

  1. ©2022 Wantedly, Inc.
    UI σβΠϯγεςϜ
    J04࣮૷ͷ͸ͳ͠
    iOSDC Japan 2022 εϙϯαʔηογϣϯ
    ΢ΥϯςουϦʔגࣜձࣾ / @kashihararara

    View full-size slide

  2. ©2022 Wantedly, Inc.
    4IPUB,BTIJIBSB
    4PGUXBSF&OHJOFFSBU8BOUFEMZ *OD
    HJUIVCDPN4IPUB,BTIJIBSB
    UXJUUFSDPNLBTIJIBSBSBSB
    ೥݄͔ΒϏδωε4/4ʮ8BOUFEMZʯͷ։ൃʹࢀըɻ
    J04ΞϓϦͷ࣮૷ɺάϩʔεࢪࡦ࣮ࢪɺ඼࣭վળͷͨΊͷ࿮૊
    Έͮ͘ΓʹܞΘΔɻ࠷ۙ͸νʔϜͷ՝୊ൃݟ΍ϦϦʔεϑϩʔ
    ͷݟ௚͠Λ୲౰ɻ

    View full-size slide

  3. ©2022 Wantedly, Inc.

    View full-size slide

  4. ©2022 Wantedly, Inc.
    👆

    View full-size slide

  5. ©2022 Wantedly, Inc.
    #VUUPOͷߏ੒ཁૉ

    View full-size slide

  6. ©2022 Wantedly, Inc.
    #VUUPOͷߏ੒ཁૉ

    View full-size slide

  7. ©2022 Wantedly, Inc.
    ଞͷίϯϙʔωϯτ΋ಉ༷ʹ

    View full-size slide

  8. ίϯϙʔωϯτͷ࡞ΓํʹҰ؏ͨ͠ϧʔϧ͕͋Δ

    View full-size slide

  9. ©2022 Wantedly, Inc.
    ࠓ೔఻͍͑ͨ͜ͱ
    8BOUFEMZͰ͸6*σβΠϯγεςϜΛӡ༻͍ͯ͠·͢
    w 8BOUFEMZΒ͍͠6*σβΠϯΛޮ཰తʹ࡞Γग़ͨ͢Ίͷϧʔϧ
    w ΤϯδχΞͱσβΠφʔͷίϥϘϨʔγϣϯʹඞཁͳڞ௨ݴޠ
    6*σβΠϯγεςϜJ04࣮૷͸͡Ί·ͨ͠
    w 6*σβΠϯγεςϜͷϧʔϧΛJ04ϓϥοτϑΥʔϜʹద༻͢ΔͨΊͷ
    6*ϑϨʔϜϫʔΫϥΠϒϥϦ

    View full-size slide

  10. ©2022 Wantedly, Inc.
    8BOUFEMZͷ6*σβΠϯγεςϜ

    View full-size slide

  11. ©2022 Wantedly, Inc.
    8BOUFEMZͷ6*σβΠϯγεςϜ
    (SBQIJD4UBOEBSE
    w Ձ஋؍ͱݪଇ
    w ϏδϡΞϧΨΠυϥΠϯ
    6*σβΠϯγεςϜ
    w ελΠϧΨΠυ
    w 'PVOEBUJPO σβΠϯτʔΫϯɺύϥϝλ

    w $PNQPOFOU ϘλϯɺςΩετϑΟʔϧυ

    ίʔυʹΑΔ࣮૷ 'JHNB 3FBDU J04 "OESPJE

    View full-size slide

  12. ©2022 Wantedly, Inc.
    Ձ஋؍ͱݪଇ

    View full-size slide

  13. ©2022 Wantedly, Inc.
    8BOUFEMZͷ6*σβΠϯγεςϜ
    Ҿ༻ݩ: σβΠϯγεςϜ͕Ճ଎ͤ͞ΔϓϩμΫτ։ൃ
    https://speakerdeck.com/kawasy/design-system-and-scalable-product-development?slide=11

    View full-size slide

  14. ©2022 Wantedly, Inc.
    8BOUFEMZͷ6*σβΠϯγεςϜ
    Ҿ༻ݩ: σβΠϯγεςϜ͕Ճ଎ͤ͞ΔϓϩμΫτ։ൃ
    https://speakerdeck.com/kawasy/design-system-and-scalable-product-development?slide=12

    View full-size slide

  15. ©2022 Wantedly, Inc.
    ϏδϡΞϧΨΠυϥΠϯ

    View full-size slide

  16. Ҿ༻ݩ: σβΠϯγεςϜ͕Ճ଎ͤ͞ΔϓϩμΫτ։ൃ
    speakerdeck.com/kawasy/design-system-and-scalable-product-development

    View full-size slide

  17. Ҿ༻ݩ: σβΠϯγεςϜ͕Ճ଎ͤ͞ΔϓϩμΫτ։ൃ
    speakerdeck.com/kawasy/design-system-and-scalable-product-development

    View full-size slide

  18. Ҿ༻ݩ: σβΠϯγεςϜ͕Ճ଎ͤ͞ΔϓϩμΫτ։ൃ
    speakerdeck.com/kawasy/design-system-and-scalable-product-development

    View full-size slide

  19. ©2022 Wantedly, Inc.
    6*σβΠϯγεςϜ

    View full-size slide

  20. ©2022 Wantedly, Inc.
    4LJQ

    View full-size slide

  21. ©2022 Wantedly, Inc.
    ෳ਺ͷϨΠϠʔʹͯߏ੒

    View full-size slide

  22. ©2022 Wantedly, Inc.
    'PVOEBUJPO
    σβΠϯύϥϝʔλ

    View full-size slide

  23. ©2022 Wantedly, Inc.
    4VSGBDF
    ͋ΒΏΔίϯϙʔωϯτͷجૅ

    View full-size slide

  24. ©2022 Wantedly, Inc.
    #BTJD$PNQPOFOU

    View full-size slide

  25. ©2022 Wantedly, Inc.
    1BUUFSO

    View full-size slide

  26. 'JHNBίϛϡχςΟʹͯެ։͍ͯ͠·͢
    ʮFigma WantedlyʯͰݕࡧ

    View full-size slide

  27. ©2022 Wantedly, Inc.
    J04࣮૷

    View full-size slide

  28. ©2022 Wantedly, Inc.
    6*σβΠϯγεςϜͷ༻ޠΛม͑ͳ͍
    ৼΔ෣͍ͷৄࡉΛ஌Βͳͯ͘΋ར༻Ͱ͖Δ
    ΠϨΪϡϥʔΛߟྀ͢Δ
    ཁ݅

    View full-size slide

  29. ©2022 Wantedly, Inc.
    6*σβΠϯγεςϜͷ༻ޠΛม͑ͳ͍

    View full-size slide

  30. ©2022 Wantedly, Inc.
    લఏͱͯ͠ɺ6*σβΠϯγεςϜ͸ΤϯδχΞͱσβΠφʔͷڞ௨ݴޠͰ͢ɻ
    ͭͷ֓೦΍ϧʔϧΛɺ֤ʑ͕ҟͳΔ໊લͰݺΜͰ͠·͏ͱҙࢥૄ௨͕ਤΕͳ͔ͬͨΓɺ
    ݁Ռͱͯ͠ҟͳΔ࣮૷ʹͳͬͯ͠·͏ͱ͍͏໰୊͕ى͜ΔͰ͠ΐ͏ɻ
    6*σβΠϯγεςϜͷݴ༿Λ࢖͏

    View full-size slide

  31. ©2022 Wantedly, Inc.
    public enum Shape: CGFloat {


    case r0 = 0


    case r2 = 2


    case r4 = 4


    case r16 = 16


    case r100 = 999


    }


    6*σβΠϯγεςϜ J04࣮૷

    View full-size slide

  32. ©2022 Wantedly, Inc.
    ࣮૷్தͰະఆٛͷཁૉ΍ݻ·͍ͬͯͳ͍֓೦ʹૺ۰͢Δ͜ͱ΋͋Δͱࢥ͍·͢ɻ
    ΤϯδχΞͰউखʹ໋໊Λ͢ΔͷͰ͸ͳ͘ɺσβΠφʔͱ૬ஊΛ͠ɺ
    ڞ௨ݴޠͱ͢Δ͜ͱΛ৺͕͚·͠ΐ͏ɻ
    6*σβΠϯγεςϜͷݴ༿Λ࢖͏

    View full-size slide

  33. ©2022 Wantedly, Inc.
    ৼΔ෣͍ͷৄࡉΛ஌Βͳͯ͘΋ར༻Ͱ͖Δ

    View full-size slide

  34. 6*σβΠϯγεςϜ J04࣮૷
    static func reactionByColorAndElevation(


    shape: Shape,


    overlayType: Reactioned,


    backgroundColor: Reactioned,


    normalStateElevation: BlackOrWhite


    ) -> SurfaceProps {


    .init(


    shape: shape,


    overlay: .init(


    normal: .clear,


    pressed: overlayType.pressed.alpha100,


    focused: overlayType.focused.alpha50,


    disabled: overlayType.disabled.alpha100


    ),


    backgroundColor: backgroundColor,


    elevation: normalStateElevation.overriding(...


    normal: normalStateElevation.value + 0,


    pressed: normalStateElevation.value + 4,


    focused: normalStateElevation.value + 4,


    disabled: nil


    ))


    View full-size slide

  35. ©2022 Wantedly, Inc.
    ΠϨΪϡϥʔΛߟྀ͢Δ

    View full-size slide

  36. ©2022 Wantedly, Inc.
    ҰൠԽ͞Ε͍ͯͳ͍ϧʔϧ΋ଘࡏ͢Δ

    View full-size slide

  37. ©2022 Wantedly, Inc.
    w 6*σβΠϯγεςϜ͸Ұݟ͢΂ͯͷϧʔϧ͕ΧονϦܾ·͍ͬͯͯ׬ᘳͳΑ͏ʹݟ͑Δ͕ɺ
    શͯͷγνϡΤʔγϣϯʹରͯ͠ద੾ͳղ͕ग़ͤΔΘ͚Ͱ͸ͳ͍
    w ະͩ੒௕ஈ֊ʹ͋Γɺ׬੒͞ΕͨγεςϜͰ͸ͳ͍ͱ͍͏લఏΛ࣋ͭ͜ͱ͕େ੾
    w ৽͍͠๏ଇΛݟ͚ͭͨࡍ͸ίϯτϦϏϡʔγϣϯ͕ඞཁ
    ͓࣋ͬͯ͘΂͖લఏ

    View full-size slide

  38. ©2022 Wantedly, Inc.
    ·ͱΊͱ͜Ε͔Β

    View full-size slide

  39. ©2022 Wantedly, Inc.
    ·ͱΊ
    w ΤϯδχΞͱσβΠφʔͷؒͰڞ௨ݴޠ͕͋ΔͨΊίϥϘϨʔγϣϯ͕ͳΊΒ͔ʹ
    w 6*σβΠϯγεςϜJ04࣮૷͕͋Δ͜ͱͰҰ؏ੑͷ͋Δ6*ίϯϙʔωϯτͷ࡞੒͕Մೳ
    ͜Ε͔Β
    w ϝϯόʔ͕πʔϧΛ࢖͍͜ͳ͢͜ͱ͕Ͱ͖ΔΑ͏ֶशϥΠϯͷ੔උ
    w ࠶ར༻Մೳͳίϯϙʔωϯτͷ֦ॆ
    w ΞΫηγϏϦςΟ
    4VNNBSZ'VUVSFXPSL

    View full-size slide

  40. ©2022 Wantedly, Inc.

    View full-size slide