Figma — это как Sketch в браузере с возможностью совместной работы в режиме реального времени.

Учитывая ограниченное время использования, сейчас я могу с уверенностью сказать, что Figma стала более безупречной и готовой к релизу, чем при моем первом опыте работы с Adobe XD. Она имеет три неоценимых преимущества: совместная работа в режиме реального времени, векторная сеть и история версий. Она может выдержать работу над одним документом дюжины дизайнеров, без особых усилий. Наконец, этот инструмент быстрый, легко поддерживает 20+ рабочих областей в одном документе.

Люди неизбежно будут сравнивать Figma со Sketch. Так, как я являюсь давним пользователем Sketch, я хотел бы поделиться своим опытом, которые по традиции начался 3 года назад.

Браузер VS нативное приложение

Figma в браузере

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

Figma использует Google шрифты

По умолчанию, Figma использует Google шрифты (бесплатная библиотека 800+ шрифтов), но вы также можете добавить свой собственный путем установки расширения. Они также добавили очень популярный FontAwesome. Я считаю это очень умным шагом, потому что сотрудникам не нужно устанавливать дополнительные шрифты, когда они включаются в работу.

Работа в режиме реального времени

Figma в режиме реального времени

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

Совместная работа в Figma

Вы можете быстро работать в одиночку, затем пригласить других для редактирования или просмотра вашего дизайна. Преимущество браузерной версии в том, что участникам не требуется устанавливать себе что-либо, или иметь Mac для работы. Figma работает на Mac, Windows, Linux и на мобильных устройствах (только в режиме просмотра). Без преувеличения, это в корне изменит динамику работы команд и позволит совместно работать дизайнерам и разработчикам. Каждый может зайти и проверить все спецификации: шрифты, цвета, размеры, расстояния, и т. д. Разработчики могут увидеть ограничения и посмотреть, как макет адаптируется под различные экраны.

Отступы в Figma такие же как и в Sketch

История версий

История версий Figma

История версий в Figma стала более визуально понятней и позволяет вам быстро просмотреть разницу версий. Это намного проще и приятнее, чем просматривать историю версий Sketch на MacOS в нативном приложении, который кажется медленным. При том, что оба приложения имеют автосохранение и историю версий, реализация очень отличается.

Навигация между версиями в Sketch

Навигация между версиями в Sketch — медленная. Дизайнеры часто отключают эту опцию потому, что она “съедает” много дискового пространства.

Система комментариев

Система коментариев figma

Встроена опция комментариев. Члены команды могут комментировать ваш дизайн и вы получите уведомление о новом комментарии или ответе. После просмотра нажмите “Resolved” для скрытия уведомлений.

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

Zeplin.io — способ подружить дизайнера и верстальщика

zeplin

Zeplin — также браузерное приложение, поэтому оно работает на Mac/Windows.

Еще один плагин Sketch, который стоит упомянуть — Craft от InVision, который позволяет вам создавать дизайн с реальными данными. Вы можете быстро генерировать имена и фотографии из пресетов, сайтов или API.

1-c4lfxdhmknteqttm8n1qyw

Если вы соберете вместе Sketch, Craft и Zeplin — получится пакет, который выглядит более привлекательным для комментариев и прототипирования.

Векторные сети

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

работа с вектором в Figma

Vector Networks, представлена Figma.

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

Импорт из Sketch

Figma умела прекрасно импортировать Sketch файлы. Каждая рабочая область, группа и слой оставались неизменными, с их точными названиями, группировкой и свойствами, включая границы, тени и эффекты. Поэтому, я убежден, что использование Figma в качестве расширения Sketch и наоборот — не такая уж и безумная идея. Вы можете импортировать любой Sketch файл или вектор и начать работать с ним. Факт того, что они до сих пор не поддерживают файлы Photoshop (до сих пор), говорит об уровне совместимости Photoshop и Sketch.

Испорт из Sketch в Figma

Странно, но я не смог скопировать векторные изображения из Sketch в Figma, но я смог перетянуть SVG файл прямо в открытый документ.

перетянуть SVG файл из Sketch

Я даже смог импортировать детализированный вектор из Angle и получил очень впечатляющий результат. Конечно, градиенты и тени выглядят не очень хорошо (даже что-то не отобразилось), но все шейпы были перенесены. Это очень важно потому, что вы можете виртуально использовать любым UI kit Sketch в Figma.

Десктопное приложение

Десктоп версия Figma

Вы можете скачать десктоп версию, но не ожидайте полноценной работы. По сути — это родное веб приложение. Тем не менее, в отличии от браузерной версии, горячие клавиши не будут напрягать вас функционалом браузера. Например, CMD+9 переключает вкладки в браузере, но в десктоп версии это сочетание будут переключать документы.

Ограничения

Адаптивная компоновка элементов является основной опцией современных инструментов дизайна. Дизайнерам приходится иметь дело с постоянно растущим числом разрешений экранов. Было бы глупо не иметь возможность адаптировать дизайн из размера Iphone 7 в iPhone 7 Plus просто путем ресайза рабочей области.

Адаптивный дизайн Figma

В Figma вы можете задать ограничения путем присоединения к границам или установки элемента по центру. Это по сути тоже самое, как и Pin to corner и Resize object в Sketch. Должен отметить, что версия этих опций в Figma лучше визуализирована и интуитивно понятна, чем в Sketch. Но в Sketch есть больше опций. Например: Float in place.

Pin to corner и Resize object

Хорош ли Float in place? Да, если вам необходимо сохранить пропорциональное расстояние и размер между элементами.

Float in place figma

Производительность

Обработка десятка рабочих областей — обычное дело для Figma. Те, кто жалуются на производительность Sketch — могут попытать счастья здесь. Учитывая то, что приложение находится в браузере — это служит отправной точкой для людей, у которых есть ПК, ноутбук или мобильный телефон. Фактически, это ответ людям, которые с нетерпением ждут Sketch на Windows.

Пользовательский интерфейс

Сравнение интерфейсов Sketch и Figma

Пользовательский интерфейс Figma является почти точной копией UI Sketch, вплоть до мельчайших деталей, таких, как названия инструментов, горячие клавиши, рабочие области и группы, и функция экспорта. Не поймите меня неправильно, это ХОРОШИЙ инструмент для использования. Это означает, что Sketch установил очень высокую планку в стандарте дизайна, что Adobe XD и Figma ничего не остается, как догонять.

Sketch — это своего рода iPhone среди инструментов дизайна. И новые инструменты будут просто копировать его и добавлять несколько своих фишек. В конце концов, пользователи только выигрывают от выбора наивысшего стандарта. Другими словами, осталось не так долго ждать, пока UI дизайнеры уйдут от использования Photoshop, так же, как и в свое время люди перестали пользоваться смартфонами с этой дурацкой клавиатурой. Конечно, я не пытаюсь оскорбить Figma или Adobe. Они достаточно хороши для удовлетворения современных требований дизайнера. Если быть до конца честным, то многие из этих стандартов пришли из Mac и Adobe Illustrator и Fireworks.

Будете ли вы использовать Figma?

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

Оба инструмента могут усилить друг друга. Это означает, что они могут удовлетворить ваши требования, если вы переключаетесь между Mac и Windows, iOS и Android, домом и офисом. Я бы выбрал Figma за совместную работу в режиме реального времени, кроссплатформенность (Mac, Windows, Linux) а Sketch за приверженность платформе, настоящий нативный опыт, превосходные плагины и ресурсы. В плане дополнительных опций, эти инструменты достойны и прекрасно дополняют друг друга (совместная работа в режиме реального времени, векторные сети, комментарии против символов, переопределения, плагины)

Figma — полностью бесплатна до конца этого года, так что попробуйте.

Subform — современный инструмент для продакт дизайнеров