Лого vc.ru

Сравнение графических редакторов: десктопный Sketch против браузерного Figma

Сравнение графических редакторов: десктопный Sketch против браузерного Figma

Автор книги Design+Code Менг То в своем блоге сравнил два графических редактора — Sketch и Figma. Автор написал о системе версий и комментариев, сравнил производительность и интерфейсы обоих приложений.

Редакция рубрики «Интерфейсы» публикует перевод материала, выполненный командой Sketchapp.

Поделиться

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

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

Веб-приложение против нативного приложения

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

По умолчанию Figma использует Google Fonts, но можно использовать и собственные шрифты. Разработчики также добавили Font Awesome.

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

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

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

Совместная работа может в корне изменить динамику работы команд дизайнеров и разработчиков. Каждый может зайти и проверить все спецификации: шрифты, цвета, размеры, расстояния. Разработчики могут увидеть ограничения и посмотреть, как макет адаптируется под различные экраны.

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

История версий в Figma выглядит понятней и позволяет быстро просмотреть разницу версий.

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

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

В Figma можно комментировать проекты. В Sketch вы можете добавлять комментарии при помощи плагина или использовать Zeplin.

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

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

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

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

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

Импорт из Sketch

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

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

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

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

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

Ограничения

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

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

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

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

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

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

Пользовательский интерфейс Figma очень похож на интерфейс Sketch. Это означает, что Sketch установил очень высокую планку в стандарте дизайна, так что Adobe XD и Figma остается только догонять Sketch.

Sketch — это своего рода iPhone среди инструментов дизайна. И новые инструменты будут просто копировать его и добавлять несколько своих фишек. Но пользователи от этого только выигрывают.

Скоро UI-дизайнеры перестанут использовать Photoshop. Конечно, я не пытаюсь оскорбить Figma или Adobe. Они достаточно хороши для удовлетворения современных требований дизайнера.

Стоит ли попробовать Figma

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

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

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

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

Существующие инструменты, если говорить про веб дизайн — говно неудобное. Новый инструмент не должен быть GUI для кода, что мы видим в том же webflow. Но и очередной графический редактор это путь в никуда. В вебе нужно работать с потоком, а не пиксели двигать по экрану.

Например, данные ты вводишь и редактируешь как в текстовом редакторе. Сущности размечаешь тут же упрощенным шаблонизатором типа jade. Стилизуешь все это с гибкостью sass, но посредством GUI. Под рукой иблиотека атомарных компонентов. Вектор и растр ипортируется извне. Бэкэнд разработчик подключает свои абстракции в живом проекте, а не в скомпилированном. И т.д.

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

А пока 2017 год а мы по-прежнему рисуем прямоугольники.

половина моих знакомых даванула бы кирпичей от слов Jade и SASS

Ну ладно jade, а SASS чем вашим знакомым не угодил?

Под jade я имею в виду лаконочный синтаксис , он не обязан соответствовать семантике html. Indent шаблонизаторы чем-то напоминают слои в том же скетче.

Что касается SASS, речь о возможности использовать переменные, причем не просто стили, но и структуру макета и отступы и многое другое что есть в каскадных таблицах, но чего нет в графических редакторах.

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

Я про дизайнеров имел в виду, разумеется
А в скетче есть плагин, чтобы свойства объектов в документе менять через таблицу стилей, кстати

0

>данные ты вводишь и редактируешь как в текстовом редакторе
Что за данные?

>Сущности размечаешь тут же упрощенным шаблонизатором типа jade
Это как? Это уже верстка, не? Бекенд разработчик работает здесь же (читай ниже)?

>Стилизуешь все это с гибкостью sass, но посредством GUI
Как в webflow панелька справа?

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

0

Сложно коротко объяснить. Постараюсь сжато, но все равно будет много букв.

1) Страница в интеренете это информация (данные).

Из-за того что в графических редакторах работать с текстом неудобно, мы таскаем один и тот же Lorem ipsum по артборду. Без информации вообще не имеет смысла начинать что-либо стилизовать. Сейчас, сначала отдельно прорабатывают информационную архитектуру и потом переносят в макет. И если нужно изменить данные или их структуру, в граф. редакторе это делать неудобно — нет потока.

2) Совсем уйти от разметки не получится — браузеру нужно понимать где что на странице. Но работу с разметкой можно упростить. Например, использовать семантику разговорного языка — так же, как мы называем слои в редакторе или классы в коде. Нам не нужно знать div тут или span, мы просто пишем, шапка, меню, кнопка, форма. Это по сути абстракция, я могу могу описывать сайт «крупными мазками», а потом углубляться, усложняя структуру каждого отдельного блока. Так работает информационная архитектура, ты проектируешь, ничего не рисуя вообще. Вот кусок этого сайта, его можно прорабатывать более детально, не зная никакого языка разметки:

header
logo
menu
Стартапы
Офлайн
Digital

search
messages
user
userpic
username
work
content
meta
Сравнение графических редакт….
Автор книги Design+Code…

3) Почему нет? Панелька справа норм, все привыкли же. Просто панелька weblow пытается говорить на языке CSS (float leaft, float right), поэтому она неудобная. Мне нравится как реализовано в antetype, похоже на flexbox. Это что касается самого потока и организации элементов в нем. Панель стилей нормальная во всех редакторах, можно взять из скетча, например. На холсте выделил элемент, и на панельке стилизовал. Остальное это уже детали.

4) Бэкэнд разработчик взаимодействует только с абстракциями из панели №1. Скажем, если он подключил динамические данные к определенному куску, то дизайнер видит что там вместо статического текста появился динамический блок. Тут нужно конечно плотнее думать на пару с разработчиком, я не он.

5) Остается заставить браузер понимать абстракци и вот тут два варианта: либо семантику проставляет тот кто знает indent шаблонизатор, либо дизайнер наконец сам выучит 5 тегов и начнет делать это самостоятельно. В любом случае, это уже будет не та верстка которую мы знаем — кто бы это не делал, исключены потери качества на этапе переноса макета.

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

0

VC порезал отступы, на картинке как оно задумывалось

0

Векторные сети, какое пафосное название базовой фичи из фотошопа.

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

Фигма не умеет экспортировать проект в файл, чтобы засунуть в Avocode для фронт-ендеров. Можно было бы и не засовывать никуда, будь интерфейс для просмотра сгенерированных стилей. Причем стили есть, просмотреть их нельзя. Продукт крайне сыроват

Круто. Я не дизайнер, но для себя наброски дизайна периодически делаю, и на ноуте мне это почему-то адски неудобно. А тут в вебе можно с десктопа.

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Victoria Vasilieva

Фотографии рабочих мест это просто праздник какой-то!

Сотрудников ищут Beta Digital Production, Plarium, «Додо Пицца» и «Е заем»
0
Artem Makeenok
JAMI

Очень крутая статья. В принципе, все эти идеи витают в воздухе - zero UI и общие тенденции в UI/UX со времен Стива Джобса примерно в этом направлении и движутся, с разной степенью осознанности.
Кстати, часть про чат-ботов очень на злобу дня. По сути, чат-бот - это обычный интерфейс, который (пока что) в большинстве случаев менее удобен, чем классические решения. Зачем этот интерфейс пытаются прикрутить везде и всюду, зачастую делая путь пользователя к получению услуги более длинным - большой вопрос.

Мнение: Пользовательский интерфейс — это компенсация отсутствия телепатии
0
Danil Dellos

Кто-нибудь знает что-то про компанию на IGG от фирмы Crazybaby - внутриканальные беспроводные наушники Air? Пока все выглядит вполне реально, но гарантий нет конечно никаких. Денег уже собрали много они

Смерть стартапа: Как создатели «умного» кольца BioRing собрали $460 тысяч на краудфандинге и исчезли
0
Kirill Pankin

А работать кто будет?

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Евгений Григорьев
Esprit Games

Интереснее написать про Znaps, которые собрали аж три ляма на кикстартере и за год не выслали изделие ни одному бекеру

www.kickstarter.com/projects/1041610927/znaps-the-9-magnetic-adapter-for-your-mobile-devic?ref=discovery

Смерть стартапа: Как создатели «умного» кольца BioRing собрали $460 тысяч на краудфандинге и исчезли
0
Показать еще