Инструмент: 10 причин отказаться от Sketch и перейти на Figma

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

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

За последние три месяца 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, зарегистрироваться и начать работать.

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

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

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

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

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

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

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

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

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

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

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

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

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

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

Комментарии

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

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

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

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

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

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

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

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

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

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

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

  • Точки можно бесконечно соединять с другими, что дает возможность делать сложные шейпы.
  • Удаление точки на кривой не приводит к разрыву шейпа и исчезновению заливки — соседние точки компенсируют прежнюю форму.
Инструмент: 10 причин отказаться от Sketch и перейти на Figma
  • Можно менять заливку отдельных частей шейпа, образованных пересечениями кривых.
  • Линии можно двигать.
  • Точки — тоже, и их положение повлияет на соседние.​
Инструмент: 10 причин отказаться от Sketch и перейти на Figma

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

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

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

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

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

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

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

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

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

Компоненты

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

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

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

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

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

Google Fonts

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

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

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

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

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

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

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

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

Импорт из Sketch

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

Экспорт SVG

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

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

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

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

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

Инструмент: 10 причин отказаться от Sketch и перейти на Figma

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

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

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

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

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

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

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

Нет плагинов

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

Выводы

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

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

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

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

Инструмент: 10 причин отказаться от Sketch и перейти на Figma
2626
45 комментариев

Фигма офигенная!

От себя могу добавить про библиолиотеку компонентов, которая шарится на весь проект. Изменил компонент -> запушил в библиотеку, а все остальные пользователи получат уведомление, если изменение затрагивает их макет.

Из минусов: не работает read-only режим для разработчиков. У нем пропадает вообще весь UI, нельзя посмотреть свойства элементов и расстояния. Только наслажаться видом)

6
Ответить

Вся путаница потому, что они не дают функции инспектора для гостя. Нужно создать аккаунт, тогда по ссылке can view можно видеть все параметры элементов и экспорт. Вот что они мне ответили, но догадаться про регистрацию пришлось самому:

When you need to send design files to your developers, sometimes you don't need them to have full (edit) permissions. View Only now provides several useful features for developer handoff:

— Click on elements to see their dimensions

— Select an element, hold the Option key, and hover your cursor over other elements to reveal redline distances

— Command + C reveals the color wheel for hex codes

Ответить

А как быть с вложенными символами?

Ответить

Не понимаю жуткого неприятия Figma некоторыми отписавшимися.
Инструмент в любом случае достоин рассмотрения и пробы, тем более для всех, работающих в скетч, труда не должно составить. Сам тоже посмотрю :) Все-таки UX/UI - то направление, когда надо быть открытыми ко всему новому.
Насчет HTML/CSS для дизайнера - думаю, каждый должен уметь верстать, пусть и без всяких SASS. JS - уже отдельная тема, хотя наслышан, что западные коллеги и в js умеют на каком-то уровне

4
Ответить

Безусловно достоин. Просто у всех свои тараканы.

Ответить

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

3
Ответить

Весь vc побежал в Фигму

3
Ответить