Как понять, что компоненты из ДС?

Знакомо, когда новенький дизайнер или дизайнер со стажем начинает распространять старый компонент из дизайн-системы или локальной библиотеки, что приводит к вопросам со стороны разработки. Происходит это либо по незнанию, либо по невнимательности. Это порождает много проблем и вопросов как со стороны дизайнеров, так и со стороны разработки, причём вопросы поступают как в продуктовые команды, так и в команду дизайн-системы, хотя последние тут вообще ни при чём. Давайте вместе разберёмся, в чём же проблема и как её решить.

Как понять, что компоненты из ДС?

Основная причина — это когда приходит дизайнер и пытается унаследовать такую же стилистику, что используют другие дизайнеры со стажем, или просто из-за лени копирует старый макет другого дизайнера и забирает из него объекты. Но есть одно НО! Макеты эти старые, а кнопки в них уже давно заменены в ДС через удаление, и никто не удосужился оставить никаких опознавательных знаков. Следовательно, дизайнер никак не может понять, что это старый компонент, и, как итог, идет распространение по макетам компании старых, неактуальных компонентов. Это влечет за собой вопросы от разработки, неактуальные конфигурации компонентов, сборки и т.д. В итоге на продакшн выходит далеко не то, что хотелось бы.

Давайте разберемся, какие возможности у нас имеются:

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

Прописываю в нейминге опознавательные знаки:

Прописываю в description информацию

В description прописываем статус компонента для iOS и Android, а также поисковые теги, чтобы дизайнерам было легко найти компоненты.

Токены

По умолчанию всегда строю ДС на токсинах, по этому у меня это пристутсвует всегда.

Разработчики в Dev Mode прикрепляют ссылки на репозитории компонентов

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

Теперь у дизайнеров всегда есть понимание, где актуальный компонент, а где нет. В макетах любой разработчик теперь может помочь дизайнеру поддерживать их в актуальном состоянии, просто увидев и попросив заменить компонент на актуальный. Опознавательные знаки могут быть любыми, главное — достичь цели моментального визуального опознания неактуального компонента и сразу же его удалить, без необходимости идти в библиотеку и т.п., так как это огромная трата времени и ресурсов для дизайнеров и разработчиков.

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

Telegram канал | vc.ru

#DesignSystem #ComponentLibrary #UXDesign #UIDesign #FigmaTips #DesignWorkflow #UIUX #DesignTools #DesignProcess #UXTips