Привет всем, меня зовут Черныш Татьяна, я – веб-дизайнер в «Северстали», и это рубрика «Опять что-то на дизайнерском».
Сегодня мы поговорим о том, как система макетов в Figma сэкономила на нашем проекте неплохой объём времени во время редизайна и разработки. Каждая команда, чаще всего, ведёт проект по-своему, и нет единой и универсальной методики. В этой статье я хотела бы поделиться с вами своим опытом организации дизайн-макетов.
Однажды на одном из внутренних продуктов компании потребовалось оптимизировать процессы проектирования интерфейсов. Хотелось не только увеличить порог входа в проект для новых членов команды, но и самим не забывать какие макеты актуальные, а какие требуют синхронизации с продакшеном. Также из-за роста страниц на проекте стало проблематично быстро ориентироваться в них.
Чтобы закрыть вышеперечисленные проблемы, мы сделали следующее:
составили Site Map (схематичную карту) проекта, которая повторяла навигацию на проде;
переработали нейминг страниц в Figma и синхронизировали их с разработанной картой;
разработали разметку страницы для контроля версий макетов и дополнительных компонентов.
А теперь расскажем подробнее про каждый пункт.
Site Map
Карту страниц используют многие специалисты во время разработки проектов. Это и программисты, и seo-специалисты, и тестировщики. Мы решили присоединиться к нашим коллегам по цеху и разработать интерактивную карту макетов в Figma, а именно Design Site Map.
Такая карта состоит из следующих элементов:
- блок страницы (название страницы со встроенной ссылкой на макет в Figma, со ссылкой на прод и статусом разработки):
- блок специалиста (в нашем случае аналитика), который отвечает за задачи, поступающие в рамках страницы.
Визуально такое решение выглядит следующим образом:
Нейминг страниц в Figma
Чтобы можно было не только кликать блоки на карте макетов, а ещё и полноценно использовать встроенный поиск, мы продублировали названия и статусы из Design Site Map в наименовании страниц Figma.
В итоге у нас получилась следующая картина:
Получается, что если член команды не видел Design Site Map по какой-либо причине (например: переход по прямой ссылке на макет), он сможет сопоставить название страницы на проде и в самом файле, либо найти страницу через поиск, скопировав с сайта её наименование. Такое решение повышает порог вхождения в макет, как текущим, так и новым членам команды.
Разметка страницы для эффективного контроля версий макетов
Разработчики, аналитики, а порой, и сами дизайнеры (особенно после отпуска), заходя в макет, совершенно не понимают, где черновики и архивы, а где актуальная версия страницы. Это приводит к тому, что команда тратит драгоценное время на выяснение истины.
В таком случае напрашивается следующее решение — зонирование страницы Figma:
выделяем зону для прокрастинации и вводных;
добавляем зону локальных компонентов, которые не относятся к дизайн-системе, а используются только на конкретной странице;
далее идёт зона актуального макета, который на данный момент может использовать разработчик;
внизу идёт архивная зона, в которую попадают макеты из прошлых релизов.
Благодаря такой разметке можно быстро определить, где вы накидывали черновики, а где актуальные макеты. Также можно посмотреть минимальную историю изменения страницы и её состояний в архивной зоне.
Получается своего рода небольшой дизайнерский дашборд, который можно использовать в любом вашем проекте и систематизировать разделы многоуровневых систем :)
В итоге аналитик быстро сможет найти нужный макет, а разработчик поймет структуру проекта, найдет актуальный макет и ответственных за каждый раздел.
Надеемся, что эта статья будет полезна каждому UX/UI-дизайнеру. А чтобы вы могли подробнее изучить и применить в работе наше решение, мы подготовили для вас универсальный файл в Figma.
Пользуйтесь и повышайте свою эффективность вместе с командой «Северстали»!
