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

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

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

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

Как вернуться назад?

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

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

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

3 варианта миграции мокапов из Figma в Sketch.

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

Решение 1: Export / Import через SVG

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

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

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

Изначальный файл в Figma
Изначальный файл в Figma

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

<i>Что получилось при конвертации экспорте-импорте из Figma в Sketch через SVG</i>
Что получилось при конвертации экспорте-импорте из Figma в Sketch через SVG

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

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

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

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

Как внешние, так и внутренние тени послетают
Как внешние, так и внутренние тени послетают

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

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

Размеры изображения для масок послетали
Размеры изображения для масок послетали

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

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

Решение 2: Перенести файлы вручную (фрилансерами)

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

Один из примеров запросов на конвертацию на фрилансе
Один из примеров запросов на конвертацию на фрилансе

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

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

Решение 3. Автоматическая конвертация файлов

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

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

Интерфейс XD2Sketch
Интерфейс XD2Sketch

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

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

Результат через конвертер XD2Sketch
Результат через конвертер XD2Sketch

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

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

Выводы

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

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

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

55
6 комментариев

Я так не понял как со скетча перенести в фигму, без потерь?

Ответить

Добрый день, Николай. В фигме есть импорт именно .sketch файлов. Отрабатывает с большего правильно, хотя и там иногда есть потери. Но этот вопрос я не рассматривал, так как родной импортер Sketch->Figma доступен для всех, а вот обратной совместимости из коробки нет. Нет такой опции в Sketch "импортировать Figma файл". Тоже самое для Adobe XD

1
Ответить

Я, фанат скетча с 2016 года, последние 2 недели активно перешел на фигму и пока, что совершенно не вижу минусов, кроме, разве что, того факта, что каждый второй теперь у нас стал вдруг дизайнером, мол он в фигме рисует так же как и мы дизайнеры.

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

Ответить

Мне кажется холиваров на тему "что лучше" Sketch / Figma уже и так было не мало. Я и не хотел плодить еще один. Каждая команда принимает решение, что ей использовать самостоятельно.

Статья скорее про то, что если решили вернуться назад в Скетч, то как это сделать

1
Ответить