Актуальность компонента

Знакома ли вам ситуация, когда вы заходите в чужой макет, берете оттуда компоненты, верстаете экран и вот-вот собираетесь передавать его в разработку, как вдруг выясняется, что компоненты не из дизайн-системы (ДС) или давно удалены? Теперь всё приходится пересобирать. Знакомо?

Как это решить?

По этой причине и была придумана система статусов компонентов. Они помогают обозначить актуальность компонентов как для дизайнеров, так и для разработчиков. Статусы помогают определить, актуален ли компонент, удален ли он или это часть компонента из ДС, которым не следует пользоваться.

Давайте по порядку. Ниже приведен пример макета, в котором есть как актуальные, так и неактуальные компоненты.

Актуальный компонент

Если компонент актуален, например, он числится в ДС или это крупный продуктовый компонент, мы помечаем его синим ромбиком и указываем наименование компонента.

Пример: 🔷 buttonPrimary

Синий ромбик означает, что этот компонент актуален и его можно безопасно использовать.

Вложенный компонент

Бывают случаи, когда компонент состоит из нескольких дочерних компонентов, которые тоже могут числиться в ДС. Когда дизайнер отделяет компонент (detaching), он может забыть, что внутри остались вложенные элементы, которые могут быть изменены в любой момент. Разработчики затем находят такие компоненты и обращаются к ДС, хотя она их не предоставляет для открытого использования. Если вложенный компонент не был переименован и «отделен», может прийти обновление, которое нарушит работу сборки.

Такие компоненты мы помечаем желтым ромбиком с точкой, что означает, что компонент не должен публиковаться в открытый доступ.

Пример: .🔶 Title

Удаленный компонент

Если компонент нужно заменить или вовсе удалить, мы помечаем его красным кружком с точкой, чтобы указать, что компонент не должен быть использован.

Пример 1: .🔴 Устарел, требуется замена
Пример 2: .🔴 Удален в связи с неактуальностью

Итог

Используя простые индикаторы (цветовые смайлы), можно легко подсветить разработчику или дизайнеру статус компонента и его тип. Это позволяет избежать использования неактуальных компонентов, а разработчики благодаря своей внимательности могут помочь исключить такие компоненты из макетов.

🚀 Подписывайтесь, чтобы узнать то, чего не знают другие! Уникальные инсайты и редкие темы для вашего роста и вдохновения! 💡

Telegram канал   |   Хабр   |  vc.ru