Как перенести проект Figma назад в Sketch и можно ли мигрировать туда-сюда постоянно

Я менеджер по продукту, плотно работаю с дизайнерами, а иногда могу чего-то отрисовать и сам. Долгое время работал в Sketch, не особо оглядываясь по сторонам, и вдруг неожиданно понял что мир уже изменился. Похоже Figma стала менее тормознутой и багнутой, а в качестве третьей стороны подтянулся XD.

И Figma и Adobe XD я пробовал раньше в качестве альтернативы Sketch и субъективно не понравилось. Теперь же многие дизайн команды туда активно мигрируют. Почему происходит в целом понятно: идут за командной работой или за более плотной интеграцией XD с адобовскими продуктами.

Тем не менее, для меня Sketch остается удобнее в плане использования и интерфейса (привычка дело такое). К Фигме я так и не привык, хотя они и старательно копируют лучшее в Sketch, все равно остается ощущение, что что-то не то. А XD по интерфейсу по-прежнему просто раздражает.

Поиграв в эксперименты на одном из проектов, мы решили вернуться обратно в Sketch. И вот вскрылась неожиданная проблема, с которой я столкнулся: не так-то просто мигрировать файлы обратно из Figma или XD в Sketch.

Оба инструмента охотно обрабатывают Sketch-файлы, но не позволяют нативно вернуть файлы обратно. Уверен, что для них это не сложно технически, а это направленная маркетинговая и продуктовая политика.

Я решил поискать решение, которое позволило бы дизайнерам и продуктам из команды работать одновременно в разных тулах — кому что нравится. Делюсь результатами и сразу спойлер: волшебной пилюли не будет.

Итак, если ваша дизайн команда решила вернуться к старому доброму Sketch, то вариантов как это сделать у вас не так-то много. Если честно, в какой-то момент я подумал, что проще будет просто перейти на Figma (хоть не хочется), чем вручную перенести файл на 100+ артбордов. Ниже перечислю все возможные значительные варианты.

Наверное самый популярный вариант — это миграция между тулами через SVG. Экспортируем артборды в SVG из одной программы, а затем импортируем обратно в другую.

Про способ активно пишут и, наверное, для некоторых проектов это действительно сработает. Но у меня проблемы с переносом из Figma в Sketch начались сразу же.

Был вот такой файл:

Вот что получилось:

Первое сразу заметное, это то, что шрифты безвозвратно конвертируются в outline, если захотите отредактировать текст, то придется добавлять все текстовые блоки обратно руками.

В моем случае это было не менее 50 текстовых строк на каждом из 100+ артбордов. То есть 5000+ текстовых строк для всего файла. Получается если даже тратить всего 30 секунд на замену одной строки с outline на редактируемый текстовый блок, то все про все займет около 40 часов. Я конечно лукавлю, какие-то элементы можно будет копипастить сразу блоками и все будет быстрее, но время только на эту проблему тратится значительное.

Вторая проблема, оказалась не очевидной с первого взгляда на файл, но, наверное, даже еще более глобальной. При конвертации через SVG, в виду специфики самого формата некоторые стили пропадут.

Например, на изображении выше видно, как изчезают все borders сделанные через inner shadows, как, впрочем, и остальные тени. В отдельных случаях — это криминал, не иначе. Чтобы найти и исправить эти “косяки”, придется потратить не один час времени и навряд ли это путешествие покажется интересной процедурой.

Третья проблема — маски. Для аватаров в этом мокапе использовались маски.

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

Что вы еще потеряете? Например, символы и наборы цветов. Потеря символов для больших проектов может быть катастрофой. Палитру, впрочем, можно восстановить очень быстро. Тем более если есть guideline.

Учитывая, что стили и текстовые блоки приходится после SVG импорта-экспорта полностью править, первая мысль, что приходит в голову — все пропало, придется переносить ручками. Ручки от этих мыслей, кстати, опускаются, но не у всех. Оказалось, что довольно популярная практика нанимать для переноса файлов фрилансеров, которые за умеренную плату в 100$-200$ сделают перенос руками. Никогда так не делал на запросов на фриланс биржах хватает.

Стоимость будет зависеть конечно же от объемов. Если надо перенести всего пару артбордов, то будет дешевле, но в этом случае и самому сделать не так лень.

Если фрилансер хороший, то все работает прекрасно, но не стоит забывать, что стоит перепроверить + на выполнение заказа потратится время.

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

Оказалось, похоже что полностью решает конвертацию с Figma в Sketch файл только один сервис: XD2Sketch. Они же, кстати, делают конвертацию из XD в скетч и даже в фигму. Стоит такое удовольствие 17$ за файл, за объемы есть скидки.

Увидев цену, я решил попробовать поискать и другие конвертеры. Их в целом не много. Например, есть Сonvertio, который вроде бесплатный за рекламу. Но у меня ни разу не получилось сделать там конверсию хоть вообще в какой-то формат: все время показывалась ошибка. Возможно это просто продуктовая ловушка и они так тестают свое MVP? Я бы спросил у саппорта, но контактов не нашел.

Пришлось вернуться в XD2Sketch и раскошелиться. На выходе получился очень даже сносный файл, хотя на паре кнопок лейблы уехали на пиксель вверх.

Стоит дороговато, но если приходится мигрировать на другую дизайн систему, получается дешевле, чем тратить свое время или заказывать фрилансеров. На моем предыдущем проекте (этот просто тестовый) у меня было около 20 файлов и сумма получится уже совсем другая, но в целом если история одноразовая, то по времени / качество — окупается.

Кстати заметка для фрилансеров: как заработать денег, почти ничего не делая :). Берете проект, конвертите автоматом, подправляете, если будет надо и вуаля! Правда думаю такие проекты на фриланс прилетают не так часто :)

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

Для каждодневной работы, к сожалению, ни одно из решений выше не подходит. На автоматическую конверсию нужны солидные бюджеты, на ручную работу — вагон времени, которое тоже нужно оплачивать. Для себя я пока выход я вижу один: если в компании много дизайнеров, всех придется перевести на Figma.

Если кто-то решил это проблему иначе, пишите в комментариях, будет очень круто услышать про ваш опыт.