7 заметок с тегом

скетч

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

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

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

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

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

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

States

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

Плюсы:

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

Минусы:

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

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

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

State Switch Master

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

Минусы:

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

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

State machine

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

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

Layer Comps

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

ScreenFork

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

Sketch states switch

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

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

Итог

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

2 августа   скетч

Ускорение работы в скетче: без групп

Когда много групп, неудобно выделять объекты рамкой. Например, в макете таблица. Если аккуратно завернуть столбцы таблицы в группы, то не получится быстро поменять строки местами. Можно, конечно, выделять рамкой с зажатым ⌘, тогда скетч будет игнорировать группы и выделит непосредственно слои. Но некоторые объекты могут развалиться:

У ссылки при перетаскивании отвалилось подчёркивание

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

27 июня   скетч

Некоторые плагины для работы с текстом

Посмотрел описания нескольких скетч-плагинов и оценил их полезность для себя.

Полезные

  • Dynamic button — пригодится для кнопок и текста с подложками. Хотя, он не работает с символами, кажется.
  • Dynamic symbol button — как раз для символов и нужен. Мы его, оказывается, используем О_о
  • Jw Sketch Plugins — уже пользуюсь. Разбивает и склеивает строки текста

Бесполезные

  • Comma — мелкие улучшения в типографике: двойные пробелы убрать, пробелы после запятых поставить...
  • Efficiency — тут русский типограф, мощнее, чем у «Коммы». Есть хоткеи на трекинг, лидинг и спейсинг. Ещё рандомное смещение и изменение размеров, может пригодиться для визуализации.
  • Sketch text tools — загоняет текст в колонки, добавляет подложку из объекта, выравнивает по базовой линии и не только, но это через неудобное окошко: хоткеи не навесить.
  • Adjust button shape — неудобно копирует функционал символ-баттона.
  • Paster — Вставляет текст из буфера в текстовые элементы, построчно. Прикольная идея, но не придумал, где он может понадобиться. Кажется, быстрее редактировать в самом скетче. Хотя, иногда текст генерится автоматически, например, даты в екселе. Тогда в 100 раз быстрее будет. UPD: оказалось, текст разбивает не по строкам а по словам. Завёл баг на гитхабе :—(
2017   скетч

Ускорение работы в скетче: текст → строки

Плагин Jw sketch plugins делает каждую строчку текстового блока отдельным объектом. Обратно тоже склеивает. Очень удобно при работе с таблицами, когда надо поменять строки местами. Ещё клёво начинать работу над макетом, когда есть список элементов и ещё не ясно, как их расположить:

2017   скетч

Ускорение работы в скетче: горячие клавиши

Чтобы работать быстрее, надо назначать горячие клавиши частым действиям. Эта возможность встроена в макось. Можно ускорить и стандартные функции скетча и плагины:

Когда горячих клавиш много, управлять ими в настройках неудобно. Зато работа в скетче спорится

Часто непонятно, будет ли плагин полезным. Поэтому новые планины вызываю через ранер, а когда пойму, что айс, придумываю горячую клавишу.

2017   скетч
2017   скетч

Версионирование файлов скетча (в процессе)

На работе стоит задача организовать совместную работу с файлами скетча.

Статьи:

  • A successful Sketch collaborative model — хранят файлы в общей папке или облачном хранилище. Имитируют работу гита: называют файлы по соглашению. Даже бранчи имитируют: клонируют файлы, добавляют новые фичи и переносят обновления в исходный файл вручную. Этот подход — первое, что приходит в голову, но объединять файлы на глазок — грустно.
  • Sketch App: How to Share Artboards with Your Team — обзор плагинов для обмена скеч-файлами. Совсем не то.
  • Yes, Designers can use git too! — статья про плагин гита, который упрощает сравнение версий файлов скетча. Гораздо лучше, чем на глазок! Но не решает проблему автоматического объединения версий. В конце говорится, что есть односторонний конвертор скетча в джейсон. Наличие обратного решило бы проблему.

Инструменты:

  • Фигма— векторный редактор для совместной работы над графикой. Импортирует скетч, каких-то фич не хватает, ещё не смотрел.
  • Скетчтул — инструмент для сравнения скетч файлов в консоли в текстовом режиме. Это может помочь при объединении файлов вручную.
  • СкетчГит — может только коммитить из интерфейса скетча, бесполезен.
  • Цеплин генерирует спецификации для разработчиков. Не то.
  • Апдейт:
    Фолио — Гит для дизайренов: скетч, фотошоп, иллюстратор. То, что надо.

Разделение скетч-файлов на кусочки:

  • Sketch Import Symbols — плагин для импорта библиотеки элементов из другого файла. Нам такое поможет, если можно будет импортировать стили из кучи файлов.
  • Sync Sketch Plugin — плагин, который экспортирует и импортирует стили текста в гугл-таблицу.

Мёртвые проекты

  • Корал — версионирование файлов фотошопа и скетча. Проект опенсорсный, заброшен.
  • Лейрволт — парсер файлов фотошопа, умер год назад.
  • Пикселапс  — чтобы показать коллегам файлы фотошопа, иллюстратора и файрворкса, получить комментарии, хранить историю версий. куплен Дропбоксом.

UPD: Дальнейшее применимо к 42 версии скетча.

Если бы я писал свой инструмент для совместной работы, это был бы плагин для гита.

Первая мысль — положить файлы скетча в репозиторий и коммитить как код. Но от кода их отличает структура файла: даже небольшое изменение текста меняет почти весь файл. Поэтому гит не сможет объединить изменения, внесённые двумя дизайнерами.

Структура скетч файла. Даже небольшое изменение меняет весь документ. Объединить две версии можно только вручную.

Если бы формат этих файлов был простым как СВГ, то над файлом могли бы одновременно работать несколько дизайнеров. Гит видит, что один дизайнер подвинул картинку, а другой поменял текст. Если изменения не пересекаются, гит объединяет их в один файл с правильной картинкой и текстом.

Если два дизайнера одновременно отредактирую СВГ файл, гит объединит их изменения автоматически.

Можно было бы договориться хранить все наши файлы не в скетче а в СВГ, проблема была бы решена. Но многие функции скетча будут утрачены, например, мы потеряем список стилей текста и области экспорта. То есть конвертация в СВГ будет необратимой. Не вариант.

Придётся сравнивать и объединять версии в скетче вручную. На глазок сравнивать, что изменилось, копировать и вставлять куски графики. При этом, скорее всего, будут допущены ошибки: не скопируются невидимые элементы, потеряются списки стилей текста и пр.

Выход — научиться распаковывать файлы скетча в текстовый формат и хранить их в репозитории в таком виде. Изменения должны быть обратимыми: после получения распакованных файлов из гита мы должны упаковать их обратно в скетч файл.

Смотрим формат

Cкетч хранит файлы в формате SQLite. Содержимое вытаскивается командой:

echo .dump | sqlite3 mockup.sketch > mockup.dump

Обратно конвертируем так:

cat mockup.dump | sqlite3 mockup_restored.sketch

Но версионировать рано: все графические данные по-прежнему запакованы в одну строчку

Дамп скетч файла. Гит не объединит файлы автоматически, потому что всё тело документа раскидано по одной строке.

Нас интересует строчка main, это основное тело документа. В ней блоб, который можно вытащить и сохранить в отдельный файл.

Не будем использовать этот файл, проще будет вытащить блоб сразу из базы данных. Например, расширением для файрфоркса. Извлекаем блоб в файл формата bplist. Этот файл распаковывается в XML и запаковывается обратно командами

plutil -convert xml1 blob.plist
plutil -convert binary1 blob.plist

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

Осталось автоматизировать упаковку и распаковку при коммитах и чекаутах соответственно.

2017   гит   скетч