UI デザインシステム

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

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

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

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

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

Transcript

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

   View Slide

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

   View Slide

3. ©2022 Wantedly, Inc.
   

   View Slide

4. ©2022 Wantedly, Inc.
   👆
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. ©2022 Wantedly, Inc.
    8BOUFEMZͷ6*σβΠϯγεςϜ
    (SBQIJD4UBOEBSE
    w Ձ஋؍ͱݪଇ
    w ϏδϡΞϧΨΠυϥΠϯ
    6*σβΠϯγεςϜ
    w ελΠϧΨΠυ
    w 'PVOEBUJPO σβΠϯτʔΫϯɺύϥϝλ
    
    w $PNQPOFOU ϘλϯɺςΩετϑΟʔϧυ
    
    ίʔυʹΑΔ࣮૷ 'JHNB 3FBDU J04 "OESPJE
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. ©2022 Wantedly, Inc.
    4LJQ
    

    View Slide

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

    View Slide

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

    View Slide

23. View Slide

24. View Slide

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

    View Slide

26. View Slide

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

    View Slide

28. View Slide

29. View Slide

30. ©2022 Wantedly, Inc.
    1BUUFSO
    

    View Slide

31. View Slide

32. View Slide

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

    View Slide

34. ©2022 Wantedly, Inc.
    J04࣮૷
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. ©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 Slide

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

    View Slide

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

    View Slide

41. View Slide

42. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

48. ©2022 Wantedly, Inc.
    

    View Slide