В прошлом месяце мы занялись поиском способом организовать скрины в проекте Zeplin тегами.

Для тех, кто еще не знаком с этим продуктом, краткое интро: Zeplin — это десктопное приложение, которое помогает дизайнерам интерфейсов и фронт-енд разработчикам отлично работать в команде и экономить время друг друга. Программа берет файл с дизайном и генерирует руководство по стилю, исходники и спецификации, которые нужны разработчикам.

Читайте также: Zeplin.io — способ подружить дизайнера и верстальщика.

Почему организация скринов в Zeplin тегами?

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

Zeplin - почему теги?
Папки против тегов!
Когда мы наметали несколько прототипов, мы осознали, что в принципе теги дают большую гибкость без усложнений. Теги по типу Login и Sign Up дают возможность организовать скрины на основе разделов приложения, в то время как теги In Progress и Done делают то же самое с их статусами. Просто включите их в работу!

Как это работает?

Вы можете назначить теги скрину либо с Dashboard (панель управления), либо с окна деталей. Если вы на дашборде, выделите любое количество скринов и кликните правой кнопкой мыши (или ⌘T). Если вы на скрине деталей, просто кликните кнопку Manage на правой панели (или опять же, нажмите ⌘T).

Zeplin - как это работает?
Быстро добавляйте и удаляйте имеющиеся теги или создавайте новые
Вы перейдете на окно тегов. Это окно включает список всех существующих в вашем проекте тегов и скрин. По мере ввода текста, теги фильтруются и, наконец, если не находится соответствия, вы сможете создать новый тег. Одно удобное окно для всех ваших теговых нужд.

Кликнув на тег в дашборде, вы увидите список всех скринов с этим тегом:

Zeplin - дашборд
Фильтрация скринов по тегу
Как вы можете догадаться, ⌘ + клик выделяет несколько тегов. В этом примере показаны только скрины с обоими тегами — Lock Screen и Music tags. И вот где теги блестяще себя проявляют, давай возможность моментально найти требуемые скрины.
Zeplin - фильтрация скринов по тегам
Фильтрация скринов по нескольким тегам
Переход на скрин, Jump to Screen (⌘J) также отличный способ выиграть за счет тегов. Вы можете начать ввод названия тега, и вам отобразится список всех скринов с введенными тегами.
Zeplin - переход на скрин с помощью тегов
Переходите на скрины с помощью тегов!
Убедитесь, что вы обновили ваше приложение до версии 1.0.29 (Zeplin > Check for Updates…) и попробуйте теги. Лично нам теги действительно пришлись по душе, ждем ваши впечатления в комментариях.

Zeplin.io — способ подружить дизайнера и верстальщика