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

Я работаю со Sketch последние 4 года, и я был его большим поклонником. Потому что Sketch был настоящим спасением в те времена, когда мы использовали фотошоп. Вы наверняка помните, как это было больно.

Моя компания недавно переключилась на Figma, так что у меня был шанс работать с Figma и открыть для себя этот удивительный инструмент.

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

Я рассмотрю 2 инструмента проектирования по следующим критериям:

• Функционал
• Дизайн системы - Символы vs Компоненты
• Работа с дизайнерами
• Работа с разработчиками
• Прототипирование
• Экспорт файлов
• Работа без интернета
• Плагины

Функционал

Оба инструмента имеют почти одинаковые функции, одинаковые горячие клавиши и одинаковую структуру. Если вы знаете, как использовать одну программу, то по умолчанию вы знаете как использовать другую.

• Figma поддерживает открытие файлов Sketch
• Figma работает в любой операционной системе (Windows, MacOS...), потому что основана на веб-сайте.
• Sketch - это нативное приложение для MacOS, поэтому оно работает только на Mac.
• Sketch и Figma почти одинаковы по производительности.
• Figma долго загружает проект, в то время как Sketch файл открывается за 1 секунду.

Дизайн системы - Символы vs Компоненты

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

Стили для Sketch тексты/слои вовсе не атомарные, когда я хочу построить текстовый стиль, я должен определить все варианты стилей, которые превращаются в длинный список текстовых стилей.

Позвольте мне объяснить, как работают стили Sketch: когда вы определяете любой текст или стиль слоя, Sketch сохраняет все свойства в этом стиле, и если вы делаете изменение в любом свойстве, то вы переопределяете текстовый стиль. Например, если вы хотите иметь разное выравнивание для текста или разные цвета, с Sketch вам нужно сделать стиль текста/слоя для каждого случая.

Давайте перейдём к Figma и я объясню, как это реализовано в ней:

Скриншот панели настроек в Figma

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

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

Компоненты Figma немного отличаются, можно изменять пересозданием, но можно изменять и слои компонентов, и свойства слоев.

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

Работа с дизайнерами

Работа между дизайнерами очень важна, поэтому нужно выбрать правильный инструмент для вас. Figma взяли подход Google Doc или Time Viewer. Это позволяет всем дизайнерам работать над одним и тем же файлом в то же время. Вы видите много курсоров, которые перемещаются в проекте, и вы можете смотреть что делают другие дизайнеры.

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

Скриншот с сайта Figma

Давайте посмотрим, как это реализовано в Sketch, я считаю, что Sketch гораздо лучше в этом аспекте, потому что в Sketch есть плагин под названием abstract. Он позволяет дизайнерам иметь разветвленную систему как Github для разработчиков, и каждый дизайнер делает проекты в ответвлениях, а затем сливает эту ветку и разрешает конфликты, если таковые есть. Лично я предпочитаю такой способ работы, но некоторые дизайнеры считают его слишком сложным.

Работа с разработчиками

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

В Sketch есть Sketch Cloud, чтобы поделиться своими экранами, но я считаю, что оно все еще сырое, но вы можете использовать сторонние плагины, чтобы сделать процесс передачи макетов более гладким, как (Abstract, Zelpin, invision ... ). Со всем этим плагинами вы делитесь только теми экранами, которые имеют отношение к билетам, поэтому загружать их намного быстрее.

Прототипирование

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

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

Но хорошо то, что есть много плагинов для создания анимации и красивых прототипов с помощью Sketch и Figma типа (Flinto, Protopie, Principle...).

Экспорт файлов

Оба они похожи в экспорте файлов, и существует множество плагинов, которые работают с обоими, например, плагины Zeplin и Simpli, которые делают экспорт ещё более лёгким.

Но что мне действительно не хватает в Figma, так это скопировать любой артборд или элемент и вставить его за пределы Figma (например, в slack или jira), но в Sketch это работает. Раньше я постоянно так делал, чтобы у меня на рабочем столе не было мусора. Надеюсь, что Фигма вскоре добавит это.

Работа без интернета

Оба инструмента работают без интернета, но Figma не загружает компоненты и очень лагает, когда работает в оффлайне. Но Sketch работает в автономном режиме отлично.

Плагины

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

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

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

Автор статьи
Оригинальная статья
Перевод: Lawyer (WebOctopus)