Ну вот и я попрощался с продукцией от Adobe, несмотря на всю её привлекательность и универсальность, а где-то даже бесплатность в случае с Adobe XD. Одним прекрасным днем с моего ноута исчезли все приложения от Adobe. Это был для меня некий челендж.
Так как я больше не занимаюсь полиграфией и выпуском разной печатной продукции, то и вся необходимость в этих программах отпала сама собой, и вместе с приложениями освободились около 15 гб. А удалил я вот что: InDesign, Photoshop, Illustrator.
Наверное, для меня это будет некий челендж. Смогу ли я без них или нет. С некоторыми из этих приложений я дружил более 7 лет. Ну, теперь вы поняли, как мне было тяжело их удалять, но идем дальше.
В связи с тем, что моя должность больше не звучит как: «Универсал во всех сферах», то и все эти приложения мне больше не нужны по основной работе. Я решил попробовать новый инструмент и внедрить его в свой рабочий процесс. Вообщем, я расскажу почему Figma так хороша и почему с каждым днём всё больше дизайнеров переходят с Photoshop на Figma.
Адаптация
Я очень люблю приложения от Adobe, их стабильность и понятность были для меня некими гарантами качества. Но последние годы что-то пошло не так, и её авторитет начал осыпаться, пока его законные территории медленно, но верно отжимались по праву сильнейшего.
За последующие пару лет рынок UI приложений расправил плечи и начал предлагать один продукт за другим. Даже Adobe засуетились и выдали довольно сырой Adobe XD, уже на момент релиза он сильно отставал от существующих решений, и восторги с фанатской трибуны Adobe в духе «Мы еще отыграемся» поутихли. Хоть разработчики и стараются выкатывать качественные обновления для XD, большинству всё равно не попробовать XD, из-за ограничения в виде Windows 10 или macOS.
Так вот, совсем недавно где-то в марте-апреле я столкнулся с ней. С веб-приложением Figma, она объединила в себя все лучшее, что происходило с миром инструментов UI-дизайна за последние годы.
Figma — это лучшие наработки от таких продуктов как: Sketch, Zeplin, InVision и всё в одной вкладке, ну или app’кe!
Доступность
Figma работает в любом современном браузере и доступна на любой платформе. Если ты уже работал в конструкторах страниц типа Webflow или Tilda, проблем с адаптацией не будет.
Ничего не нужно скачивать просто заходим на сайт figma, регистрируемся и работаем.
Дизайнерам привычно, что все, что работает через браузер. Поэтому, чтобы проектировать серьезные проекты через браузер, нужно себя к этому слегка подготовить. Если хочешь достичь качественных результатов за небольшой промежуток времени.
Как всё устроено: Все рабочие файлы хранятся в облаке и организованы древовидной структурой: «команда/проект /файл».Поэтому у вас не должно возникнутьникаких конфликтов копий.
Команда
Идея командной работы в едином пространстве заражает один продукт за другим и успешно демонстрирует, что это весело, задорно и полезно для рабочих процессов. А ведь началось всё с Google и их "google docs".
В Figma можно в режиме реального времени работать над одним файлом одновременно с другими коллегами. И всё это происходит через браузер и без каких-либо тормозов.
Каждый пользователь, находящийся в данную секунду вместе с тобой в одном файле, дает о себе знать своим курсором с именем — ты знаешь кто это и чем он занят.
Работа с макетами
Вот смотри, ты впускаешь разработчиков в свой PSD, а они там что-то меняют и это уже не классно! Также подумали ребята из Турции и выпустили приложение Zeplin, где фронтенд мог тыкать на все, что видит, не боясь внесения изменений.
Вот только каждый раз в таком случае нужно обновлять макет, загружая новый psd файл и отвечать на комментарии разработчиков в самом приложении. Таким образом рабочий процесс делится на две части. Первая - фотошоп и вторая экспорт и разбор комментариев.
Что мы видим в Figma, в которой весь Zeplin заменила индивидуальная настройка прав: приглашаешь разработчика в проект, назначаешь ему приоритет «read-only» и отпускаешь в свободное плавание: он радостно копошится в макетах, смотрит цвета, размеры, отступы, отковыривает ассеты и предается своим рабочим утехам.
И самое главное свежесть макета обеспечивается неощутимым процессом синхронизации. Все макеты в руках разработчика находятся в той стадии, в какой ты их оставил, закрыл ноутбук и ушел пить чаёк с печеньками.
Обсуждение
Для обсуждения макетов не приходится никуда «отбегать», весь фидбек собирается на месте и здесь же обсуждается.
Контроль версий
В Figma очень крутой контроль версий. Он нативный и простой: ты видишь кто вносил изменения, когда, и откатываешься до версии в пару кликов, перезаписывая или создавая копию макета.
Кривые
Кривая безье в Figma одна из лучших. Горе фотошоп никогда не привлекал меня своим редактором кривых, его отвратительный инструмент «Pen Tool» даже сегодня остается отсталым. Рисовать векторные иконки в Sketch было в удовольствие. Но Figma сделала ещё один шаг вперёд, сделав всё более продумано и приятно адаптировано под UX-дизайнеров. Pen Tool здесь настолько хорош и грамотен, что у меня ни разу не возникло раздражения от непойманной точки. Здесь всё работает лучше, даже после скетча.
Вот лишь несколько фичей, от которых наворачиваются слезы радости:
- Точки можно бесконечно соединять с другими, что дает возможность делать сложные шейпы;
- Удаление точки на кривой кривой не приводит к разрыву шейпа и исчезновению заливки, а соседние точки скомпенсируют прежнюю форму (как минимум, очень постараются);
- Можно менять заливку отдельных частей шейпа, образованных пересечениями кривых;
Линии. Можно. Двигать!
Точки — тоже, и их положение повлияет на соседние. Описание всех чудес «Vector Networks» можно почитать в посте Figma Эвана Уоллеса здесь. Удивительно, сколько вдумчивой работы было проделано при создании этого инструмента.
Сетки
Принципы изменения размеров (Sizing в Sketch) можно задавать отдельно для ширины и высоты группы, чего раньше не хватало.
В Sketch есть выпадающий список: Stretch / Pin to Corner / Resize object / Float in space. А иногда сразу трудно определить, что нужно выбрать, чтобы растягивание макета работало так как нужно.
В Figma это работает и выглядит интуитивнее.
ВАЖНО: Зависимости для объекта/группы можно задавать только от размера рабочей области, а не родительской группы.
Рабочая область (Frame) — не то же самое, что и Artboard в Sketch. Frame можно создать внутри другого Frame-а, поэтому работайте с ними, как с некой «прокачанной» группой, а не отдельным экраном.
Благодаря тому, что уровень вложенности Frame-ов не ограничичен, можно делать замороченные сетки, которые масштабируются по самым хитрым условиям. Что не раз помогало мне на практике во время проектирования интерфейса.
Layout Grid. Настройки сетки всегда перед глазами, в отличие от Sketch, где нужно лезть в меню, вызывать модалку и пока ты настраиваешь колонки, макет недоступен для редактирования. Кстати, фреймы «липнут» к краям колонок и масштабируются вместе с ними, соблюдая сетку и отступы.
Подробно о grid layout, constraints и прочем оккультизме я напишу подготовлю отдельный материал.
Компоненты
Они же — Symbols в Sketch, но не совсем они. Есть пара весомых отличий: Родитель. Создавая новый компонент, он не выносится на отдельный артборд, как это сделано в Sketch, а сосуществует с потомками в одном пространстве.
Детишки. Как говорят сами создали Figma, копируя родителя, ты создаешь не его копию, а экземпляр («instance»). И изменяя любую часть компонента, он изменится во всех копиях.
Меняя параметры родителя, эти же параметры меняются во всех его потомках — тут все как обычно. Но если ты решил поменять стиль потомка, это становится его уникальным независимым свойством:
В отличие от Sketch, где редактирование текста и изображений в символе происходит в отдельной форме, в Figma это можно делать, будто ты правишь обычную группу объектов. Мне кажется, такая механика поочевиднее.
Шрифты
В Figma шрифты тянутся из Google Fonts, а те, которые используются с локально, подкачиваются в проект. И это прекрасно.
Ништяки
Sketch-like интерфейс. Интерфейс Figma очень похож на Sketch, и это удобно — от первого запуска до полноценной работы прошло 30 минут, а ты уже по всю клепаешь страницы сайта, и радуешься жизни с кружкой экспресса в другой руке.
Импорт из Sketch — здесь!
Все проекты можно просто перенести из Sketch без единой потери. Во всяком случае, я не заметил ни отвалившихся шрифтов, ни поехавших кривых, ни битых картинок.
Качественный экспорт
Который по ощущениям работает лучше, чем в Sketch. Не уверен, в чем секрет, но SVG иконки реже страдают популярными болезнями вроде кривых градиентов, пропавших заливок и частичо растрированных элементов. Совсем недавно подъехал экспорт в PDF, теперь делать презентации станет проще. Для тех, кто их делает и экспортирует.
Прототипирование
Прототипирование ворвалось в наши проекты и продолжает прокачиваться всё сильнее. Последние релизы Figma добавили поддержку «Overlay» в прототипах, что позволило дизайнерам воплощать свои неугомонные идеи на практике. Если коротко, то overlay позволяет по действию на объект показывать/переходить на другой фрейм, при этом не дублируя основной.
Минусы
Зависимость от интернета. Очевидно, что без активного подключения поработать в браузере не получится. Есть офлайн-клиент, который выгрузит все изменения стоит только поймать сеть, но, если вы закрыли программу, последний файл, над которым вы работали станет недоступен.
Нет округления полу-пикселей. В работе над сайтами и приложения не сильно заметно, но при работе над нарезкой иконок с разными размерами, всё выползает и становится всё плохо.
Нет плагинов, но некоторые API начали спасать с середины 2018 года.
На сегодня нет никаких плагинов для выгрузки экранов в Marvel или InVision. Когда это появится в Figma — всего лишь вопрос времени.
Итоги
Sketch подготовил почву для того, чтобы продукты как Figma увидели свет, но в конкурентной борьбе он начал отставать. За этот год Figma изрядно прокачалась и это отличное время взять таймаут и неспешно рассмотреть другие варианты.
Большое количество продуктовых команд переходят на Figma. Например дизайнеры Gazprombank, и самого крупного стримингового музыкального сервиса Spotify,
В 2018 уже все адаптировались к Figma, кто хотел или же его просто заставили обстоятельства. Но, что точно, так это то, что разработчики и дизайнеры в командах перестали сталкиваться с неактуальными версиями макетов.
Да, есть и пара неприятностей в Figma, но, по сравнению с теми плюсами, что я получаю от ее использования каждый день, это мелочь. Все достоинства Figma говорят об очень кропотливой работе команды над продуктом, которые намерен стать лучшим на рынке.
p.s. А от фотошопа мне так и не получилось полностью избавиться, использую его для подготовки фотографий в фигму. 😃