Лого vc.ru

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

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

Продуктовый дизайнер чат-бота 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 говорят об очень кропотливой работе разработчиков над продуктом и чутком прислушивании к сообществу, а это гарантирует приятное знакомство.

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru.

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

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

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

0

Вся путаница потому, что они не дают функции инспектора для гостя. Нужно создать аккаунт, тогда по ссылке 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

Не хватает примерно 80% горячих клавиш от sketcha

10 причин нарожать вагон редакторов с несовместимыми форматами, чтобы digital/mobile и офлайн дизайнеры выели мозги всем вокруг при попытках использовать макеты друг друга.

Облака сделали жизнь проще - теперь не надо придумывать новый несовместимый формат, достаточно разрешить экспорт только в конечные файлы типа SVG да PNG :)

0

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

Вот я и говорю - с облаками адок устраивать стало гораздо проще! С софтом можно хотя бы договориться по поводу единого формата - пусть он даже одинаково хреново поддерживается софтом обеих сторон.

А вот с облаками зачастую приходится каждой из двух сторон тупо регаться в сервисе, используемом партнером. В конечном итоге половина материалов оказывается в одном сервисе, половина - в другом... В общем, прелесть :)

А существует какой-то один универсальный, стандартизированный, обильно удобренный RFC формат для хранения всего этого добра?

0

Очень не хватает работы с Font Awesome. Не смог без этого работать в фигме. В скетче для этого использую Icon Font.

Font awesome в 2017? Если не секрет, зачем? В вебе сейчас везде юзаются только svg иконки (если конечно речь не идет о бутстрап-лендосах)

То есть ничего что font awesome имеется не только в виде шрифта, но и в svg формате, потому замечание бессмысленно.

0

Слишком громко сказано "везде"... Если вы гонитесь за трендами, которые ежеминутно меняются, то это не значит, что все остальные делают также.
Фонтовые иконки использовать достаточно удобно, чтобы вот так взять и позабыть про них.

0

Но это не отменяет того фонтовые шрифты должны умереть также, как умерло скругление углов картинками. SVG иконки на самом деле тоже очень удобно использовать. nicothin.pro/page/icon-fonts-2017

Фонтовые шрифты — это в которых леттерные буквы и айконовые иконки?

0

Все равно она вряд-ли теперь заменит связку Sketch + Invision Craft + Anima App + Launchpad

Все-таки при ежеденевном использовании скорость нативного приложения решает. Фигма в этом плане похуже работает. Я бы лучше смотрел в сторону Subform - subformapp.com/

Вот это интересное приложение будет. Хотя тоже вряд ли сможет перетянуть меня со скетч с его многообразием плагинов.

0

Опять этот толстый хипстер тут. Влад, ну сколько можно?

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

0

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

Figma экономит время, это самое главное.

0

‘Ты впускаешь разработчиков в свой Sketch-файл’

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

0

Всё зависит от уровня проектов. Если ты делаешь дизайн для Google, то конечно лучше сделать подробный UI-kit. Но например для сайта визитки компании «Рога и копыта» он будет излишним.

0

«Разве не лучше ли им предоставить полный набор разбитых компонентов с требованиями и кейсами» — вот эта манипуляция бесконечно жрёт и жрёт время всей команды. Дизайнеры постоянно совершают манипуляции чтобы предоставить актуальные данные, а разработчики постоянно парятся где же эти актуальные данные и какие из них актуальнее. На всей этой почке происходит просто море ошибок и путаницы. Zeplin, InVision+Craft — всё это полумеры, упрощает решение, но не решает проблему на корню, тем более они не дают возможно взглянуть на весь проект глазами дизайнера, для этого дизайнеру нужно лепить отдельную карту экранов картинкой/pdf/realtimeboard ИЛИ пускать в макет, но и тут проблема — разработчики не могут оставить там комменты (кроме realtimeboard), а вести дискуссии в Zeplin/InVision на практике не удобно.

0

Жрет время дизайнера и менеджера по рекам, чтобы потом 10-20 девов могли эффективно разрабатывать продукт. В итоге дешевле бизнесу.

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

Допустим, возьмем библиотеку Material Design. Удобно, практично, понятно.

Я просто не представляю девов, которые будут в дизайн оригиналах во что-то вникать. Кто им обьяснять будет поведение и визуальные нюансы?

0

Так и не нашла, где в Figma включить пиксельную сетку.

0

Это я видела, нажимаю, но в Safari ничего не происходит(

Ещё одна х*ня, чтобы дизайнер потратил своё время на новый формат.

Моё личное ИМХО:

1. Веб-редактор - это фу, нативное приложение в 1000 раз быстрее и стабильнее. Если умрёт веб-сервис, то умрут все ваши проекты, так получается?
2. Плодить форматы - это двойное фу. Именно поэтому я не одобряю скетчи и прочую хренотень, которая не может выдать результат в универсальном, общедоступном формате. Всё должно хранится (или хотя бы экспортироваться) в SVG и прочих обзедоступных форматах.
3. Немножко Git в вашу жизнь, и вы перестанете ныть про систему контроля версий.
4. Совместная работа над одной страницей... Ну как бы это сказать помягче...

Дизайнер в 2017 должен не редакторы новые изучать, а JS, HTML и CSS. Об этом ещё в 2015 Антон Шеин говорил, и хочется подтвердить его слова.

1. У Фигмы есть нативное приложение в дополнение к веб сервису. Работает без интернета.
2. Все экспортируется в свг, и с этим проблем нет. Совсем не плодить разные форматы не получится.
3. ГИТ хорош для текста. Для графики он не удобен.
4. Это очень хорошо.

Создать один див и прописать к нему стили дольше чем потянуть курсор мышки и проставить параметры. Чаще всего в верстке находится один вариант дизайна. А дизайнится намного больше. Дизайнер, который знает JS, HTML и CSS конечно молодец, как и программист который умеет писать хороший текст.

Спасибо за ответ.

Действительно есть псевдонативное приложение, но оно ощутимо подтормаживает. Похоже всё время идёт синхронизация с сервером. Плюс приложение, судя по всему написано на Electron-е или чем-то подобном. А это значит, что это скорее аналог браузера, написанный на JS, поэтому и скорость рендеринга низкая.

Я рад, что экспортируется в SVG, надеюсь обратно совместимо. Это конечно плюс.

Судя по описанию данной программы, разницу версий в изображениях действительно удобнее смотреть, чем переключать коммиты гита. Но, например, GitHub давно уже имеет такую фичу:
help.github.com/articles/rendering-and-diffing-images/

Работать над одной страницей всё же считаю надругательством. Мне кажется, абсолютно не нужно мешать в кучу мысли двух дизайнеров. В конце концов, у каждого из них может быть свой вижн.

0

Ок. Тогда и кодить её должен только один человек? =)

На самом деле всё же зависит от команды и задач. Например только вчера мне нужно было срочно нарисовать кучку баннеров (56 форматов). Я нарисовал мастер баннер, и подключил остальных дизайнеров. В итоге баннеры нарисованы очень быстро, а весь текст и графика правится в мастере и автоматом обновляется на всех остальных.

По поводу приложения. У меня оно не тормозит, но и комп у меня довольно мощный. В любом случае сейчас у Фигмы полный компромисс. Как и любое веб приложение оно имеет свои плюсы и минусы. Глупо говорить что Гугл Таблицы плохи, так как это не нативное приложение.

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

0

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

Полностью разделяю мнение. Особенно последний параграф.

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

0

А вот тут уже полностью не соглашусь.

Сейчас уже почти всё можно изобразить вёрсткой, другое дело зачем это делать. Хороший дизайнер как и программист не будет изобретать новый велосипед ровно до того момента, пока старый будет нормальным.

Хороший дизайн не зависит от устройства и носителя! Экран может быть квадратным, прямоугольным и даже круглым. Соотношение сторон тоже может быть каким угодно. Да и вообще это может быть не экран.

Нарисовать страницу или приложение на всех носителях невозможно. Но базовый дизайн всё равно необходим.

0

Что скрывается за определением «базовый дизайн» в данном контексте? Базовый для чего?

Совершенно не согласен. На планшете или смартфоне то, что нарисовано для десктопа и там тестировалось (например) в большинстве случаев работать не будет. Или будет плохо работать. По этому важно, для чего создан каждый конкретный макет.

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

Справедливости ради скажу, что сам начинаю с того, что, действительно, наброски первых вариантов шаблонов делаю в графике. До момента, когда определюсь с направлением, дальше для меня это неактуально. Тратить ещё своё время, перерисовывая одну и ту же картинку, как она будет перестраиваться на, как минимум, планшете-фаблете-смартфоне? Нет, спасибо. :)

0

У Флигмы есть приложения под Айос и Андроида для проекции интерфейса на устройства.

0

Боюсь, возникло недопонимание. Эта опция есть много где. Попробую коротко сформулировать свою мысль — картинку для смартфона он просто масштабирует в фаблет, так же и с остальными, либо делать отдельно ещё для всех разрешений. А затем, внося исправления в один макет, «бегать» по остальным исправлять. Пустая трата времени, которое можно потратить с пользой :)

Вот ещё один достойный конкурент Photoshop и Sketch: affinity.serif.com/en-us/designer/

0

Плюсую, удобный и быстрый инструмент. Плюс ребята недавно ещё выпустили фото-редактор.

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

0

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

Прямой эфир
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления