Как мы подружили SwiftUI и дизайн-систему

Примерно полтора года назад мы с командой решили что хотим в SwiftUI. Но оказались в ситуации: вроде бы все знают что это, но ни у кого нет особо опыта в продакшене.
И возник главный вопрос: «а с чего начать то»?
У меня к тому моменту уже был опыт в SUI и я пришёл к техлиду с желанием помочь внедрять в проект. Обсудив, решили что нужны «строительные блоки» - с помощью которых любой разработчик сможет написать фичу на SwiftUI. Видишь макет - понимаешь из чего собрать на SUI.

Почему Atomic Design:
За основу взяли методологию Atomic Design (картинка). Идея простая: мельчайшие блоки интерфейса - это атомы и молекулы: токены цветов, лейблы, картинки, кнопочки. Начинаем с них и постепенно собираем всё остальное.

Что сделал на старте:
Написал обёртки для базовых вещей: Color, Text, Image. Это позволило использовать существующие токены дизайн-системы прямо в SwiftUI - через extension'ы и кастомные ViewModifier'ы. Разработчик берёт знакомые названия из UIKit-мира и пишет на SUI без переучивания.
Параллельно написал документацию по переезду и рассказал на гильдии - а потом ещё и ещё несколько раз. Организовал встречу, на которой делились опытом у кого его было больше (ребята из Drinkit). Решали проблемы о которые спотыкались, обсуждали как вообще хотим писать на SUI.

Синхронизация с дизайнерами:
Много общались с дизайнерами: показывали как устроен SwiftUI, прям иногда вместе код смотрели. Они уже знали что Figma умеет генерировать какой-то код - стало проще говорить на одном языке.

Что в итоге:
Когда базовые молекулы были готовы - перешли к компонентам новой дизайн-системы. И все компоненты уже полностью на SwiftUI.
За это время вся команда получила практический опыт. Когда дошли до компонентов - разработчики уже понимали SwiftUI. А это важно, потому что компоненты ДС у нас пишут не отдельные люди, а вся команда вместе.
Про то как организовали сам процесс разработки компонентов - подробно написал Серёга у себя в канале.