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

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

Статьи:

  • 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

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

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