Скетч: обзор плагинов, которые переключают состояния макета
Каким будет макет, если по-другому отсортировать таблицу? А если развернуть выпадающий список? Обычно в скетче для каждого состояния экрана создаётся отдельный артборд, а общая часть выносятся в символ. Но иногда это кажется слишком сложным: хочется переключать состояния скрывая и показывая слои и группы.
Это не очень удобно, даже если для переключения состояния надо найти и показать один слой и спрятать другой. А если таких слоёв несколько, становится вообще сложно. К тому же можно по ошибке включить не тот слой и отправить клиенту макет с глупой ошибкой.
Для переключения состояний артборда есть плагины, я их посмотрел и написал мини-обзор. Спойлер: ни один не подошёл.
Идеальный плагин:
- хранит информацию в названиях групп и слоёв. Если плагин перестанет работать в новой версии скетча, информация о состояниях не потеряется.
- Работает в пределах текущего артборда, чтобы не испортить что-нибудь в другом конце документа.
- Может проверить наличие скрытых слоёв в макете, чтобы случайно не удалить что-то нужное.
- Умеет выделить слои, связанные с состоянием, чтобы их перенести в другой артборд или удалить.
- Может показать и выделить все скрытые слои, не связанные с состояниями. Возможно, я решу их удалить.
- При экспорте артборда сохраняет состояния в разные файлы.
States
Добавляет окошко-переключалку состояний. В нём я могу добавлять состояния и переключаться между ними. Состояния привязаны к артборду, если дублировать артборд они будут работать и в новом.
Плюсы:
- Запоминает не только видимости слоёв, но и их положения. Можно двигать слой в зависимости от состояния.
Минусы:
- Если после создания нужных состояний я захочу в одном из них создать новый элемент, мне придётся пройтись по остальным состояниям и спрятать его на них.
- Если разгруппировать элементы, они ведут себя непредсказуемо. Это какой-то треш, не разобрался.
- При каждом переключении состояния вылезает окно. Если я не хочу потерять внесённые изменения, надо каждый соглашаться.
- Если я решу подвинуть заголовок во всех состояниях, надо двигать его отдельно в каждом.
- Нет шотката на переключение слоёв, в меню плагина нет пунктов, на которые этот шоткат можно повесить.
- Если передать макет коллеге, у которого нет плагина, он не сможет пользоваться макетом.
Главный косяк: работа становится нестабильной, легко испортить свой макет и даже не знать о том, что что-то не так.
Сохраняемые свойства: положение, видимость, м.б еще что-то. Место хранения данных: Метаданные слоёв Дополнительные сущности: Окошко с переключалкой статусов Переключение состояний: клик по пункту в панели плагина.
State Switch Master
Управляет видимостью слоёв при помощи других слоёв. Выбрал нужное состояние в дереве слоёв, нажал шоткат — десятки слоёв по всему документу поменяли видимость.
Минусы:
- нельзя переключать состояния без кликов по дереву слоёв. Немногим удобнее ручного переключения видимости.
- Чтобы плагин работал, нужно вручную связать слои со слоями-состояниями.
Сохраняемые свойства: Видимость Место хранения данных: Метаданные слоёв Дополнительные сущности: Папка со служебными слоями. Переключение состояний: клик по служебному слою, потом шоткат
State machine
Умеет только переключать стили слоёв внутри группы. Это полезно для менюшек. Переключать состояния всего интерфейса плагин не умеет.
Сохраняемые свойства: Стиль Место хранения данных: Имена файлов и папок Дополнительные сущности: — Переключение состояний: выбор нужной группы, переименование, шоткат
Layer Comps
Плагин не заработал, я написал багрепорт.
ScreenFork
В ридми писали, что плагин не переключает состояния, но экспортирует их в разные файлы. Меня такой вариант устраивал. К сожалению, плагин не заработал в моей версии скетча.
Sketch states switch
Управляет прозрачностью слоёв. Есть 5 слотов, в них сохраняются состояния, потом из них восстанавливаются. Не заработал.
TODO https://github.com/patrickkeenan/sketch-framer-states
Итог
Плагины, которые есть, работу не упрощают, а наоборот. Вариант — писать свой плагин или придумать, как проще создавать символы и артборды для хранения состояний.