Чому Figma замінила Sketch в дизайн-команді TemplateMonster?

Яр Бірзул, Chief Platform Officer в TemplateMonster написав статтю, як вони всією командою зі Sketch перейшли на Figma. Рекомендую також підписатися на його телеграм-канал — Продуктовая Лиса, там багато корисних статей і порад для продуктивної роботи. 

Чому використовуємо Фігму для візуального дизайну?

У нашому випадку Фігма краще за інших інструментів прискорює дизайнерів і розробників.

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

І ось що прискорило продуктову команду:

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

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

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

2. Не потрібні маки всім учасникам.

На відміну від дизайнерів, які в більшості до маків ставляться добре, розробники від них часто не в захваті.

Використання Sketch змушувало нас вибирати – купувати маки і перенавчати людей (що дорого і неприємно) або використовувати продукти-посередники, на кшталт Zeplin або Avocode, які дозволяли відкривати і досліджувати .sketch-файли у спеціальному софті, доступному на Windows і Linux. Ці посередники іноді глючать і вимагають доплати.

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

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

Поки дизайнер доробляє макет, розробник вже аналізує і бачить зміни, які вносяться, в реальному часі.

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

Все це неможливо уявити собі з іншим графічним редактором. І саме це – наш ключ до прискорення роботи.

4. Макети не гальмують.

Зі Скетчем такі проблеми виникали. Часом накочували чергове оновлення, після якого всі наші макети перетворювалися на гарбуз, з якого робота перетворювалася у слайд-шоу. Тому доводилося відокремлювати кожен брейкпоінт в окремі файли.

У Фігмі такого не спостерігаємо, оптимізована добре і навіть архіскладні макети з купою фреймів (артбордів) на екрані не гальмують.

На жаль, мова тільки про макети, створені відразу у Фігмі. Всі імпортовані файли зі скетчів гальмують безбожно.

5. Спілкування і фідбек всередині макета.

До Фігми доводилося вибирати – використовуй Invision (або аналог) для обговорення макетів, або втрачай зворотний зв’язок у чатах, паперах та магнітних дошках.

Зараз кожен, з доступом до макету, стартує діалог у Фігмі, залишивши питання або пропозицію як до конкретного елементу, так і макета в цілому.

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

Один із способів прискорити створення продукту – уніфікація і стандартизація.
Це призводить до логічного рішення впровадити систему компонентів: атомарну, на БЕМі або ще якусь.

Фігма це заохочує на етапі дизайну інструментами Components, Constrains, Library і Team Library. З’явилися ці штуки кілька місяців як, і кожен раз прискорювали нашу роботу. У скетчі є щось подібне, проте або за допомогою зовнішніх інструментів, або не такі потужні.

7. Історія змін в реальному часі і резервні копії.

Вище згадував, що використання Sketch + Dropbox іноді призводило до дивних і невеселих проблем – файли губилися, створювалися копії, оригінали видалялися і так далі.

Фігма зберігає процес роботи відразу, після кожної зміни. Всі ітерації макета доступні в історії, порівнюємо з поточною версією і відновлюємо її, якщо потрібно.

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

Коли Скетч перейшов на нову модель оплати (напівпідписка, коли платиш за оновлення софта протягом року) це сильно підкосило його в наших очах.

Фігма працює по чесній підписці. Платиш за тих, хто може редагувати макети, за інших членів команди не платиш. Коли хтось у відпустці – не платиш. При появі нового дизайнера не потрібно відразу викладати круглу суму, вистачає $15 щомісяця.

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

Прозоро і гнучко, як ми любимо.

* * *

Переїздом задоволені. Перейти зі скетч було досить просто – в десятки разів легше, ніж після Фотошопу на Скетч.

Нам подобається, куди і як швидко Фігма розвивається, тримають ніс за вітром. Само собою, Фігма далека від ідеалу, проте для нас сьогодні вона оптимальний інструмент, про який знаємо. Це, звичайно, не виключає, що через рік буду говорити про інший крутий інструмент, на кшталт Framer X.

Плюсів багато, а тепер про мінуси.

Чому Фігма буде вас засмучувати?

На жаль, ідеальних інструментів не існує, Фігма – не виняток.

Веб технічно обмежений і менш стабільний, HTML + CSS + JS постійно розвивається і змінюється. А оскільки Фігма – веб-додаток, це призводить до дивних артефактів і періодичних проблем. Хтось може згадати, що є доступні додатки для Mac і Windows, проте це лише красива оболонка браузера, всередині – все-одно веб.

Ось з якими недоліками ми зіткнулися, перейшовши зі Скетчу на Фігму:

1. Для роботи необхідний інтернет.

Оскільки Фігма це веб-додаток в браузері, без інтернету вона не працює, адже віртуальні файли зберігаються в хмарі, і там же постійно оновлюються.

2. Робота з текстом часом викликає проблеми.

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

3. Імпортовані файли гальмують і розвалюються.

Вирішивши спробувати Фігму вперше, ми імпортували в неї складний Sketch-файл. На жаль, його трохи зім’яло, особливо все, що пов’язано з растровими масками і текстовими областями. Довелося переробляти файл, щоб коректно перенести макет. Пізніше ми відмовилися від ідеї переїзду на новий інструмент саме тому.

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

4. Інспектор для перегляду властивостей підводить.

Зустрічали ситуації, коли не було видно тіней і спливали чудові артефакти з текстами. Довелося створити додаткового користувача з правами редагування і дати його логін-пароль розробникам і тестувальникам.

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

Регулярно зустрічаємо ситуації, коли звичайна SVG імпортується у Фігму некоректно. Однак частіше зустрічаємо зворотну ситуацію – SVG-файли з піктограмами іноді в браузері «ламаються», доводиться переробляти їх в Ілюстраторі.

6. Дивні артефакти з растрової графікою.

Якщо довго тримати відкритими багато макетів, це може привести до витоку оперативної пам’яті (це ж веб-додаток і браузер для нього, не забуваємо), що в свою чергу може призвести до зникнення зображень, шрифтів або чого-небудь ще. Лікується закриттям і повторним відкриттям макета.

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

На жаль, всередині однієї команди є лише розбиття на проекти. В одному проекті зберігається скільки завгодно файлів. Нам цього недостатньо, адже файлів багато – тож система папок і тегів була б доречною.

8. Не дуже розвинене співтовариство.

У разі проблем гуглити складніше, ніж у випадку зі Скетчем. Списуємо це на молодість інструменту.

9. Немає плагінів.

У скетчі нас часто виручали додаткові штуки зовнішніх плагінів, яких в надлишку існує для рутинних завдань, на зразок генерації контенту. Це з одного боку робить інструмент стабільним, однак обмежує.

10. Нам не вистачає декількох класних штук.

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

10.2. Роботи з анімацією – підозрюємо, справа в обмеженнях інтернету.

10.3. Клієнта під лінукс. В нашій команді більшість користується саме лінуксом, особливо тестувальники. І хоч клієнт – браузер, він все-таки правильно підібраний і оптимізований саме під роботу з веб-додатком Фігми.

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

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

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

На відміну від Скетчу, який творці Фігми взяли за основу і відправну точку, Фотошоп, Ілюстратор має інший інтерфейс, поводиться інакше і відрізняється навіть базовими шорткатами. Втім, подібна проблема виникає і при переїзді на Скетч.

Складнощі вище зустрічаються рідко і тому інструмент не псують. Якби ми знали про існування цих проблем до переїзду, все-одно перейшли б.