SwiftUI で始めるデザインシステム入門 by かしはら

デザインシステムは Web フロントエンド界隈では既に一般的なツールセット・考え方になってきました。一方でモバイルアプリ領域において事例は数えるほどしかなく、まだまだ発展途上という印象で導入に踏み切れない企業も多いのではないでしょうか。

Wantedly では 2018 年頃からデザインシステムの運用を初めていて、最初はデザイナーが使う Sketch, Figma といったデザインツールの整備から始まり、時を経て 2021 年現在では ソフトウェア側の React, iOS, Android のそれぞれの実装が漸進的に進んでいてプロダクトの中で活用されています。

デザインシステムを実装する上で大切なことは、1. エンジニアとデザイナーの間でデザイン言語を共有すること。2. デザインシステムによって作られるコンポーネントの要素・原則を共有すること。の2点に集約されます。

さて、デザインシステムを継続的に運用を続けていくと「似ているけどちょっと違うコンポーネントが複数存在する」問題に遭遇します。
この時にエンジニアが取るべき行動はどれでしょうか？

1. 複数のコンポーネントの最大公約数となるスーパー・コンポーネントを定義する
2. 複数のコンポーネントをそれぞれ別名で実装する
3. デザイナーと”ちょっと違う”コンポーネントについての考え方を共有する

本トークでは、

• これからデザインシステムを作る時にデザイナーとどのようなコラボレーションを行うと良いのか
• デザインシステムをどのように捉え、SwiftUI での設計にどのように落とし込むと良いのか

についてお話させていただきます。