Как открыть макет из Sketch на Windows и Linux

Mar 26, 2015 · 3 min read

Раньше некоторые верстальщики с Windows и Linux были против макетов в Sketch, потому что открыть их сложно или невозможно. Но недавно запустилось приложение Avocode App ( http://avocode.com ), которое позволяет делать это без лишних трудов. Я решила проверить процесс сама.

Качаем Avocode

Вот оно — https://manager.avocode.com/downloads. Сразу же — создание учетки. В разархивированной папке будет файл приложения. В приложении тоже надо будет залогиниться, но это происходит почти без участия пользователя.

Загружаем свой проект

Все файлы в Avocode объединены в п р оекты (можно считать это просто папкой). Но залить sketch-файл в проект из Windows нельзя. В учетной записи в Avocode уже должен быть расшаренный дизайнером проект. То есть совсем без мака (где будут все шрифты из макета) сейчас обойтись нельзя. Загрузить из дропбокса тоже не получится.

Через плагин к самому скетчу (https://avocode.zendesk.com/hc/en-us/articles/202196441) можно загрузить скетч-файлы в проект (плагин Avocode поддерживается только с версии 3.1). Ставить плагин просто. Нужно довериться редиректам и подсказкам, и нажимать всегда на самые заметные кнопки. Впрочем, это уже к верстальщику напрямую не относится.

Вытаскиваем стили и картинки

После этого нужно зайти в свои проекты в программе и синхронизировать их с учеткой. Еще в Avocode есть демо-макет, на котором можно посмотреть, как и что устроено. Из макетов можно вытаскивать стили, делать экспорт .png, jpg, .svg, смотреть расстояния между объектами.

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

Макет с несколькими артбордами открывается в режиме превью, а фон между ними прозрачный. Для работы с конкретным артбордом Avocode открывает отдельную вкладку.

Прямо в приложении есть 4 понятных видео-туториала о начале работы и базовых операциях.

Следим за версиями

С помощью плагина для скетча дизайнер сможет обновлять существующие макеты (Sync Updates). В веб-менеджере Avocode это называется revisions, а каждая последняя версия будет помечаться как current.

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

Как открыть скетч на винде

мне нужна нормальная адекватная оффлайн прога для работы со скетчами!

По вопросу автора. Насколько я знаю, действительно проще и практичнее всего попросить дизайнера (или заказчика, чтобы он передал дизайнеру) загрузить скетч-файлы в Zeplin. Один проект там можно создрать бесплатно. А дальше уже с последним сами разберётесь. Не вижу проблем.

Ради интереса, небольшой вопрос для людей, которые занимаются вёрсткой: удобнее ли вам работать с PSD или с дизайном, загруженным в Zeplin? Хотелось бы увидеть побольше мнений для репрезентативности

По вопросу автора. Насколько я знаю, действительно проще и практичнее всего попросить дизайнера (или заказчика, чтобы он передал дизайнеру) загрузить скетч-файлы в Zeplin. Один проект там можно создрать бесплатно. А дальше уже с последним сами разберётесь. Не вижу проблем.

заказчику абсолютно все равно на просьбы исполнителя

Странные у вас заказчики 🙂

Как его туда запихать! Может есть хак какой!

удобнее ли вам работать с PSD или с дизайном, загруженным в Zeplin?

Есть ещё invision. Figma понимает sketch макеты, это самый удачный вариант, как мне кажется)
Ответить

удобнее ли вам работать с PSD или с дизайном, загруженным в Zeplin?

Debager, зависит от заказчика. Может, мне повезло, но пока что таких, которым всё равно, не встречал. Максимум, они уже не могут с предыдущим исполнителем сконтачиться или тот в данный момент сильно занят. Не стоит опасаться идти с заказчиком на контакт лишний раз — результат Вашей работы в его интересах.

Как я понимаю (сам со скетч-файлами дела не имел) и как правильно писал Chomp, если хочется ещё именно дизайн покрутить, то можно открыть в Figma, отредактировать, перевести в Зеплин. Или прямо из фигмы нужное забирать, если получится.

Кстати, хотел у Вас спросить. Зачем брать в работу заказ с исходниками, которые не можете открыть в своей рабочей среде? В таких случаях даже если забыли изначально уточнить, то когда присылают файлы, которые Вам не подходят, пишите клиенту и договариваетесь либо о нормальных исходниках, либо о прекращении работы по обоюдному согласию. Не сочтите за нравоучения)

Hungry_Hunter, tyzberd, спасибо за ответы. Я вот относительно Figma+Zeplin опасаюсь только работы с изображениями. В остальном, как я понял, распробовав сервисы пока что поверхностно, это очень удобный современный вариант. Есть много плюшек + значительно меньше нагрузки на мощности компа. Вопрос только в том, чтобы после меня это смогли нормально верстать и прочее.

Формат SKETCH

В компьютерной среде имеется множество форматов файлов. Что бы они в себе ни содержали. И некоторые из них способны поставить в ступор начинающих пользователей. Но Sketch вполне может ввести в замешательство и продвинутого юзера. И это не шутки. Формат этот используется только профессионалами и имеет очень узкую направленность.

Что за формат такой?

Sketch – это расширение файла, использующегося программой с точно таким же названием. Она была разработана компанией Bohemian Coding и является продуктом для профессиональных дизайнеров. В этом файле содержится вся информация о текущем проекте: рисунок, его слои, правки и многое другое. Файл с таким расширением появляется в том случае, если в Sketch нажали на кнопку «Сохранить».

Преимущества Sketch

Чем так хорош Sketch? Почему разработчики решили использовать именно его для сохраненных проектов? Дело в том, что Sketch – проприетарный формат. Он целиком и полностью отражает философию программы и MacOS в целом. Полная закрытость. Также у него есть некоторые особенности, делающие его наиболее предпочтительным для дизайнеров.

Неограниченное количество слоев. Данный формат поддерживает многослойную структуру изображения (на манер всем известного PSD). Отличие от PSD заключается только в том, что там количество слоев ограничено. А в Sketch их можно сохранить столько, сколько нужно для текущего проекта.

Высокое качество изображения. Часто дизайнеры работают с несжатыми картинками. И данный формат позволяет не сжимать изображения при сохранении. То есть, если открыть Sketch одноименной программой, то все будет выглядеть именно так, как должно. А не так, как решил механизм сжатия.

Мультистраничность. Если речь идет о каком-то документе, то в одном файле Sketch можно сохранить неограниченное количество страниц. И все они будут точно в таком же порядке, какой был при работе над проектом. Для дизайнеров это очень важно.

Конфиденциальность. Ни один пользователь Windows не сможет открыть данный файл. А если добавить к этому возможность зашифровать его содержимое и защитить паролем, то попытка просмотреть Sketch даже на MacOS обречена на провал. Ни один известный формат не имеет такой крутой защиты.

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

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

Чем открыть?

Ответ на этот вопрос ищут многие. Но, к сожалению, открыть этот тип файла можно только той программой, которой он используется. То есть, самой Sketch от Bohemian Coding. Все бы ничего, но версия этого замечательного продукта существует только под MacOS. Под Windows программу портировать в обозримом будущем никто не собирается. Так что увидеть содержимое файла можно только в том случае, если у вас имеется MacBook или iMac. Хотя обыкновенный «хакинтош» (MacOS, установленная на классический ПК) тоже способен запустить программу Sketch.

Вероятно, такое игнорирование пользователей Windows связано с тем, что сия операционная система полна «дыр». Защита ее никуда не годится. А Bohemian Coding пекутся об авторских правах дизайнеров. Не стоит забывать и о том, что продукты от Apple просто созданы для работы с графикой. В то время, как лэптопы и ПК на Windows часто просто не могут дать качественную цветопередачу или правильно отобразить некоторые нюансы. Скорее всего, это и отталкивает разработчиков от детища Microsoft.

Как посмотреть содержимое файла Sketch?

Мы постарались реализовать способ, по которому вы можете посмотреть превью, но не все файлы можно посмотреть с содержимым, в первую очередь он не должен быть защищен, и во вторых — он должен быть более-менее стандартным. В общем пробуйте и возможно мы вам поможем. Используйте для этих целей наш онлайн-конвертер изображений.

Экспорт в другие форматы

Можно ли как-то просмотреть содержимое файла Sketch, если экспортировать его в другой (более популярный) формат? Можно. Но на данный момент нет конвертера, который сможет адекватно осуществить такую процедуру. Экспортировать этот формат можно в более привычные, TIFF, SVG, PNG и так далее. Все они отлично открываются стандартными просмотрщиками под Windows. Но есть один нюанс: для того, чтобы осуществить экспорт нужна программа Sketch. И MacOS тоже.

Заключение

Итак, Sketch – это формат, в котором заключен некий дизайнерский проект в первозданном виде. Открыть его не сможет никакая программа, кроме продукта от Bohemian Coding. Как-то конвертировать файл, экспортировать в другой формат или подвергнуть другим подобным процедурам нельзя. Ничем хорошим это не закончится. А если файл еще и защищен паролем, то лучше вообще бросить попытки его открыть. Все равно не получится. Экспортировать его в какой-нибудь более популярный формат можно только из программы Sketch. Но для этого нужен компьютер с установленной на нем операционной системой от Apple (MacOS). Без этого нечего даже и пытаться просмотреть проект.

9 нелепых способов открыть .sketch-файл. И один ничего такой

Итак: требуется открыть .sketch-файл, созданный программой Sketch. Той самой, которая есть только на Mac’ах.

А Mac’a нет. Есть только Windows и этот дурацкий .sketch-файл, который кто-то прислал. И у этого кого-то Mac есть. А у тебя нет. Только Windows.

И что делать? Покупать Mac? Дороговато. Может попросить этого кого-то использовать Photoshop? Не, этот кто-то одержим Sketch’ем. В общем, дело — шляпа… Или нет?

Все не так плохо. 10 альтернатив покупке Mac’а — самых эффективных, самых действенных и законных (почти во всех странах):

1. Icons8 Lunacy

Инструкция: просто открывалка для Винды. Без всяких костылей. Качать тут.

2. Avocode / Zeplin

А также Teamviewer или Zoom .
Инструкция: придется завести друзей-дизайнеров с Mac’ом в каждой часовой зоне. И дальневосточный гектар лучше тогда не брать — этому способу нужен хороший интернет.

3. Насилие

Инструкция: выслеживайте хипстеров. У них часто Mac’и, а сами они, как правило, слабые и не дают сдачи.

4. Секс

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

5. Терпение

Инструкция: если долго сидеть в Старбаксе, возможно кто-то попросит присмотреть за Mac’ом, когда пойдет в туалет.
Ваша целевая аудитория — любые девушки. Чем больше сумка, тем больше у вас времени.

6. Еще больше терпения

Инструкция: попросите разработчиков Sketch’а добавить поддержку Windows.
Кстати, у них очень удобный F.A.Q:

7. Сайты знакомств

Инструкция: на фотографиях игнорируйте лица. Ищите Mac’и.

8. Хакинтош

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

9. Работа

Инструкция: прежде чем украсть Mac у своего работодателя, изучите пособия по безработице в стране. Рекомендуем Норвегию.

10. Деньги

Инструкция: если уж совсем прижмет, продайте пару бриллиантов или старых картин. На Маc должно хватить.

А теперь серьезно: мы “взломали” .sketch-формат и разработали программу для его открытия на Windows. Бесплатно.

Две вещи мы можем сказать наверняка:

• она очень полезная, есть даже standalone для запуска с флешки
• она полна багов (версия альфа, релиз 0.000000000001)

Да, она открывает большинство файлов как надо, просто иногда… вы можете встретить небольшие косяки. Так вот, мы будем очень признательны, если проблемные .sketch-файлы вы отправите нам.