3年かけてコツコツと積み上げてきたみてねのデザインシステムについて by ロクネム

iOSDC Japan 2021
レギュラートーク(40分)

3年かけてコツコツと積み上げてきたみてねのデザインシステムについて

_rockname ロクネム _rockname
5

アプリのデザインおよびUI周りの実装を続けていると、良い設計について検討する十分な時間を確保できずに「その場限りの対応」に迫られることがしばしばあります。
これがなんの指針もなく続けられていくと、いわゆる「デザイン的負債」が積み上がっていきます。

デザインはもはや、プロダクト開発におけるスケーラブルで再利用可能な「システム」として機能するようになってきました。
このシステムはカオスになりがちなUI周りの開発を管理しやすくし、より良いプロダクト開発に貢献してくれます。

しかし、プロダクト開発においてそのシステムを構築することは決して優先順位が高く見られない傾向があります。

そこで、「家族アルバム みてね」では、デザイナとエンジニア数名で小さなチームを作って、週1日程度の時間を確保しながら、まずはiOS, Androidに絞って少しずつこの「デザインシステム」を構築していきました。

コツコツとシステムの構築を積み重ねて約3年が経ちましたので、本セッションではみてねにおけるデザインシステムがどのように構築されていったのか、その過程およびプラクティスについて、iOSアプリにおける具体的な実装方法を交えながら紹介させていただきます。

[アジェンダ]
・デザインシステムとは
・なぜデザインシステムを導入するのか
・まずは何から始めるのが良いか
・StyleとComponentとPattern
・Styleの定義と実装
・Componentの定義と実装
・Patternの定義と実装
・デザインとコードの同期
・デザインシステムに新しい要素を追加する際の方針

[想定する聞き手]
・デザインシステムの導入を検討している方
・デザインシステムを運用している方