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
2. ©2022 Wantedly, Inc. 4IPUB
   ,BTIJIBSB 4PGUXBSF
   &OHJOFFS
   BU
   8BOUFEMZ
   *OD HJUIVCDPN4IPUB,BTIJIBSB
   UXJUUFSDPNLBTIJIBSBSBSB ೥݄͔ΒϏδωε4/4ʮ8BOUFEMZʯͷ։ൃʹࢀըɻ J04
   ΞϓϦͷ࣮૷ɺάϩʔεࢪࡦ࣮ࢪɺ඼࣭վળͷͨΊͷ࿮૊ Έͮ͘ΓʹܞΘΔɻ࠷ۙ͸νʔϜͷ՝୊ൃݟ΍ϦϦʔεϑϩʔ ͷݟ௚͠Λ୲౰ɻ
3. ©2022 Wantedly, Inc.
4. ©2022 Wantedly, Inc. 👆
5. ©2022 Wantedly, Inc. #VUUPO
   ͷߏ੒ཁૉ
6. ©2022 Wantedly, Inc. #VUUPO
   ͷߏ੒ཁૉ
7. ©2022 Wantedly, Inc. ଞͷίϯϙʔωϯτ΋ಉ༷ʹ
8. ίϯϙʔωϯτͷ࡞ΓํʹҰ؏ͨ͠ϧʔϧ͕͋Δ
9. ©2022 Wantedly, Inc. ࠓ೔఻͍͑ͨ͜ͱ  8BOUFEMZ
   Ͱ͸
   6*
   σβΠϯγεςϜΛӡ༻͍ͯ͠·͢
   w 8BOUFEMZ
   Β͍͠
   6*σβΠϯΛޮ཰తʹ࡞Γग़ͨ͢Ίͷϧʔϧ
   w ΤϯδχΞͱσβΠφʔͷίϥϘϨʔγϣϯʹඞཁͳڞ௨ݴޠ
    6*
   σβΠϯγεςϜ
   J04
   ࣮૷͸͡Ί·ͨ͠
   w 6*
   σβΠϯγεςϜͷϧʔϧΛ
   J04
   ϓϥοτϑΥʔϜʹద༻͢ΔͨΊͷ
   6*
   ϑϨʔϜϫʔΫϥΠϒϥϦ
10. ©2022 Wantedly, Inc. 8BOUFEMZ
    ͷ
    6*
    σβΠϯγεςϜ
11. ©2022 Wantedly, Inc. 8BOUFEMZ
    ͷ
    6*
    σβΠϯγεςϜ  (SBQIJD
    4UBOEBSE
    w Ձ஋؍ͱݪଇ
    w ϏδϡΞϧΨΠυϥΠϯ
     6*
    σβΠϯγεςϜ
    w ελΠϧΨΠυ
    w 'PVOEBUJPO
    σβΠϯτʔΫϯɺύϥϝλ
    w $PNQPOFOU
    ϘλϯɺςΩετϑΟʔϧυ
     ίʔυʹΑΔ࣮૷
    'JHNB
    3FBDU
    J04
    "OESPJE
12. ©2022 Wantedly, Inc. Ձ஋؍ͱݪଇ
13. ©2022 Wantedly, Inc. 8BOUFEMZ
    ͷ
    6*
    σβΠϯγεςϜ Ҿ༻ݩ: σβΠϯγεςϜ͕Ճ଎ͤ͞ΔϓϩμΫτ։ൃ https://speakerdeck.com/kawasy/design-system-and-scalable-product-development?slide=11
14. ©2022 Wantedly, Inc. 8BOUFEMZ
    ͷ
    6*
    σβΠϯγεςϜ Ҿ༻ݩ: σβΠϯγεςϜ͕Ճ଎ͤ͞ΔϓϩμΫτ։ൃ https://speakerdeck.com/kawasy/design-system-and-scalable-product-development?slide=12
15. ©2022 Wantedly, Inc. ϏδϡΞϧΨΠυϥΠϯ
16. Ҿ༻ݩ: σβΠϯγεςϜ͕Ճ଎ͤ͞ΔϓϩμΫτ։ൃ speakerdeck.com/kawasy/design-system-and-scalable-product-development
17. Ҿ༻ݩ: σβΠϯγεςϜ͕Ճ଎ͤ͞ΔϓϩμΫτ։ൃ speakerdeck.com/kawasy/design-system-and-scalable-product-development
18. Ҿ༻ݩ: σβΠϯγεςϜ͕Ճ଎ͤ͞ΔϓϩμΫτ։ൃ speakerdeck.com/kawasy/design-system-and-scalable-product-development
19. ©2022 Wantedly, Inc. 6*
    σβΠϯγεςϜ
20. ©2022 Wantedly, Inc. 4LJQ
21. ©2022 Wantedly, Inc. ෳ਺ͷϨΠϠʔʹͯߏ੒
22. ©2022 Wantedly, Inc. 'PVOEBUJPO
    σβΠϯύϥϝʔλ
25. ©2022 Wantedly, Inc. 4VSGBDF
    ͋ΒΏΔίϯϙʔωϯτͷجૅ
27. ©2022 Wantedly, Inc. #BTJD
    $PNQPOFOU
30. ©2022 Wantedly, Inc. 1BUUFSO
33. 'JHNB
    ίϛϡχςΟʹͯެ։͍ͯ͠·͢ ʮFigma WantedlyʯͰݕࡧ
34. ©2022 Wantedly, Inc. J04
    ࣮૷
35. ©2022 Wantedly, Inc.  6*
    σβΠϯγεςϜͷ༻ޠΛม͑ͳ͍
     ৼΔ෣͍ͷৄࡉΛ஌Βͳͯ͘΋ར༻Ͱ͖Δ
     ΠϨΪϡϥʔΛߟྀ͢Δ ཁ݅
36. ©2022 Wantedly, Inc. 6*
    σβΠϯγεςϜͷ༻ޠΛม͑ͳ͍
37. ©2022 Wantedly, Inc. લఏͱͯ͠ɺ6*
    σβΠϯγεςϜ͸
    ΤϯδχΞͱσβΠφʔͷڞ௨ݴޠͰ͢ɻ
    ͭͷ֓೦΍ϧʔϧΛɺ֤ʑ͕ҟͳΔ໊લͰݺΜͰ͠·͏ͱҙࢥૄ௨͕ਤΕͳ͔ͬͨΓɺ
    ݁Ռͱͯ͠ҟͳΔ࣮૷ʹͳͬͯ͠·͏ͱ͍͏໰୊͕ى͜ΔͰ͠ΐ͏ɻ 6*
    σβΠϯγεςϜͷݴ༿Λ࢖͏
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
    ࣮૷
39. ©2022 Wantedly, Inc. ࣮૷్தͰະఆٛͷཁૉ΍ݻ·͍ͬͯͳ͍֓೦ʹૺ۰͢Δ͜ͱ΋͋Δͱࢥ͍·͢ɻ
    ΤϯδχΞͰউखʹ໋໊Λ͢ΔͷͰ͸ͳ͘ɺσβΠφʔͱ૬ஊΛ͠ɺ
    ڞ௨ݴޠͱ͢Δ͜ͱΛ৺͕͚·͠ΐ͏ɻ 6*
    σβΠϯγεςϜͷݴ༿Λ࢖͏
40. ©2022 Wantedly, Inc. ৼΔ෣͍ͷৄࡉΛ஌Βͳͯ͘΋ར༻Ͱ͖Δ
42. 6*
    σβΠϯγεςϜ J04
    ࣮૷ static func reactionByColorAndElevation( shape: Shape, overlayType: Reactioned<OverlayType>, backgroundColor: Reactioned<BackgroundColor>, normalStateElevation: BlackOrWhite<Elevation> ) -> 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 ))
43. ©2022 Wantedly, Inc. ΠϨΪϡϥʔΛߟྀ͢Δ
44. ©2022 Wantedly, Inc. ҰൠԽ͞Ε͍ͯͳ͍ϧʔϧ΋ଘࡏ͢Δ
45. ©2022 Wantedly, Inc. w 6*
    σβΠϯγεςϜ͸Ұݟ͢΂ͯͷϧʔϧ͕ΧονϦܾ·͍ͬͯͯ׬ᘳͳΑ͏ʹݟ͑Δ͕ɺ
    શͯͷγνϡΤʔγϣϯʹରͯ͠ద੾ͳղ͕ग़ͤΔΘ͚Ͱ͸ͳ͍
    w ະͩ੒௕ஈ֊ʹ͋Γɺ׬੒͞ΕͨγεςϜͰ͸ͳ͍ͱ͍͏લఏΛ࣋ͭ͜ͱ͕େ੾
    w ৽͍͠๏ଇΛݟ͚ͭͨࡍ͸ίϯτϦϏϡʔγϣϯ͕ඞཁ ͓࣋ͬͯ͘΂͖લఏ
46. ©2022 Wantedly, Inc. ·ͱΊ
    ͱ
    ͜Ε͔Β
47. ©2022 Wantedly, Inc. ·ͱΊ
    w ΤϯδχΞͱσβΠφʔͷؒͰڞ௨ݴޠ͕͋ΔͨΊίϥϘϨʔγϣϯ͕ͳΊΒ͔ʹ
    w 6*
    σβΠϯγεςϜ
    J04
    ࣮૷͕͋Δ͜ͱͰҰ؏ੑͷ͋Δ
    6*
    ίϯϙʔωϯτͷ࡞੒͕Մೳ
    ͜Ε͔Β
    w ϝϯόʔ͕πʔϧΛ࢖͍͜ͳ͢͜ͱ͕Ͱ͖ΔΑ͏ֶशϥΠϯͷ੔උ
    w ࠶ར༻Մೳͳίϯϙʔωϯτͷ֦ॆ
    w ΞΫηγϏϦςΟ 4VNNBSZ
    
    'VUVSF
    XPSL
48. ©2022 Wantedly, Inc.