Задача
Летом 2023 года нашей команде дизайна (два дизайнера под руководством лид-дизайнера) прилетела задача по разработке дизайн-системы, которую в дальнейшем можно масштабировать для каждого продукта организации. В начале работы нами было определено, что базовая дизайн-система должна основываться на следующих принципах:
- Консистентность;
- Атомарность;
- Масштабируемость.
В качестве референсов для разработки и создания документации мы использовали открытые дизайн-системы таких компаний, как Apple, Google, Конста, Контур и др.
На данной картинке продемонстрированы различные элементы из разрабатываемой дизайн-системы.
Ниже представлены примеры элементов дизайн-системы, которые были разбиты по соответствующим вкладкам с подробным описанием для дизайнеров и команды разработки.
Нами было разработано 1000+ компонентов и еще разрабатывается. Дизайн-система разрабатывалась по принципу атомарного дизайна, в начале были проработаны атомы, потом молекулы, а в дальнейшем собирались организмы.
Компоненты
Документация
Нами также была разработана документация для каждого компонента для объяснения всех вариантов использования. Каждое описание включает в себя:
- Четкое объяснение того, что это за элемент и как он обычно используется;
- Скрины или примеры макетов, чтобы было понятно, о чем идет речь;
- Описание базовых переменных.
Дизайн-система все еще находится в разработке и постепенно совершенствуется.
Чему я научилась:
- На практике освоила принцип атомарности;
- Детально изучила и углубила свои знания в настройках Properties в Figma;
- Получила опыт взаимодействия с командой разработки.
- Попрактиковалась в написании технической документации (в т.ч. переменных);