Я прочитал множество статей, сравнивающих эти две программы, но я думаю, что их авторы несправедливы по отношению к Figma. Некоторые из них мельком упоминают о функциях команды, браузерности, компонентах, ограничениях, но на самом деле они не фокусируются на том, насколько Figma лучше, чем версии Sketch. В лучшем случае, они заставляют думать, что обе программы примерно одинаковы. Причина, по которой я пишу эту статью – это не так, они не одинаковы. Это битва нюансов и есть ОЧЕНЬ мало вещей, которые Figma делает хуже, чем Sketch. Даже там, где это происходит, Figma едва хуже. Но когда она лучше … другим до нее далеко.

Несколько месяцев назад мне бы и в голову не пришла мысль написать подобную статью. Я заядлый фанат Sketch. Я работал в нем каждый день почти по 8 часов. Я люблю Sketch.

Ну… Я любил Sketch.

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

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

Не поймите меня неправильно. Это ПОТРЯСАЮЩИЙ инструмент для создания пользовательского интерфейса. Без Sketch у меня не было бы работы и знаний, которые я имею сегодня. Я перед ним в огромном долгу за то, что он вытащил меня из экосистемы дизайна пользовательского интерфейса Adobe, представленной Illustrator и Photoshop.

Я отчетливо помню, как 3 года назад я бы ударил… ну, может и не ударил, но наверняка бы стал агрессивен по отношению к любому, кто бы дурно отозвался об Illustrator. Мне НРАВИЛСЯ этот инструмент. Прошедшее время.

Делал.

Был.

Уже не в настоящем времени.

Illustrator был выброшен на свалку.

Сегодня я условно делаю тоже самое со Sketch. Это был старый приятель. Но, я думаю, мы отдаляемся друг от друга. Дело не в нем, дело во мне. Хорошо. Может дело и в нем, но мы все еще можем быть друзьями.

Потому что чуть больше месяца назад я вошел в Figma. Угу. Залогинился. В ОБЛАЧНОМ СЕРВИСЕ.

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

Причина #1: Она реально быстрая

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

Почему вы должны перейти из Sketch на Figma

Но это еще не все. В конце концов, я готов смириться с худшей производительностью в угоду лучшим функциям. Я справлюсь.

Но давайте перейдем к основному. Вам не нужна только производительность. Вам нужна:

Причина #2: Матерь Божья вложенных компонентов

В любом случае, забудьте все, что вы знаете о вложенных символах в Sketch. Редактирование символов??? ТЬФУ! Больше нет. Figma взяла идеи из Sketch и улучшила их.

Компоненты это не тоже самое, что символы. Даже и близко нет.

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

Возможная ситуацию в Sketch:

  • У вас есть символ с черным текстом
  • В некоторых ситуациях текст должен быть красным.
  • В некоторых ситуациях этот текст должен быть с непрозрачностью 40%
  • В некоторых ситуациях текст должен быть красным с непрозрачностью 40%.

Почему вы должны перейти из Sketch на Figma

 

  • Вы также хотите показать дизайн на разных уровнях масштабирования устройства, из-за доступности, ага.
  • О, также вы разрабатываете версию для ночного режима.
  • А еще… говоря о доступности, у вас есть версия с повышенной контрастностью.

Почему вы должны перейти из Sketch на Figma

  • О, и внезапно вы провели тестирование пользователями и поняли, что вам нужно добавить иконку к этому символу.
  • О, и эта иконка меняется.
  • … и иконка… меняет… цвет.

Почему вы должны перейти из Sketch на Figma

Разве не было бы прекрасно, если бы каждый слой в символе мог быть изменен, без нарушения оригинала или необходимости вложения еще одного символа внутри оригинала?

Ну, в Figma каждый слой во вложенном компоненте может быть изменен. Каждый слой внутри вложенного компонента внутри другого компонента может быть изменен. И так далее.

Цвета.

Шрифты.

Тени.

Эффекты.

Все это можно корректировать и при этом не испортить оригинал. (Ну, кроме вращения, координат x y, высоты и ширины, но это имеет смысл.)

Я пытался проделать это в Sketch. Я правда пытался.

Отличные советы от ребят из UX Power Tools. Они рекомендуют использовать символы как маски, цвета которых являются символами, добавляя смайлы к слоям символов и корректируя их… Все это хорошие обходные решения. Но нам не нужно столько хлопот, чтобы сделать такую простую вещь, как заголовок.

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

Sketch
Посмотрите на панель справа. Жуть.

Проблема этого метода в панели Overrides. Как только вы много раз сделаете вложение, вы теряете способность контролировать порядок и имя слоев внутри вложенных символов. В результате все начинает выглядеть одинаково, и вы получаете, скажем, 40 переопределений на выбор, в основном из состояний, которые не имеют никакого отношения к вашему символу. Это настоящая боль, и очень сложно попытаться это исправить, настроить или обновить. Возможно, я просто делал это неправильно, но мне еще предстоит найти лучшее решение.

Как это работает в Figma? Вот как я настроил тоже самое:

Почему вы должны перейти из Sketch на Figma
Процесс вложения снизу-вверх, слева направо.

Мой стиль body по умолчанию черный, но мой цвет Action зеленый. Вместо того, чтобы иметь компоненты Body / Main and Body / Action, я просто создал один компонент, а затем переопределил цвет в Left action. Если бы я каждый раз менял стиль body, то эти компоненты бы адаптировались, но все равно сохраняли бы свои выравнивание и цвет.

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

ЭТО ЧУДО.

Попробуйте и вы увидите, что я имею ввиду.

Причина #3: Командная библиотека

Это значимо не только для команд. Это может дать нам доступ к стилям и структурам по умолчанию, надлежащим образом. Если бы Google и Apple должны были создавать свои собственные библиотеки компонентов и делиться ими со всем миром, мы бы все говорили на одном дизайн-языке впервые со времен iPhone.

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

Почему вы должны перейти из Sketch на Figma
Просто представьте.

В качестве примера, давайте поговорим о скромной ячейке таблицы.

Она используется повсюду, почти в каждом приложении, в каждой OS. Она имеет тысячи комбинаций и ограничений, и нюансов. В iOS верхняя строка имеет немного иной вид, чем средняя или нижняя строка.

Почему вы должны перейти из Sketch на Figma - ограничения
Эти глупые тонкие линии…

Как вы решите это?

Вы делаете каждую строку таблицы прозрачной с прямоугольником позади них? Удачи с получением нижней строки без 2 перекрывающихся строк и без нескольких перекрывающихся слоев. О, вы хотите добавить еще одну строку? Ха!

Вы добавляете эти тонкие линии используя 1px тень без размытия? Да, верно, в левой части поля строки таблицы изменяется позиция в зависимости от реализации. Кроме того, эти искажения на краях без тени заметны … не так ли?

У вас есть прямоугольник для тонкой линии? Удачи с выравниванием элемента высотой .5px в сетке, при изменении размера. О, погодите, вы проектируете в 2x? Это что 2014 год?

Вы используете линию? Пожалуйста, скажите мне, что вы не используете линии.

Может быть есть решение. Я его не нашел. Пока не начал пользоваться Figma.

Почему вы должны перейти из Sketch на Figma - выравнивание объектов

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

Но это не самая крутая часть. После того, как я сделал компонент, я добавил его в командную библиотеку и, если я когда-либо обновлю этот корневой компонент, его изменения будут происходить в КАЖДОМ СУЩЕСТВУЮЩЕМ ЭКЗЕМПЛЯРЕ.

Но подождите!

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

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

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

У меня есть проект, содержащий все мои глобальные элементы. У меня есть одна библиотека для иконок. ДА ВСЕ ИКОНКИ ИЗ ОДНОГО МЕСТА. У меня есть одна для шрифтов, одна для iOS, одна для Android.

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

Я думал, что Invision Craft сделает это. НЕПРАВИЛЬНО. Я купил icon jar.  Да … нет. Отлично подходит для тегирования и поиска, но не особо для обновления и использования.

Это работает, и это хорошо работает. Впервые за 2 года я могу знать, что все мои иконки, все мои шрифты и все мои элементы управления ОС унифицированы и удобны в использовании. Больше нет дубликатов, больше нет беспорядка.

Проверьте, насколько легко (и организованно) сделать эту страницу настроек:

Если это не заставит вас прокачаться… ну тогда я полагаю, что эта статья не для вас.

Причина #4: Поддержка и обновления

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

Но вот что. За последние 2 года я не могу вспомнить хотя бы неделю, чтобы я не столкнулся с багом в Sketch. Я привык к техническим заминкам и проблемам, большинство из которых незначительны.

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

Уважуха, Figma.

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

Теперь я уверен, что Figma выигрывает от того, что имеет меньшую пользовательскую базу и имеет возможность делать большие изменения быстрее. Но само собой разумеется, что наличие инструмента, который ВСЕГДА обновляется, намного лучше, чем видеть при входе в систему уведомление “доступно обновление”. Дни работы в Sketch всегда были одновременно захватывающими, ужасающими и разочаровывающими.

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

Ужасающими, потому что вы знаете, вы просто ЗНАЕТЕ, что что-то сломается, и вы, скорее всего, не узнаете, когда или почему, а иногда даже замечаете, пока не стало слишком поздно.

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

Кроме того, могу ли я просто сказать спасибо за то, что здесь есть Intercom? Наличие этого инструмента поддержки внутри приложения просто убойная вещь. Нет необходимости искать правильный e-mail или правильный веб-сайт, и это то, что вы не можете сделать внутри настольного приложения.

Причина #5: История версий

Давайте будем честными. Это не контроль версий.

Почему вы должны перейти из Sketch на Figma - история версий

Если вы поверили в эту систему… то вы обожжётесь. Раньше я доверял ей. Больше нет.

ВОТ ЭТО контроль версий:

Почему вы должны перейти из Sketch на Figma - контроль версий

Я могу видеть, когда было сделано редактирование. Я вижу, кто его сделал. Я могу вернуться к этому. Я могу копировать файл с определенного момента времени. Мне не нужен Invision, мне не нужен Dropbox, это встроено.

Нет нужды говорить что-то еще.

Но…

Sketch все еще лучше в некоторых вещах. Пока что.

Он лучше в интеграции, передаче разработчикам, прототипировании, сторонних инструментах, расширениях, шаблонах и ресурсах. И все это может храниться локально. Но ничего из этого сейчас не работает для меня.

  • Для прототипов я уже начал с нуля осваивать Principle, потому что импорт Sketch не работает с редактированием символов, и их структура отличается.
  • В настоящее время передача проекта разработчикам –моя самая большая проблема, так как я беспокоюсь о том, что передаю управление людям, которые не знакомы с инструментом. Комментарии недостаточно надежны для документации, и Zeplin действительно прост в использовании. При этом Zeplin не связывает ограничения, гибкие макеты, состояния объектов, разные размеры экрана и показывает только один экран за раз. Кроме того, я читал о других командах, дающих своим разработчикам просмотр в режиме только для чтения, но из-за этого они не могут видеть цвета, ограничения или другую информацию, только поля … Что мне здесь не хватает? На самом деле это еще не очень практично.
  • Я не использую все эти многочисленные интеграции в Sketch, но я знаю, что многие так делают. Craft всегда выглядел хорошо, но я правда не могу представить как вы все его используете. Также, я не проектирую для Интернета в Sketch, поэтому мне не нужны инструменты с faux-flexbox. Я проектирую для интернета в Webflow, потому что это потрясающий инструмент. А еще, у него есть настоящий flexbox.
  • На данный момент у Figma нет сторонних расширений. А у Sketch, на мой взгляд, их слишком много. Так что есть свои плюсы и минусы. Большинство из расширений Sketch давно не обновлялись, большинство из них не совместимы друг с другом, и ради Бога, ВЫ МОЖЕТЕ ПЕРЕСТАТЬ ИСПОЛЬЗОВАТЬ ОДНИ И ТЕ ЖЕ СОЧЕТАНИЯ КЛАВИШ??? Ох! Нет, правда, Sketch, придумайте способ легко изменить эти проклятые сочетания клавиш или посмотрите, когда 2 расширения конфликтуют друг с другом. Тьфу.
  • Шаблоны… Я действительно ненавижу шаблоны. Если ваша задача состоит в разработке набора пользовательского интерфейса, набор пользовательского интерфейса может сделать больше проблем, чем стоит. Каждый раз, когда я хотел использовать хороший уже начатый проект, мне приходилось сломать все стили, цвета, символы, вообще все, чтобы я мог вставить эту хрень в свой документ. Чтобы использовать шаблон, я трачу половину времени, если бы я создавал его с нуля.
  • Локальное хранилище – это проблема для некоторых серьезно относящихся к безопасности организаций. Я знаю, что некоторые из вас не могут использовать внешние инструменты, потому что ваши проекты находятся под строгим нераскрытием, или вы хотите полностью держать все под своим контролем. Это то, с чем мне не приходится иметь дело, но, если вы это сделаете, я получу его. Простите дизайнеры Google и Apple.

Выводы

Есть больше функциональных особенностей, о которых я мог бы упомянуть. Некоторые из них будут больше перекликаться с другими.

  • Вы можете использовать ее на Windows
  • Ее векторная сеть довольно классная
  • Вы можете использовать один и тот же файл одновременно с кем-то еще
  • Любой клик можно отменить (ВЫ МОЖЕТЕ ОТМЕНЯТЬ, ЕСЛИ ЧТО-ТО СЛУЧАЙНО НАЖАЛИ)
  • Текст можно выравнивать по верху, по низу и по центру.
  • У ТЕКСТА ЕСТЬ ОГРАНИЧИВАЮЩАЯ РАМКА.
  • Вы можете оставлять комментарии (У этого есть много потенциала, но это еще не убийственная функция)
  • Вы можете рисовать фигуры поверх, но не внутри артборда
  • Артбордам не нужно закреплять дочерние элементы
  • Сетки слоев. Sketch нечем крыть. Компоненты могут иметь собственные сетки!?!? ЧТО????
Почему вы должны перейти из Sketch на Figma - сетки для компонентов
Только взгляните на это. Это не прямоугольники, это СЕТКИ.
  • Режим контура (Outlines mode). Как в Illustrator, только лучше. ЗАМЕЧАТЕЛЬНО.
Почему вы должны перейти из Sketch на Figma - режим контура
Я сумасшедший, если мне это нравится?
  • Привязка слоя работает с ограничивающими рамками

Знаю, есть еще много всего, но это только то, что пришло мне на ум. И со временем список будет продолжать увеличиваться.

Figma не идеальна. Она не окончательное решение. Она еще не все, что мне хотелось бы, чтобы имел инструмент разработки продукта. Но она лучше, НАМНОГО лучше, чем я думаю, мы осознаем. Несколько месяцев назад я бы осудил другого дизайнера за использование другого инструмента, кроме Sketch. Теперь я сужу их за то, что они застряли со Sketch.

Я бы хотел узнать, что вы думаете. Вы уже попробовали Figma? У вас были какие-либо проблемы с разработчиками, с инструментом или производительностью? Давайте обсудим это в комментариях. Также, я извиняюсь за гифки со Спанч Бобом… Мне нет прощения. Мне стыдно.

Я UX дизайнер живущий недалеко от Атланты. Зацените мои работы на моем сайте. Время от времени я пишу твиты, но большую часть своего времени я провожу с женой. Она lifestyle-блогер и удивительная женщина. А еще, Хондо – наш бернский зеннехунд тоже очень клевый.

 

Битва графических редакторов, Figma против Sketch