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

Vlad Ponomarenko
Apr 11, 2017 · 9 min read

За последние 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 ищут ведущего продуктового дизайнера. Идите туда, там классно.

Thanks to Luba Belokon, Denis Semenenko, Vlad Synkov, and Timur Minulin

Vlad Ponomarenko

Written by

Product Designer @ Avito

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade