Как открыть макет из 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 опасаюсь только работы с изображениями. В остальном, как я понял, распробовав сервисы пока что поверхностно, это очень удобный современный вариант. Есть много плюшек + значительно меньше нагрузки на мощности компа. Вопрос только в том, чтобы после меня это смогли нормально верстать и прочее.

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-файлы вы отправите нам.

Browse popular tags

See all posts

Nothing Found

Please, try another combination.

How to Open Sketch File on Windows

How to Open Sketch File on Windows

So… Here’s the question: how to open .sketch file on Windows?

Sketch App

Sketch is a Mac App. But you don’t have a Mac. You only have Windows, and this damned Sketch file someone sent you. And that someone had a Mac. But you don’t have a Mac.

What are you going to do? Buy a Mac? Too expensive. Ask that someone use Photoshop? No way, that someone is obsessed with Sketch. You’re in a hopeless jam. Or so you thought…

Sketch for Windows

You need a Sketch alternative for Windows. There is no Sketch for Windows.
Luckily, we are here to save the day and offer a few Sketch alternatives for Windows:

Sketch for PC

There will be only one. Below is the native app for Windows called Icons8 Lunacy.

Icons8 Lunacy

Lunacy is a standalone viewer for Sketch files on Windows. It was developed from scratch by hacking the sketch file format.
Price: Free

Hint: let’s open, edit, and save Sketch files on Windows.

Sketch Online

There are quite a few of these.

Avocode

Avocode is all about HTML coders. Someone will have to upload sketch file to the cloud using their plugin for Sketch. The initial setup took us 40 minutes and caused Sketch to consume 90% of CPU.

Zeplin

Zeplin is a direct competitor to Avocode. It has downloadable apps for Mac and Windows, but don’t get fooled. They are not native apps. They just wrap their website.

Price: Free for one project, $19 for 3 projects/month.

Figma

This is a new tool. Unlike Avocode and Zeplin it’s a fully functional online vector editor and a collaboration tool. So far it’s free.
Update: now they have pricing.

Price: Free for two projects, for larger projects starting price is $12 per member.

Hint: someone will have to upload a sketch file to the cloud. So, make enough Mac-user friends so that you have at least one in every time zone. Don’t live in Manila: you need fast internet.

Social Engineering

Violence

Hint: target hipsters. They are feeble and weak.

Hint: lower your standards. Target ugly rich people.

Patience

Hint: if you sit long enough at Starbucks, someone will definitely ask you to watch over his Mac. Target old people, they pee longer.

A lot of Patience

Hint: ask Bohemian to support Sketch for Windows.

Online dating

Hint: ignore faces in the photos. Look for Macs.

Hackintosh

Hint: live in a country that ignores copyright law. North Korea works fine.

Unemployment

Hint: before stealing from your employer, make sure you live in a welfare state. Norway works.

Money

Hint: if you are short of cash for the latest Mac Pro, sell some of your diamonds, bricks of gold, or Picasso masterpieces.

Jokes aside, we’ve hacked the Sketch format and developed a viewer. It opens any Sketch file on Windows. It is a Sketch alternative for Windows. It’s free.

Формат 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). Без этого нечего даже и пытаться просмотреть проект.