Статті
Figma vs. Sketch
Плюсы и минусы для визуального дизайна
25 липень, 2018
avatar
Яр Бірзул
Chief Platform Officer в TemplateMonster
Мы любим тексты без ошибок. Если вы все же их обнаружили, выделите фрагмент и нажмите Ctrl+Enter.

Яр Бирзул, куратор курса UX Architecture в Projector, Chief Platform Officer в TemplateMonster и недавний герой рубрики «Полезные ископаемые», ведет свой Telegram-канал Продуктовая Лиса, где пишет о продуктовой разработке. Делимся публикацией Яра о плюсах и минусах инструмента Figma и о тонкостях перехода от Sketch к Figma.

Источник фото: blog.figma.com

В начале 2014 дизайн-команда TemplateMonster перешла с Photoshop на Sketch. В конце 2016 пришёл черёд Figma. В обоих случаях через 2-4 недели перестройки получали ускорение – в первый раз на 40%, при переходе на Figma до 65% (команда та же, задачи типовые, оценка ретроспективная за полтора года).

И вот что ускорило продуктовую команду:

1. Не беспокоимся о передаче файлов между дизайнерами и разработчиками.

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

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

2. Не нужны компьютеры Mac всем участникам.

В отличие от дизайнеров, которые в большинстве к Mac относятся хорошо, разработчики от них часто не в восторге. Использование Sketch заставляло нас выбирать – покупать Mac и переучивать людей (что дорого и неприятно) или использовать продукты-посредники, вроде Zeplin или Avocode, которые позволяли открывать и исследовать sketch-файлы в специальном софте, доступном на Windows и Linux. Эти посредники иногда глючат и требуют доплаты.

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

3. Одновременная работа членов команды над одним макетом.

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

Источник фото: blog.statsbot.co

Почему ещё мы используем Figma для визуального дизайна?

4. Макеты не тормозят.

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

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

5. Общение и фидбек внутри макета.

До Figma приходилось выбирать – используй Invision (или аналог) для обсуждения макетов или теряй обратную связь в чатах, бумагах и магнитных досках. Сейчас каждый, с доступом к макету, стартует диалог в Figma, оставив вопрос или предложение как к конкретному элементу, так и макету в целом.

6. Компоненты и командная библиотека.

Один из способов ускорить создание продукта – унификация и стандартизация.

Это приводит к логичному решению внедрить систему компонентов: атомарную, на БЭМе или ещё какую. Figma это поощряет на этапе дизайна инструментами Components, Сonstraints, Library и Team Library. Появились эти штуки несколько месяцев как и каждый раз ускоряли нашу работу. В Sketch есть нечто подобное, однако лишь с помощью внешних инструментов, либо не такие мощные.

7. История изменений в реальном времени и резервные копии.

Выше упоминал, что использование Sketch+Dropbox порой приводило к удивительным и невесёлым проблемам – файлы терялись, создавались копии, оригиналы удалялись и так далее. Figma сохраняет процесс работы сразу в процессе, после каждого изменения. Все итерации макета доступны в истории, сравниваем с текущей версией и восстанавливаем её, если нужно.

8. Не требуется раз в год платить круглую сумму за каждую лицензию.

Когда Sketch перешёл на новую модель оплаты (полуподписка, когда платишь за обновление софта на протяжении года), это сильно подкосило его в наших глазах.

Figma работает по честной подписке. Платишь за тех, кто может редактировать макеты, за других членов команды не платишь. Когда кто-то в отпуске – не платишь. При появлении нового дизайнера не нужно сразу выкладывать круглую сумму, хватает $15 ежемесячно. В наличии бесплатный аккаунт, до двух дизайнеров и трёх проектов, без ограничений во времени и функционале. Прозрачно и гибко, как мы любим.

Переездом довольны. Перейти со Скетча было довольно просто – в десятки раз легче, чем после Photoshop на Sketch. Нам нравится, куда и как быстро Figma развивается, держат нос по ветру. Само собой, Figma далека от идеала, однако для нас сегодня она – оптимальный инструмент, о котором знаем. Это, конечно, не исключает, что через год буду говорить о другом клёвом инструменте, вроде Framer X.

Источник фото: envato.com

Минусы, конечно, есть. Почему Figma будет вас расстраивать?

К сожалению, идеальных инструментов не существует, Figma не исключение.

Веб технически ограничен и менее стабилен, HTML+CSS+JS постоянно развивается и меняется. А поскольку Figma – веб-приложение, это приводит к странным артефактам и периодическим проблемам. Кто-то может вспомнить, что доступны приложения для Mac и Windows, однако это лишь красивая оболочка браузера, внутри всё-равно веб.

Вот с какими недостатками мы столкнулись, перейдя со Sketch на Figma:

1. Для работы необходим интернет.

Поскольку Figma это веб-приложение в браузере, без интернета она не работает, ведь виртуальные файлы хранятся в облаке, и туда же постоянно сохраняются.

2. Работа с текстом порой вызывает проблемы.

При ресайзе текстовой области возникают странные эффекты – текст внезапно перестаёт «вмещаться», границы области ведут себя непредсказуемо. Лечится сбрасыванием настроек фиксации (по высоте, ширине или смешанный).

3. Импортированные файлы тормозят и разваливаются.

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

4. Инспектор для просмотра свойств подводит.

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

5. Ломает вектор при импорте-экспорте.

Регулярно встречаем ситуации, когда обычная SVG импортируется в Figma некорректно. Однако чаще встречаем обратную ситуацию – SVG файлы с пиктограммами иногда в браузере «ломаются», приходится переделывать их в Иллюстраторе.

Источник фото: blog.figma.com

Почему ещё Figma будет вас расстраивать?

6. Странные артефакты с растровой графикой.

Если долго держать открытыми много макетов, это может привести к утечке оперативной памяти (это же веб-приложение и браузер для него, не забываем), что в свою очередь может привести к исчезновению изображений, шрифтов или чего-либо ещё. Лечится закрытием и повторным открытием макета.

7. Недостаточная иерархия файлов.

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

8. Не очень развитое сообщество.

В случае проблем гуглить сложнее, чем в случае со Sketch. Списываем это на молодость инструмента.

9. Нет плагинов.

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

10. Нам не хватает нескольких классных штук.

10.1. Прототипирования, ведь Invision-like перелинковки макетов для тестирования продуктовых гипотез недостаточно.

10.2. Работы с анимацией – подозреваем, дело в ограничениях веба.

10.3. Клиента под линукс. В нашей команде большинство пользуется именно линуксом, особенно тестировщики. И хоть клиент – браузер, он всё-таки правильно подобран и оптимизирован именно под работу с веб-приложением Figma.

11. Система подписки.

Малая стоимость в месяц компенсируется необходимостью регулярно платить. Не всем нравится такой подход, хотя нас не отпугивает.

12. Сложно перестроится после продуктов Adobe.

В отличие от Sketch, который создатели Figma взяли за основу и отправную точку, Photoshop, Illustrator имеет другой интерфейс, ведёт себя иначе и отличается даже базовыми шорткатами. Впрочем, подобная проблема возникает и при переезде на Sketch.

Сложности выше встречаются редко и потому инструмент не портят. Если бы мы знали о существовании этих проблем до переезда, всё-равно перешли бы.

Ранее в Telegraf.Live продуктовый дизайнер Дмитрий Петренко делился впечатлениями от сравнения Sketch и InVision Studio.

avatar
Яр Бірзул
Chief Platform Officer в TemplateMonster
Колонка

У нас є ще дещо для вас

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: