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

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

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

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

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

    1. Icons8 Lunacy


    Icons8 Lunacy App .sketch viewer for Windows

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

    2. Avocode / Zeplin


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

    3. Насилие


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

    4. Секс


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

    5. Терпение


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

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


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

    F.A.Q. Sketchapp о поддержке Windows

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


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

    8. Хакинтош


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

    9. Работа


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

    10. Деньги


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

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

    Скачать дистрибутив

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

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

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

    Послать глючный .sketch на анализ

    P.S. Сегодняшняя статья на Хабре 4 правила работы в Sketch над крупными проектами — восхитительна.
    Поделиться публикацией
    Комментарии 77
      +13
      Отличный пятничный пост, классная подача материала :)
        –1
        мля вчера была пятница!
        +1
        Figma (https://www.figma.com) может импортировать .sketch, по крайней мере так заявлено (No installation required. You can even import from Sketch.).
          +1
          Ух ты, какое свежее, в сентябре прошлого года сделали. Хорошее приложение, спасибо.
            +1
            Мне недавно выдали HTML, выгруженный из Sketch с помощью плагина Marketch
            Ещё пока не понял — удобно или нет, но пользоваться можно. Пример выгрузки в HTML
              +1
              И я такой использовал когда-то, вполне удобно, если не считать, что нужно плагин ставить на сам скетч. Думаю можно подобный экспорт и в Lunacy реализовать
                0
                Вообще отличный вариант, я считаю. Сам так же делаю
                +1
                Проверял их (Figma) импорт скетч файлов — он хорош весьма! Правда потребовалось установить предварительно их программу для выкачивания шрифтов с десктопа. И если нужных шрифтов в системе не оказалось, то текстовые слои скрываются и приходится вручную искать эти слои и выбирать другой шрифт. Надеюсь исправят.

                В lunacy сейчас, если не найден шрифт из макета, используется системынй (segoe как правило), из за этого бывает съезжают переносы :-( Но уже есть несколько идей как это поправить.

                Например автоматической заменой на другой шрифт с похожими метриками. И т.к. в макетах всегда явно задан размер рамки в которую вписан текст, то попробуем еще немного масштабировать текстовый блок, так что бы конечная верстка не ехала
                +1
                Сделайте online service, какая еще флешка.
                А за хипстеров стал переживать.
                  +1
                  Я искренне сомневаюсь в онлайн сервисах для прототипирования.
                  Lunacy оптимизировали, чтобы он смог открыть sketch в несколько сотен мегабайт. Встречаются такие макеты.
                  Браузер бы умер.
                    +2
                    Грустно, девушки. Теперь за хипстеров вообще тревожно.
                    +1
                    Есть компании, где запрещено макеты в облако выгружать (секурность). На маках не всем надо сидеть, а экспорта в ПДФ не допросишься.

                    Благослови вас г-сподь за это приложение, очень вовремя.
                    0
                    Linux?
                      +1
                      Ну, Lunacy на базе .NetFramework
                      Можно запустить через mono, наверное. Не проверяли.
                    • НЛО прилетело и опубликовало эту надпись здесь
                        +6
                        Да, так и есть. Надо глючных скетчей насобирать, чтобы счётчик версий запустить.
                        0
                        Отличный ход: опубликовать неприкрыто рекламный пост в пятницу вечером в надежде на то, что модераторы перенесут его в «Я пиарюсь» не сразу же.
                        Edit. А, администрация его увидела и в первом же комментарии одобрила. Ну, ок.
                          +2
                          Зачем нужна ваша программа, если уже есть пункт № 1?
                            +7
                            Это и есть наша программа
                              +2
                              Опубликуйте ее пожалуйста в Windows Store. Из плюсов: желающие открыть .scetch-файл смогут легко узнать про вашу прогу
                                0

                                Вот за этот плюс огромное спасибо! Это нам очень поможет окончательно определиться.

                                  0
                                  Спасибо, уже работаем над этим :-)
                                    0
                                    Творили-творили и натворили:
                                    https://www.microsoft.com/store/apps/9pnlmkkpcljj

                                    с bridge в итоге не получилось, так что быстренько переписали вьюхи на uwp. остальное и так было в portable все. как-то так :-)
                                      0
                                      Забавно, теперь в windows store есть приложение для открытия sketch-файлов, а в mac appstore больше нет…
                                  0

                                  del

                                  +2
                                  Спасибо вам большое за программу. Буду пробовать)
                                    +9
                                    Версия для Mac не планируется? ;)
                                      +9
                                      Скрытый текст
                                      +9
                                      Реализация восхитительна, от инсталлера (все компактно, никакого MSI, уютненький InnoSetup, code signing) до архитектуры (реактивка, отличный подбор пакетов [еще чуть-чуть и запустить под линухом можно будет без mono], да и сам разбор sketch-blob'ов аккуратненький такой). Я хочу от вас .NET софт, как говорится.

                                      Почему бы вам не выложить SketchLib в open source, да не сделать nuget package? Вы сознательно не стали ничего обфусфировать, доведите до конца — коммунити будет крайне признательно, проще будет вести обновления формата, ну и дополнительный плюс в карму Icons8.
                                        +4
                                        Спасибо за такой отзыв! Не ожидал, приятно :-)

                                        На счет open source мы думали — вполне возможно что так и сделаем.

                                        Но несколько позже, т.к. сейчас приоритет на том что бы сделать идеальное отображение дизайнов в приложении и реализовать основные полезные функции для конечных пользователей (экспорт в SVG, Html например).

                                        еще чуть-чуть и запустить под линухом можно будет без mono

                                        а вот тут поподробнее полжалуйста! Уже есть способ GUI приложения делать на .net core??
                                          +1
                                          Похоже нашел! AvaloniaUI
                                            0
                                            Это ты круто нашел, так даже я не находил, спасибо!
                                        +1
                                        Так Zeplin же хорош, в чем проблема?
                                          +1
                                          В зеплин экспортировать надо из скетча, разве нет?
                                            +1
                                            Там нельзя импортировать файл? Если да, то печально. На работе постоянно используем Zeplin не особо заморачиваясь как туда попадают макеты.
                                              +1
                                              ну да, через плагин для cкетча или фотошопа. 
                                          +1
                                          Что лучше — винда с виртуальным маком или наоборот?
                                            +2
                                            Кроссплатформенные приложения…
                                              +2
                                              Скорее нативные версии приложения под разные платформы.
                                              0

                                              Все-таки зависит от задач.

                                                0
                                                мак не поддержиает виртуализацию на винде на уровне лицензии. Та, что есть — хаки и костыли. Винда в виртуалках намного лучше работает.
                                                +3
                                                Есть ещё один способ — игнорировать дизайнеров и/или софт, которые не умеют экспортировать прототип в общедоступный формат. В конце концов, заказчик всегда диктует условия, а не дизайнер.
                                                  +2

                                                  Заплатил, а потом проигнорировал. Крутая тема, бро!

                                                    +2
                                                    Заказчик сказал — норм, выглядит как я хотел, прям конфетка. Верстальщик никаких условий продиктовать не успел.
                                                    +4
                                                    А Mac’a нет. Есть только Windows и этот дурацкий .sketch-файл, который кто-то прислал. И у этого кого-то Mac есть. А у тебя нет. Только Windows.

                                                    Скрытый текст
                                                    image
                                                      +1
                                                      Не то чтобы плакать, но руки иногда опускаются. И не то чтобы скетч, но и другие вещи надо иногда на маках проверять, например поведение JS/CSS кода в Safari. Ну это те же чувства, когда сидишь на Убунте и надо проверить JS/CSS под IE.
                                                      +2
                                                      Есть еще онлайновый https://app.sketchviewer.com
                                                      Я бы не сказал, что он очень удобен, но с задачей «посмотреть, что в этом скетч файле» справляется
                                                        +2
                                                        кстати он пока лучше рендерит чем наш…
                                                        ну вот и здорово! хипстеры счастливы, а нам не придется веб-сервис делать :-)
                                                        –4
                                                        Слив засчитан! +++
                                                          +1

                                                          Мне одному кажется, что самый правильный способ должен быть такой:


                                                          0 способ


                                                          Пусть не выёживается, а пришлёт макет в общедоступном формате или хотя бы в том, который является стандартом де-факто для индустрии.

                                                            0
                                                            можно уточнить какой формат общедоступный или который является стандартом де-факто для индустрии?
                                                              +2
                                                              PSD?
                                                                +1
                                                                после работы в sketch, работать в PS очень не удобно. Пример: дизайн приложения на 50 экранов, а файл размером 70 мб с векторными объектами или 50 файлов метро по 50 и все в расте?
                                                                И фронт-энд разработчики после sketch файлов переданных в zeplin/avocode напрочь отказываются работать с psd. И такого все больше и больше. Так что это далеко не общедоступный формат и не стандарт индустрии, скорее наоборот
                                                                  0
                                                                  сам ваш пост говорит о том что «стандарт» а что нет, три буквы против 400
                                                                    0
                                                                    мой пост говорит о том, что многие не согласятся с тем, что три буквы стандарт
                                                                      0
                                                                      стандарту все равно согласны с ним или нет, стандарт это то в чем требуют результат, просто такова реальность.
                                                                        0
                                                                        увы, я не считаю корректным передавать разработчиком psd, с ним не удобно работать и тяжело определить банальное расстояние. Инструменты для создание дизайн-спецификаций — вот пока что идеальное и стандартообразующее решение (Avocode, Sympli и Zeplin). А будь то фотошоп или скетч или люстра неважно.
                                                                  0
                                                                  Я сейчас буду излагать очевидное, но если имеется в виду Photoshop, то этот инструмент не предназначен для проектирования GUI. Существуют специализированные инструменты (в том числе Sketch), а у Adobe их целых два.

                                                                  Популярность Photoshop для таких целей вызвана широкой распространённостью и условной бесплатностью этой программы во времена, когда теперешние дизайнеры только осваивали компьютер, но это не делает его формат общедоступным, поскольку отсутствуют общедоступные и функциональные инструменты для работы с ним в упомянутых целях.

                                                                  Что касается стандарта де-факто, то сейчас им является Sketch, и существование вашего продукта это косвенно подтверждает. В ближайшее время мы увидим рост популярности Xd, эти два инструмента, вероятно, поделят рынок и станут наиболее популярными средствами разработки.

                                                                  А ещё через несколько лет специалисты с недоумением будут смотреть на тех, кто пользуется для таких целей Photoshop, Illustrator, Indesign или Xara.

                                                                  И если вы не поняли, вопрос Oleh_M был риторическим.
                                                                  0

                                                                  Ну, явно не тот, который открывается только одной программой и только на одной ОС… Причём официального способа работы с ним на других системах, как я понял, нет и разработчики делать его не собираются.

                                                                    –1
                                                                    Это распространённая практика, существует значительное количество узкоспециализированных форматов, которые «которые открываются только одной программой и только на одной ОС». Например, в наружной рекламе это формат Corel Draw, в трёхмерной графике, обработке звука и видео можно найти ещё пачку примеров.

                                                                    Но самое главное — не должно быть в индустрии никакого «стандарта» ни на форматы файлов, ни на языки программирования, ни на прочие технологии. Должна быть здоровая конкуренция и свобода выбора.

                                                                    На самом деле проблема заключается не в том, что Sketch работает только на маке, а в том, что кто-то не умеет правильно организовать производственный процесс. Понимание этой простой вещи делает бессмысленными любые споры о «стандартах» и личных привычках дизайнеров и других специалистов.
                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                    0
                                                                    При выборе средства для UI/X я бы выбирал между Sketchapp или скажем Axure/Proto.io/Pixate/Origami. А не между скетчем и фотошопом.

                                                                    Насколько я понимаю, ниша ФШ, в которой нет достойных альтернатив — это качественные растровые изображения, частично векторные. ФШ не удобен для создания интерактивных прототипов веб-страниц. Я до сих пор не уверен, что в фотошопе можно реализовать навигацию, динамику и поведение, хотя бы упрощённо (клик — страница открылась/закрылась, клик — блок развернулся/свернулся). И думаю, что задача «переместите вот этот блок из шапки справа вот от этого» в ФШ занимает намного больше времени, чем в скетче.

                                                                    И, насколько я понимаю, Скетч выделился среди средств для прототипирования своей простотой интерфейса, который при этом остаётся удобным, не теряет гибкости и информативности. Также у него высокая скорость работы. И он выдаёт предсказуемый конечный результат.
                                                                      0
                                                                      И еще — все, что ты видишь в Sketch ничем не отличается от верстки, в Photoshop за 15 лет такого у меня не случилось ни разу
                                                                        0
                                                                        Насколько я понимаю, ниша ФШ, в которой нет достойных альтернатив — это качественные растровые изображения


                                                                        Ниша ФШ — это цветоделение и цветокоррекция, ретушь и так далее. Выше я уже говорил о предназначении инструментария.

                                                                        А ещё удивительно, что вы не упомянули специализированное решение, существующее и использующееся дизайнерами GUI почти 20 лет — программу Fw, на замену которой недавно была создана Xd.
                                                                      +1
                                                                      -1 способ: Попробовать сверстать что-нибудь из Sketch и сидеть плакать в углу, потому что 10 лет юзанья «общедоступного» формата были потрачены впустую
                                                                      +3
                                                                      То чувство, когда скачал LunacySetup.exe, поддавшись обаянию статьи и комментов… и всмпомнил, что у тебя Убунту.
                                                                        0
                                                                        Зато шанс потестить под mono :)
                                                                        +1
                                                                        Спасибо большое за вашу программу и ссылку на статью в конце материала!
                                                                        Даёшь Скетч в массы!
                                                                          +1
                                                                          Отлично, спасибо огромное! Кто-нибудь подскажет как прокручивать документ по горизонтали?
                                                                            +1
                                                                            Cейчас только через [пробел]+drag
                                                                            Еще можно средней кнопкой мыши таскать
                                                                            Cделаем [Shift]+wheel в ближайшем обновлении
                                                                            +1

                                                                            "И дальневосточный гектар лучше тогда не брать — этому способу нужен хороший интернет". 100 мб/с 20 мс. Местечковый патриотизм, конечно… Но всё равно как-то...

                                                                              +1
                                                                              Реквестую пост о том, как вы разбираете Sketch или, действительно, заопенсорсите решение. Очень интересно, как вы это делаете. Насколько я понимаю, Sketch файл — это sqllite база с огромным блобом?
                                                                                +3
                                                                                Да. sqllite база. Пара таблиц и одна большая ячейка blob. И в этом блобе хранится большой plist словарь.
                                                                                Поискал немного нашел сначала маковские исходники парсера plist-а а потом и реализацию на C# https://github.com/animetrics/PlistCS, хотя пришлось ее переписать потом но вначале очень помогла, спасибо автору!

                                                                                В общем из этого plist-a строим иерархию объектов и потом скармливаем уже визуализатору. Возможно и правда заопенсорсим.

                                                                                  0
                                                                                  Визуализатор, который на основании этих данных рисует картинку, вот что интересно. Можете показать простой пример как выглядят входные данные для визуализатора и что получается на выходе? Вы в HTML рендерите?
                                                                                    0
                                                                                    рендерим через skia sharp

                                                                                    путь примерно такой:

                                                                                    https://gist.github.com/anonymous/b5e484998ec4f0458d67733ee748f846
                                                                                0

                                                                                Пробовал открыть скет-файл размером 61Мб, прога умерла…
                                                                                Так что пока не вижу альтернативы варианту:


                                                                                1. Avocode / Zeplin
                                                                                  +1
                                                                                  скорее всего дело не в размере файла. если можете прислать макет (через форму https://icons8.typeform.com/to/zzRZ6A или на почту lunacy@icons8.com),
                                                                                  то попробую разобраться в чем проблемма.

                                                                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                                Самое читаемое