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. ࠓ೔఻͍͑ͨ͜ͱ  8BOUFEMZͰ͸6*σβΠϯγεςϜΛӡ༻͍ͯ͠·͢ w 8BOUFEMZΒ͍͠6*σβΠϯΛޮ཰తʹ࡞Γग़ͨ͢Ίͷϧʔϧ w ΤϯδχΞͱσβΠφʔͷίϥϘϨʔγϣϯʹඞཁͳڞ௨ݴޠ

     6*σβΠϯγεςϜJ04࣮૷͸͡Ί·ͨ͠ w 6*σβΠϯγεςϜͷϧʔϧΛJ04ϓϥοτϑΥʔϜʹద༻͢ΔͨΊͷ 6*ϑϨʔϜϫʔΫϥΠϒϥϦ
  2. ©2022 Wantedly, Inc. 8BOUFEMZͷ6*σβΠϯγεςϜ  (SBQIJD4UBOEBSE w Ձ஋؍ͱݪଇ w ϏδϡΞϧΨΠυϥΠϯ

     6*σβΠϯγεςϜ w ελΠϧΨΠυ w 'PVOEBUJPO σβΠϯτʔΫϯɺύϥϝλ  w $PNQPOFOU ϘλϯɺςΩετϑΟʔϧυ   ίʔυʹΑΔ࣮૷ 'JHNB 3FBDU J04 "OESPJE
  3. ©2022 Wantedly, Inc. public enum Shape: CGFloat { case r0

    = 0 case r2 = 2 case r4 = 4 case r16 = 16 case r100 = 999 } 6*σβΠϯγεςϜ J04࣮૷
  4. 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 ))
  5. ©2022 Wantedly, Inc. ·ͱΊ w ΤϯδχΞͱσβΠφʔͷؒͰڞ௨ݴޠ͕͋ΔͨΊίϥϘϨʔγϣϯ͕ͳΊΒ͔ʹ w 6*σβΠϯγεςϜJ04࣮૷͕͋Δ͜ͱͰҰ؏ੑͷ͋Δ6*ίϯϙʔωϯτͷ࡞੒͕Մೳ ͜Ε͔Β w

    ϝϯόʔ͕πʔϧΛ࢖͍͜ͳ͢͜ͱ͕Ͱ͖ΔΑ͏ֶशϥΠϯͷ੔උ w ࠶ར༻Մೳͳίϯϙʔωϯτͷ֦ॆ w ΞΫηγϏϦςΟ 4VNNBSZ'VUVSFXPSL