Sketch VS Figma & co.
Битва мамонта с молодняком
[UPDATE 12 окт 2018]
В связи с недавним апдейтом Figma некоторое преимущество от использования плагина Anima app в Sketch app больше не является объективным преимуществом. Тем не менее, сила плагинов для Sketch app никуда не делась.Чуть раньше вышло обновление для Sketch app #52 в котором, в свою очередь, несколько улучшили работу со стилями цвета и текста, приблизив работу с ними к Figma.
В целом, несмотря на эти апдейты, доминация Sketch app на рынке не сильно пошатнулась.
Последнее время доминация Sketch app, якобы, снижается на рынке инструментов для дизайна интерфейсов. По крайней мере об этом твердят какие-то блогеры и маркетологи. Столь занятное обстоятельство стало поводом открыть для себя Figma еще раз, а также заглянуть внутрь бета-версии Invision Studio с целью не просрать новый тренд.
Оказалось, что за год с небольшим Figma обросла рядом невероятно полезных фич, но так и не смогла встать на одну ступень со Sketch app. Про Invision Studio могу сказать лишь то, что она столь же безидейна как Adobe XD, но немного лучше. Возможно, после релиза и через годик-другой Studio сможет догнать Sketch app на его сегодняшнем этапе развития.
DISCLAIMER. Статья написана в начале сентября 2018 и не может служить поводом не изучить указанные в блог посте системы, так как каждая из них очень динамично обрастает функционалом.
Чтобы не быть голословным я потратил некоторое время, чтобы детально сравнить Sketch app VS Figma и её конкуренты. К сожалению, бета-версию Framer X заполучить не удалось, потому не могу провести адекватное сравнение всех интересных инструментов.
Пишу как есть, без желания кого-либо обидеть, не имею предвзятого взгляда, ибо не за чем. Поехали.
Figma
Прекрасный инструмент с множеством крутого функционала, очень лаконичный и современный, работающий и в браузере (и даже в Safari), и на PC, и на Mac.
Есть замечательная возможность работать в одном документе сразу нескольким дизайнерам: вы видите чужие изменения real-time, любые изменения в компоненте (символе) отображаются сразу во всем документе. Точно также работают и комментарии, что делает Figma идеальным другом диджитал дизайнера, специализирующегося на работе над сайтом, SMM и баннерочками. Но, ввиду отсуствия некоторых функций вроде flexbox (для Sketch есть плагин, читайте дальше), работать в Figma над большими проектами со множеством списков, таблиц и сложных лейаутов представляется невыносимо обременительным занятием.
Figma идеально подойдет для студенческих работ, работы в маленькой студии в отделе онлайн-маркетинга и для фанатов рисования UI китов на потребу Dribbble.
Один из самый крутых плюсов Figma перед Sketch app — работа со стилями. В чем же столь разительное отличие в плане работы механики стилей в Figma по сравнению с механикой работы стилей в Sketch app? А то, что цвет можно сделать стилем и применять его хоть к заливке, хоть к обводке, хоть к тексту или выделенной части текста, сделав обводку в виде 🌈. Тогда как в Sketch app работа с текстом и его стилями, цветами выглядит достаточно архаично.
Еще вы можете применять и изменять стиль текста внутри компонента, например, внутри кнопки. Вам достаточно создать компонент, в который добавить прямоугольник и текст и назвать его, например, “Кнопка”. И далее вы переиспользуете компонент, в котором можете менять цвет заливки, толщину, стиль и цвет обводки на любой другой, включая выбор из заранее созданных стилей, менять стиль текста и его цвет. И для этого достаточно лишь одного компонента, тогда как в Sketch app нужно будет сделать сильно больше приседаний на бутылку, а также пропорционально увеличить количество символов кнопки, чтобы соблюсти столь же большое разнообразие, дарованное вам Figma. Тоже самое касается изменения цвета в компонентах иконок — взял инстанс компонента, выбрал слой с иконкой и применил к ней стиль цвета или назначил свой вроде #BFB37C.
Одна лишь эта фича позволяет экономить тонну времени. И именно стили являются ярком приемуществом Figma перед Sketch app и Invision Studio. Так жаль, что Sketch app не утащил эту механику себе (тогда как остальные скомуниздили всё именно у Sketch app).
Но не было бы так смешно, если бы не было так грустно. Грусть в случае с Figma — отсутствие плагинов. ПОЛНОЕ ОТСУТСТВИЕ ПЛАГИНОВ. А полное отсуствие плагинов = минимальная расширяемость функционала. И связано это с отстутствие таковой возможности у разработчиков Figma, а не с их нежеланием. А разрабатывать новые фичи с такой же скоростью, как написать плагин Sketch app (может сделать любой желающий) ребята из Figma попросту не могут.
И именно это обстоятельство дает Figma -100500 к юзабильности продукта.
Sketch app
Программа, устанавливаемая на Mac в особом представлении не нуждается, до сих пор содержит весь необходимый функционал из коробки, включая инструменты прототипирования + приложение для просмотра дизайна мобильных приложений на экране вашего iOS смартфона.
Парадигма символов встречается во всех остальных инструментах вроде Figma, Invision Studio, Framer X, но в них они зовутся компонентами. И символы — один из самых серьезных минусов Sketch app. Особенно это касается цветов. В Sketch app представлена палитра цветов, куда можно сохранять цвета, есть стили объекта, но все это упирается в необходимость создавать символы цветов, чтобы оперативно менять цвета в репликах символов на артбордах. У Figma эта проблема решена в разы элегантнее и удобнее.
Второй из минусов Sketch app — быстродействие приложения. Дело тут в том, что от версии к версии какой-то криворукий программист умудряется снизить скорость работы приложения и с этим приходится жить. Мощность вашего Mac почти не влияет на производительность Sketch app: хоть у вас Mac Pro, хоть у вас Macbook Air 11 — работать будет приблизительно одинаково 🤪
Что касается плюсов: он один, но настолько жирный, что конкурентам остается сосать лапу. Плагины. Именно плагины наделяют Sketch app сверх способностями. Ввиду того, что Sketch app устанавливается локально на ваш Mac, то и плагины устанавливаются на тот же Mac. Тогда как Figma, Adobe XD — облачные, куда там устанавливать плагин? Правильно, никуда! То, что анонсирует Invision Studio и Framer X пока выглядит как маркетплейс, где можно купить yet another UI kit, но никак не место, где люди выкладывают плагины.
Приведу пример тех самых сверх способностей:
🔥 Anima app — интересный плагин, дающий возможность создавать сайты в прямо в Sketch app. Но одна из его маленьких частей “Stacks” — функционал, который сэкономит вам не часы, а дни и недели в сравнении с ручным выравниванием списков и таблиц в других инструментах. К огромному сожалению ни в Figma, ни в Invision Studio и Adobe XD нет ничего подобного. Только Framer X анонсировал эту фичу, потому на него и надежда.
🔥🔥 Abstract — GIT для Sketch app. Если вам не знакомо слово GIT, то стоит внимательно изучить сайт Abstract. В двух словах: это версионность документов. Но в отличие от версионности в Figma, Abstract очень похож на те инструменты, которыми пользуются разработчики. Причем как по форме, так и по смыслу.
🔥🔥🔥 Disconnect — прекрасный плагин, который дает силу разорвать связь со всеми выбранными символами. Причем можно выбрать хоть 100500 артбордов и кликнуть на Disconnect.
🔥🔥🔥🔥 Magic buttons — да-да, волшебные кнопки. Просто посмотрите инструкцию и все поймете сами.
🔥🔥🔥🔥🔥 1001 заслуженный плагин. К счастью, их тысячи, сотня другая из них столь полезна, что позволит вам автоматизировать работу в Sketch app до уровня, недоступного конкурентам просто потому, что у них нет плагинов. Самые примечательные, на мой взгляд: RenameIt, Runner, Chart, Merge duplicate symbols.
Отдельного внимания заслуживает Google с их Material design editor.
Увы, но, ввиду отсуствия плагинов, я отбросил желание использовать Figma для чего-то более крупного, чем дизайн лэндинга и микро-аппа для продажи смуззи в Бирюлево.
Invision Studio
Достаточно одной фразы, чтобы описать эту программу — ребята украли все из Sketch и вкорячили внутрь аналог Principle for Mac.
Ничего особо выдающегося найдено не было внутри Invision Studio. Тогда зачем же ее делали? Для ребят это был единственный выход не терять платежеспособную аудиторию, потому что все их партнеры-конкуренты сами обзавелись встроенными инструментами протопирования и развивают их в правильном направлении.
В сухом остатке мы имеем программу, которая не имеет ни одной киллер фичи перед конкурентами (если я что-то упустил, маякните в комментарии). Разве что наличие возможностей создания анимации внутри инструмента, но тут есть такое количество конкурентов, у кого функционал и возможности шире, хотя интеграция не столь бесшовная. Например, Principle for Mac, Framer и, конечно же, король Adobe After Effects, с кем тягаться попросту некому.
Мне не совсем понятна аудитория Invision Studio, хотя для начинающих и не вкуривших в особенности символостроения дизайнеров и студентов подойдет. Там вы сможете создавать мимимишные аппки и радовать друзей на Dribbble и преподавателей умопомрачительными редизайнами Dribbble и фейсбухов. Для каждодневной рутинной работы на CRM продукт ПОКА! бесполезен.
Но я уверен, что через годик ребята скомуниздят недостающие фичи у Sketch app и Figma и будет всем счастье, ведь копировать они научились неплохо.
Framer X
На момент написания поста беты под рукой не было, потому поделюсь наблюдениями, основанными на информации с их сайта.
Первое и, пожалуй, самое главное — ребята догадались воткнуть Flexbox сразу внутрь программы.
За это ⭐️ ⭐️ ⭐️ ⭐️ ⭐️.
Вторая, крайне интригующая фича — поддержка React вдоль и поперек. Подразумевается, что мы можете писать код вместо того, чтобы водить мышкой. И, на самом деле, на примере AutoCAD можно сказать со 100% точностью, что работать в консоле быстрее, чем пользоваться мышкой. Проблема лишь в том, что сначала нужно познакомиться с React, о чем говорят на самом сайте.
Без знания React это точно такая же рисовалка, что и Invision Studio + плагин Anima app, встроенный внутрь (и слава Богу!). Из приятного стоит также отметить, что можно копипастить код компонента прямо с чужого сайта или, в теории, скопипиздить весь сайт, чтобы не перерисовывать.
В общем, очень многообещающий продукт за одним лишь НО: дааааааалеко не все программируют мобильные приложения на React. В основном используют Swift (ранее Object C) для iOS, Kotlin (и Java) для Android. Но, думаю, об этом ребята знают и добавят фичи для экспорта.
Курсы по React, которые создатели Framer X рекомендуют можно купить тут.
Но нельзя забывать, что сегодня React, завтра хуYact, а Swift и Java просто есть и никуда не уйдут.
В сухом остатке
Скорее всего, вы догадались, что если вы планируете делать долгосрочные, большие и сложные проекты, то альтернатив Sketch app для вас пока нет (Сентябрь 2018). Потому что Sketch app — industry standart как Adobe InDesign в печатной индустрии. С этим придется смириться, хотя Figma и правда очень хороша. Плюс Sketch app еще и в том, что 99.9% плагинов бесплатные, и вы можете затюнить, прокачать и затонировать Sketch app так, как вашей душе и команде угодно, а цена в год сопоставима с конкурентами или чуть дешевле.
Реальной альтернативой пока является только Figma. Если вы готовы жить без Flexbox и тратить дни и недели на ручное выравнивание элементов в угоду офигительно крутой работе со стилями и компонентами, то Figma — ваш лучший друг.
Если вы только начинаете свой путь, то выбор для вас максимально широк — берите любой инструмент и вперед.
Всем бобра! ❤️
