Легкий способ бросить 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 — Лучший. Редактор. Кривых.
Чем меня однажды «купил» 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-а, поэтому его стоит воспринимать просто как “прокачанную” группу, а не отдельный экран. К этому нужно привыкнуть.
Благодаря тому, что уровень вложенности Frame-ов не ограничичен, можно делать замороченные сетки, которые масштабируются по самым хитрым условиям.
Layout Grid. Настройки сетки всегда перед глазами, в отличие от Sketch, где нужно лезть в меню, вызывать модалку и пока ты настраиваешь колонки, макет недоступен для редактирования. Кстати, фреймы «липнут» к краям колонок и масштабируются вместе с ними, соблюдая сетку и отступы.
Подробно о grid layout, constraints и прочем оккультизме читай вот тут.
Компонетны
Они же — Symbols в Sketch, но не совсем они. Есть пара весомых отличий:
Родитель. Создавая новый компонент, он не выносится на отдельный артборд, как это сделано в Sketch, а сосуществует с потомками в одном пространстве.
Детишки. Как говорят сами создали Figma, копируя родителя, ты создаешь не его копию, а экземпляр («instance»).
Меняя параметры родителя, эти же параметры меняются во всех его потомках — тут все как обычно. Но если ты решил поменять стиль потомка, это становится его уникальным независимым свойством:
В отличие от Sketch, где редактирование текста и изображений в символе происходит в отдельной форме, в Figma это можно делать, будто ты правишь обычную группу объектов. Мне кажется, такая механика по-очевиднее.
Google Fonts
- Кто-то открыл твой Sketch-макет и увидел ошибку о недостающих шрифтах
- Несмотря на предупреждение, этот кто-то открывает файл
- Все шрифты слетают на дефолтные. Срабатывает автосохранение
- Ты тратишь время, переназначая гарнитуры к каждому текстовому объекту.
- Ты чувствуешь, твоя любовь к человечеству угасает
В 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 ищут ведущего продуктового дизайнера. Идите туда, там классно.
