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

UI デザインシステム

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
  2. ©2022 Wantedly, Inc. 4IPUB,BTIJIBSB 4PGUXBSF&OHJOFFSBU8BOUFEMZ *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*σβΠϯγεςϜ  (SBQIJD4UBOEBSE 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 σβΠϯύϥϝʔλ

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

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

  28. None
  29. None
  30. ©2022 Wantedly, Inc. 1BUUFSO

  31. None
  32. None
  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. ৼΔ෣͍ͷৄࡉΛ஌Βͳͯ͘΋ར༻Ͱ͖Δ

  41. None
  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'VUVSFXPSL
  48. ©2022 Wantedly, Inc.