Как понять, что компоненты из ДС?
Бывают случаи, когда новенький дизайнер или дизайнер со стажем начинает распространять старый компонент из дизайн-системы или локальной библиотеки, что приводит к вопросам со стороны разработки. Происходит это либо по незнанию, либо по невнимательности. Это порождает много проблем и вопросов как со стороны дизайнеров, так и со стороны разработки, причём вопросы поступают как в продуктовые команды, так и в команду дизайн-системы, хотя последние тут вообще ни при чём. Давайте вместе разберёмся, в чём же проблема и как её решить.
Почему так происходит?
Основная причина — это когда приходит дизайнер и пытается унаследовать такую же стилистику, что используют другие дизайнеры со стажем, или просто из-за лени копирует старый макет другого дизайнера и забирает из него объекты. Но есть одно НО! Макеты эти старые, а кнопки в них уже давно заменены в ДС через удаление, и никто не удосужился оставить никаких опознавательных знаков. Следовательно, дизайнер никак не может понять, что это старый компонент, и, как итог, идет распространение по макетам компании старых, неактуальных компонентов. Это влечет за собой вопросы от разработки, неактуальные конфигурации компонентов, сборки и т.д. В итоге на продакшн выходит далеко не то, что хотелось бы.
Как решить эту проблему?
Давайте разберемся, какие возможности у нас имеются:
- Прописать информацию в нейминге компонента;
- Прописать в description компонента описание с ссылками;
- Попросить разработчиков в Dev Mode прикреплять или откреплять ссылки на репозитории;
- Красить или изменять сам компонент.
Чем пользуюсь я?
Я использую первые три пункта из списка, так как четвертый может навредить дизайнерам и разработке еще сильнее. Далее по пунктам.
Прописываю в нейминге опознавательные знаки:
- Актуальные компоненты имеют префикс 🔷 [name];
- Неактуальные компоненты имеют префикс 🔴 [name], если, к примеру, компонент удален или заменен. Пример: 🔴 Удален в связи с обновлением.
Прописываю в description информацию
В description прописываем статус компонента для iOS и Android, а также поисковые теги, чтобы дизайнерам было легко найти компоненты.
Разработчики в Dev Mode прикрепляют ссылки на репозитории компонентов
При необходимости разработчики могут прикрепить ссылки на репозитории, что позволит другим разработчикам перейти по ним и увидеть актуальный компонент в коде.
Итог
Теперь у дизайнеров всегда есть понимание, где актуальный компонент, а где нет. В макетах любой разработчик теперь может помочь дизайнеру поддерживать их в актуальном состоянии, просто увидев и попросив заменить компонент на актуальный. Опознавательные знаки могут быть любыми, главное — достичь цели моментального визуального опознания неактуального компонента и сразу же его удалить, без необходимости идти в библиотеку и т.п., так как это огромная трата времени и ресурсов для дизайнеров и разработчиков.
🚀 Подписывайтесь, чтобы узнать то, чего не знают другие! Уникальные инсайты и редкие темы для вашего роста и вдохновения! 💡