Инструмент: 10 причин отказаться от Sketch и перейти на Figma30.05.2017 16:07

Продуктовый дизайнер чат-бота Statsbot Владислав Пономаренко о преимуществах нового графического редактора.

В избранное

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

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

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

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

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

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

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

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

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

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

Чем так хорош Figma

Доступность

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

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

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

Организация файлов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В Figma лучший редактор кривых.

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

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

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

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

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

Сетка, layout и «резина»

Принципы изменения размеров можно задавать отдельно для ширины и высоты группы, чего раньше не хватало. В Sketch есть выпадающий список: Stretch → Pin to Corner → Resize object → Float in space. Мне трудно сразу определить, что выбрать, чтобы инструмент (Resize) работал так, как мне нужно.

В Figma это работает и выглядит интуитивнее. Привязка «потомка» к стороне или размеру «родителя» происходит в один клик. Зависимости для объекта или группы можно задавать только от размера Frame, а не родительской группы.

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

Четырёхколоночная сетка с фиксированными отступами

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

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

Компоненты

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

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

При изменении параметров «родителя» они меняются во всех его потомках — тут всё как обычно. Но если вы решили поменять стиль потомка, все изменения становятся его уникальными независимыми свойствами.

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

Google Fonts

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

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

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

Интерфейс как в Sketch

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

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

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

Добавили в конце декабря. Подробнее можно прочитать здесь.

Импорт из Sketch

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

Экспорт SVG

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

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

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

Программа бесплатная

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

И несколько минусов

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

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

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

И это раздражает.

Мало ресурсов и небольшое сообщество

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

Нет плагинов

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

Выводы

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

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

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

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