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

デザインシステムっていいな

9d974d9df914b4540ae8febc6cb89f02?s=47 tiking
February 22, 2022

 デザインシステムっていいな

2022/2/22に開催されたSwift愛好会で発表した内容です
参考資料です
iOS・Androidで使える デザインシステムをどう実装するか - Speaker Deck
https://speakerdeck.com/kwzr/iosandroiddeshi-eru-dezainsisutemuwodoushi-zhuang-suruka
グッドパッチエンジニアが選ぶ、推しデザインシステム10選
https://goodpatch.com/blog/i-love-design-systems
SwiftUI Accessibility: Traits | Mobile A11y
https://mobilea11y.com/guides/swiftui/swiftui-traits/
Accessibility in SwiftUIまとめ
https://blog.personal-factory.com/2019/08/25/accessibility-in-swiftui/

9d974d9df914b4540ae8febc6cb89f02?s=128

tiking

February 22, 2022
Tweet

More Decks by tiking

Other Decks in Programming

Transcript

  1. デザインシステムって いいな 2022/2/22 Swift愛好会 tiking

  2. 自己紹介 名前 : チキング 好きな言語 Swift twitter @tikin0716 gitHub tiking76

  3. みなさーん こんなことで悩んでいたりしませんか?

  4. このデザインあのコンポーネントと微妙に似てい るけどなんか違うよな〜

  5. ここのフォントどうするんだろう…

  6. デザインシステムって? 一般的には以下のものを指します • タイポグラフィ • カラーシステム • ボイス&トーン • コードベースのUIコンポーネント

    • デザイントークン
  7. ようは… ソフトウェアやグラフィックなどにおける デザインの原則や指針と、 それらを実現するための仕組みの集合体

  8. デザインシステム ≠ UIのこと

  9. なんでこの話題にしたの?? 昨今SwiftUIを使ったプロダクトが増えている ex: 全部SwitUIで書いてます!! UIKit(ViewController)と組み合わせてます!!

  10. UIに関して • SwiftUIが宣言UIがなので、直感的にわかりやすいコードが書きやすい • プレビュー機能によってwebでのstorybookのようなものが作れるようになった →コンポーネント一覧のようなものを容易に作れるようになった etc…

  11. UXに関して • アクセシビリティについての実装も容易になった →modifierのおかげ ex:

  12. チームに関して • デザインやチームの思想をより伝えやすい →ドキュメントを共有することによってデザインに関する思想、方針なども容易に知 ることができる

  13. 最後に… デザインシステムを作ることによって みんなが笑顔になる開発環境を整備していきましょ〜〜〜

  14. 参考にしました🙏 iOS・Androidで使える デザインシステムをどう実装するか - Speaker Deck グッドパッチエンジニアが選ぶ、推しデザインシステム10選 SwiftUI Accessibility: Traits

    | Mobile A11y Accessibility in SwiftUIまとめ