Скетч: обзор плагинов, которые переключают состояния макета

Каким будет макет, если по-другому отсортировать таблицу? А если развернуть выпадающий список? Обычно в скетче для каждого состояния экрана создаётся отдельный артборд, а общая часть выносятся в символ. Но иногда это кажется слишком сложным: хочется переключать состояния скрывая и показывая слои и группы.

Это не очень удобно, даже если для переключения состояния надо найти и показать один слой и спрятать другой. А если таких слоёв несколько, становится вообще сложно. К тому же можно по ошибке включить не тот слой и отправить клиенту макет с глупой ошибкой.

Для переключения состояний артборда есть плагины, я их посмотрел и написал мини-обзор. Спойлер: ни один не подошёл.

Идеальный плагин:

  • хранит информацию в названиях групп и слоёв. Если плагин перестанет работать в новой версии скетча, информация о состояниях не потеряется.
  • Работает в пределах текущего артборда, чтобы не испортить что-нибудь в другом конце документа.
  • Может проверить наличие скрытых слоёв в макете, чтобы случайно не удалить что-то нужное.
  • Умеет выделить слои, связанные с состоянием, чтобы их перенести в другой артборд или удалить.
  • Может показать и выделить все скрытые слои, не связанные с состояниями. Возможно, я решу их удалить.
  • При экспорте артборда сохраняет состояния в разные файлы.

States

Добавляет окошко-переключалку состояний. В нём я могу добавлять состояния и переключаться между ними. Состояния привязаны к артборду, если дублировать артборд они будут работать и в новом.

Плюсы:

  • Запоминает не только видимости слоёв, но и их положения. Можно двигать слой в зависимости от состояния.

Минусы:

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

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

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

State Switch Master

Управляет видимостью слоёв при помощи других слоёв. Выбрал нужное состояние в дереве слоёв, нажал шоткат — десятки слоёв по всему документу поменяли видимость.

Минусы:

  • нельзя переключать состояния без кликов по дереву слоёв. Немногим удобнее ручного переключения видимости.
  • Чтобы плагин работал, нужно вручную связать слои со слоями-состояниями.

Сохраняемые свойства: Видимость Место хранения данных: Метаданные слоёв Дополнительные сущности: Папка со служебными слоями. Переключение состояний: клик по служебному слою, потом шоткат

State machine

Умеет только переключать стили слоёв внутри группы. Это полезно для менюшек. Переключать состояния всего интерфейса плагин не умеет.

Сохраняемые свойства: Стиль Место хранения данных: Имена файлов и папок Дополнительные сущности: — Переключение состояний: выбор нужной группы, переименование, шоткат

Layer Comps

Плагин не заработал, я написал багрепорт.

ScreenFork

В ридми писали, что плагин не переключает состояния, но экспортирует их в разные файлы. Меня такой вариант устраивал. К сожалению, плагин не заработал в моей версии скетча.

Sketch states switch

Управляет прозрачностью слоёв. Есть 5 слотов, в них сохраняются состояния, потом из них восстанавливаются. Не заработал.

TODO https://github.com/patrickkeenan/sketch-framer-states

Итог

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