Легкий способ бросить Sketch и начать работать в Figma

За последние 3 месяца Figma полностью выместила Sketch и Zeplin из рабочего процесса команды Statsbot.

Расскажу, чем Figma так хороша и почему история с массовой миграцией дизайнеров с Photoshop скоро повторится. Только в этот раз в роли покинутого отеческого дома выступит не Adobe, а Bohemian Coding.


Просветление

Я очень люблю Sketch. В 2014 году мастер-класс Дмитрия Новикова из MacPaw познакомил меня с его чудесами и с тех пор 90% моих процессов, от рисования иконок и презентаций до вытачивания детальных макетов веб- и мобильных интерфейсов, плавно перекочевали в Sketch. Авторитет Adobe дал трещину и начал осыпаться, пока его законные территории медленно, но верно отжимались по праву сильнейшего.

Релиз Zeplin подключил новую массу восторженных голосов: стоило показать фронтенд-разработчику насколько улучшится его жизнь без лазаний в макеты и фраз «Вась, скока блюр у твоих хипстерских теней делать?», «Нарежь иконки, да под ретину не », и они пускали скупую мужскую(иногда женскую) слезу.

Умение работать в связке Zeplin+Sketch стало стандартным требованием к дизайнеру интерфейсов.

За последующие пару лет рынок UI-тулзов расправил плечи и начал предлагать один продукт за другим. Даже Adobe засуетились и выдали довольно сырой Adobe XD (Comet в девичестве), но уже на момент релиза он сильно отставал от существующих решений, и восторги с фанатской трибуны Adobe в духе «Ну сейчас-то мы вам покажем» поутихли.

UPD: Со свежей версией Adobe XD почти не знаком, но ее, вроде, хвалят.

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

И тут я познакомился с Ней.

Figma объединила в себя все лучшее, что происходило в миром инструментов UI-дизайна за последние несколько лет.

Figma — это лучшие качества Sketch, Zeplin и InVision в одном крутом продукте.

Доступность

Figma работает в браузере и доступна на любой платформе (если ты уже работал в конструкторах страниц типа Webflow или Tilda, проблем с адаптацией не будет).

Никаких дистрибутивов и приложений — нужно только зайти на figma.com, залогиниться и работать.

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

Организация файлов. Все рабочие файлы хранятся в облаке и организованы простым деревом «команда/проект /файл», поэтому больше никаких конфликтов копий, «Залей в Дропбокс », «Не подсосалось», «Макеты в папке Company/Design/Web/New/3.0/Актуальное/Новая папка(5)». В папку Drafts автоматически сваливаются любые новые файлы, несохраненные в явном виде.

Командная работа

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

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

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

Работа с макетами для фронтенда

Ты впускаешь разработчиков в свой sketch-файл, а они там что-то меняют. «Не классно!», подумала тройка ребят из Турции и выпустила Zeplin, где фронтенд мог тыкать на все, что видит, не боясь внесения изменений.

Осталось только постоянно заливать свежие версии макетов, проставлять теги и отвечать на комментарии.

…И все это я это успешно забывал делать, за что получал лучи ненависти .

Спасением для меня стала Figma, в которой весь Zeplin заменила индивидуальная настройка прав: приглашаешь разработчика в проект, назначаешь ему «read-only» и отпускаешь в свободное плавание: он радостно копошится в макетах, смотрит цвета, размеры, отступы, отковыривает ассеты и предается прочим утехам.

Альпийская свежесть версий обеспечивается неощутимым процессом синхронизации — все макеты в руках фронтенда находятся в той стадии, в какой ты их последний раз оставил, закрыв ноутбук.

Комментарии

Для обсуждения макетов не приходится никуда «отбегать», весь фидбек собирается на месте и здесь же обсуждается.

Контроль версий

Выгрузка в Dropbox всегда была неидеальна и часто порождала проблемы с конфликтом копий и путаницу с поиском актуальных версий. Для Sketch постоянно появляются варианты git для дизайнеров, например —Abstract.

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

UPD: Ха! “Git для дизайнеров появится в Sketch”. Догоняют ребятки.

Редактор кривых

В Figma — Лучший. Редактор. Кривых.

Make Pen Tool great again!

Чем меня однажды «купил» Sketch, так это приятной работой с кривыми. После Фотошопа с его топорным Pen Tool-ом, рисовать векторные иконки в Sketch было исключительным удовольствием.

Но и тут Figma удивляет.

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

  • Точки можно бесконечно соединять с другими, что дает возможность делать сложные шейпы;
  • Удаление точки на кривой кривой не приводит к разрыву шейпа и исчезновению заливки, а соседние точки скомпенсируют прежнюю форму (как минимум, очень постараются);
  • Можно менять заливку отдельных частей шейпа, образованных пересечениями кривых;
  • Линии. Можно. Двигать!
  • Точки — тоже, и их положение повлияет на соседние.
Вы посмотрите на этот шикардос!

Описание всех чудес «Vector Networks» можно почитать в посте Figma CTO Эвана Уоллеса вот тут. Удивительно, сколько вдумчивой работы было проделано при создании этого инструмента.

Сетка, лейаут и “резина”

Принципы изменения размеров (Sizing в Sketch) можно задавать отдельно для ширины и высоты группы, чего раньше не хватало.

В Sketch есть выпадающий список: Stretch / Pin to Corner / Resize object / Float in space. Мне трудно сразу определить что выбрать, чтобы ресайз работал так как мне нужно.

В Figma это работает и выглядит интуитивнее.

Привязка потомка к стороне или размеру родителя (место для шутки про «мамку автора») происходит в один клик.

Важное: Зависимости для объекта/группы можно задавать только от размера Frame-а, а не родительской группы.

Frame — не то же самое, что и Artboard в Sketch. Frame можно создать внутри другого Frame-а, поэтому его стоит воспринимать просто как “прокачанную” группу, а не отдельный экран. К этому нужно привыкнуть.

4-колоночная сетка с фиксированными отступами

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

Layout Grid. Настройки сетки всегда перед глазами, в отличие от Sketch, где нужно лезть в меню, вызывать модалку и пока ты настраиваешь колонки, макет недоступен для редактирования. Кстати, фреймы «липнут» к краям колонок и масштабируются вместе с ними, соблюдая сетку и отступы.

Подробно о grid layout, constraints и прочем оккультизме читай вот тут.


Компонетны

Они же — Symbols в Sketch, но не совсем они. Есть пара весомых отличий:

Родитель. Создавая новый компонент, он не выносится на отдельный артборд, как это сделано в Sketch, а сосуществует с потомками в одном пространстве.

Детишки. Как говорят сами создали Figma, копируя родителя, ты создаешь не его копию, а экземпляр («instance»).

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

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

Google Fonts

  1. Кто-то открыл твой Sketch-макет и увидел ошибку о недостающих шрифтах
  2. Несмотря на предупреждение, этот кто-то открывает файл
  3. Все шрифты слетают на дефолтные. Срабатывает автосохранение
  4. Ты тратишь время, переназначая гарнитуры к каждому текстовому объекту.
  5. Ты чувствуешь, твоя любовь к человечеству угасает

В Figma шрифты тянутся из Google Fonts, а те, которые используются с локально, подкачиваются в проект. И это прекрасно.


Что еще классного есть в Figma

Sketch-like интерфейс

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

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

Интеграция с Framer

Добавили в конце декабря. Вот тут почитать подробно.

Импорт из Sketch

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

Годный экспорт SVG

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

Оперативная поддержка

Лайв-чат со средним временем ответа 2–3 часа. Ребята очень внимательные и даже пишут скринкасты, когда хотят что-то объяснить. Приятно.

Она бесплатная

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

Зависимость от интернета

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

Нет округления полу-пикселей

И это подбешивает.

Мало ресурсов и небольшое комьюнити

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

Нет плагинов

Чувствуешь нехватку Craft и плагинов для выгрузки экранов в Marvel или InVision. Когда это появится в Figma — всего лишь вопрос времени.


Выводы

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

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

Фронтенд-девелоперы перестали сталкиваться с неактуальными версиями макетов, а я — испытывать фантомные дежавю, когда заканчивал работу над экраном и не нужно было настраивать экспорт и выгружать экраны в Zeplin.

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

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

Спасибо за внимание! Это моя дебютная статья на Medium, поэтому советы, рекомендации, и лучи ненависти с радостью приму на vlad.p@statsbot.co

Владислав Пономаренко, продуктовый дизайнер Statsbot: drbbbl, fcbk.


p.s.: Кстати, ребзя из Skyeng ищут ведущего продуктового дизайнера. Идите туда, там классно.