Что лучше скетч или фигма

Figma vs Sketch: битва популярных редакторов для проектирования интерфейсов

В 2020 году дизайнеров, работающих в Photoshop и Illustrator, становится всё меньше. Специалисты активно изучают новые инструменты и пользуются их преимуществами.

В этом материале мы сравним кроссплатформенный редактор Figma и приложение для работы с векторной графикой Sketch.

История развития

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

Figma — онлайн-сервис с приложениями для компьютеров и мобильных устройств. Стал популярен благодаря кроссплатформенности и фишкам совместной работы. Разработчики начали создавать проект в 2016 году. За 3 года он не только смог догнать «Скетч» по возможностям, но и увёл значительную долю аудитории. «Фигма» привлекает пользователей удобством. Создал макет, создал ссылку на публичный просмотр и отправил клиенту. Много пространства для работы в команде. В истории показывается, кто внёс изменения и версию всегда можно вернуть к предыдущему состоянию.

Стремительная популярность Figma стала возможной благодаря активной разработке и продвижению в социальных сетях. Популярные блогеры рекламируют инструмент, в интернете тысячи обзоров, в репозитории много плагинов для расширения функционала. Есть Adobe XD, InVision, Zeplin и другие аналоги, но «Фигма» оставляет конкурентов позади.

До сих пор кажется, что облачный редактор с комфортной работой в браузере — выдумка. Figma доказал реальность идеи. Дизайнеры со всего мира создают миллионы UI, делятся фишками с комьюнити и активно создают новые плагины. Развитие уже не остановить, и конкуренты отлично это понимают. Через 3-5 лет продвижения в аналогичном темпе в нише появится лидер и затмить его достижения будет нереально.

Давайте посмотрим, чем отличаются два инструмента, и для каких целей подойдет каждый из них.

Возможности сервисов

Figma и Sketch из разных вселенных, но работают они по схожим принципам. «Фигма» доступен на macOS и Windows, а «Скетч» только на Mac.

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

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

Одна из крутых фишек кроссплатформенного приложения в том, что дизайнер пересылает заказчику live-версию макета и создаёт эффект погружения. В Фотошопе заказчик видит статическую картинку или документ по слоям, а в Figma он может взаимодействовать с интерфейсом. По клику на кнопку осуществляется переход в другой фрейм, а наблюдатель с той стороны экрана воспринимает это как демо-сайт. Для него это не прототип, а полноценный UI, который работает без верстки.

Панель инструментов, «дерево» слоёв и встроенный инспектор — главные модули двух редакторов, с которыми дизайнер проводит большую часть времени. Они помогают создать интерфейс, обеспечивают навигацию и дают подробную информацию о свойствах элемента.

Ключевое отличие — принцип работы. Отредактировать макет в «Фигме» можно в любом браузере или на компьютере. «Скетч» работает только на операционной системе Apple и фирменных компьютерах Mac.

Инструменты редактирования и прототипирования

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

Элементы в Sketch и Figma привязываются к определённым артбордам, а интерактивное взаимодействие обеспечивается при наведении или клику. Фреймы в «Фигме» более гибкие.

Работа со стилями в Figma более удобная. Цвет можно конвертировать в стиль и применять к любому элементу: заливке, обводке, текстовому фрагменту. В Sketch этот механизм реализован неудобно.

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

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

«Фигма» учитывает историю редактирования. На бесплатном аккаунте она доступна в течение 30 дней. То есть, дизайнер может просмотреть изменения за месяц. Если перейти на платный тариф, разблокируется полный журнал.

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

Управлять версиями в Figma удобно. Для каждого элемента списка можно задать имя и подробное описание. Сделайте процедуру частью творческого процесса, чтобы легко ориентироваться в version history. Это актуально для всех дизайнеров, так как заказчики часто просят вернуть блок из предыдущего макета и хорошо, если у специалиста есть копия. Для «Фигмы» такой проблемы не существует. Разве что активен бесплатный тариф, и с момента внесения правок прошло больше месяца.

Импорт и экспорт

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

Целевая аудитория Sketch — дизайнеры с компьютерами Apple. В десктопном приложении «Фигмы» есть функция сохранения проекта в файл. Если внезапно отключится интернет и синхронизация с сервером будет недоступна, выгрузка в локальный документ спасёт от потери данных.

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

Шаринг файлов

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

Команда Figma и здесь нашла гибкое решение. Пользователи могут не только распространять ссылки на live версию макета, но и отправлять готовые библиотеки компоненты. Создал новую команду, сделал общее пространство и открыл доступ. Логотипы, исходники и другие файлы собраны в одном месте.

Возможности:

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

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

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

Комментирование в Sketch доступно только после установки специального плагина. Это было круто до появления «Фигмы», а теперь выглядит как динозавр, который ещё не вымер, но уже никому не интересен.

Обратная совместимость

Sketch — десктопное приложение, которое как и Photoshop имеет зависимость от версий. Проекты, созданные на версии 51.0 могут полностью не открыться в 52.0. С «Фигмой» таких проблем нет. Редактор обновляется, возможностей становится больше, а проблем с совместимостью нет.

Анимация

Интерактивный дизайн — не только способ заинтересовать клиента динамическими переходами. Это возможность показать UI в форме, максимально приближённой к финальному результату. Раньше дизайнеры только мечтали об инструментах анимации в графических редакторах. Теперь это уже не кажется чем-то нереальным.

В Figma есть функция «Smart Animation», которая создаёт плавные переходы между фреймами и различные эффекты. При наведении на кнопку появляется градиент и заливка, слои подгружаются с анимацией, блоки «оживают» благодаря технологиям. В Sketch существует плагин под эти задачи, но этого мало.

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

Для работы с большими проектами в «Скетче» нужен мощный компьютер с запасом оперативной памяти и SSD-диском. Особенно когда приходится одновременно вносить изменения в несколько холстов. В большинстве случае система не выдерживает нагрузки и зависает.

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

С функционалом сервисов разобрались. Теперь проанализируем юзабилити продуктов.

Удобство использования

Переход со «Скетча» или Adobe XD в «Фигму» пройдёт без трудностей, так как интерфейс и возможности проектирования очень похожи. А вот в альтернативной ситуации приспособиться к особенностям «Скетча» после Figma будет непросто.

Во-первых, надо иметь под рукой производительный Mac последних выпусков, который стоит как несколько обычных компьютеров. Во-вторых, на жестком диске должно быть достаточно места для хранения объёмных макетов. И не стоит забывать о проблеме совместимости.

Интерфейс — вопрос вкуса и привычки. Специалисты осваивают новые инструменты и решения, чтобы повысить продуктивность. Одни говорят, что им ближе Figma. Другие не воспринимают всерьез ничего кроме Sketch.

Плагины

Небольшие расширения, которые увеличивают возможности есть и в «Скетче», и в «Фигме. В первом случае библиотека состоит из пользовательских и официальных плагинов, которые доступны в репозитории. Для установки дополнения надо скачать его, ознакомиться с инструкцией разработчика и запустить на компьютере. Продукт автоматически добавится в Sketch и будет доступен в меню.

Figma придерживается концепции облачной платформы во всех аспектах. Плагины собраны в специальном разделе и устанавливаются в один клик. Архивы не надо загружать или распаковывать. Просмотрели список, нажали «Install» и пользуетесь. Функционал находится в стадии бета-тестирования, но уже сейчас в списке есть много крутых дополнений для автоматизации.

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

Тарифные планы

Бесплатный доступ к «Фигме» неограничен по времени. Пользователи могут создать 3 проекта и добавить 2 редакторов. Два платных тарифа продаются за 12 и 45 долларов в месяц. За эти деньги доступны командные библиотеки, полная история версий проектов, аналитика и закрытые плагины.

В «Скетч» доступно 2 варианта: персональная и корпоративная лицензии. В первом случае за 99 долларов дают доступ к программе, 1 год обновлений и 365 дней подписки на фирменный сервис Cloud. Для организаций цена зависит от количества подключенных устройств.

По стоимости оба инструмента находятся примерно на одном уровне. В «Фигме» выгоднее платить за год сразу.

Преимущества и недостатки

У любого программного обеспечения есть сильные и слабые стороны. Герои нашего обзора — не исключение.

Преимущества Sketch:

Недостатки:

Преимущества Figma:

Недостатки:

Редакторы будут постоянно сравнивать и всегда найдутся аргументы в пользу разных мнений, но одно можно сказать с уверенностью — они подходят для решения определённых задач. Если нужен полноценный инструмент под macOS — выбираем Sketch. Если не хочется уходить с Windows — устанавливайте Figma.

Обращайтесь в веб-студию IDBI за крутым веб-дизайном под ваши задачи. Мы следим за трендами, используем накопленный опыт и знаем, как создать идеальный UI под вашу целевую аудиторию.

Источник

Figma или Sketch: что лучше в 2021 году?

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

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

Но популярность всегда основана на удобстве работы с программой. Некоторые сайты уже сравнивали этот показатель в обзорах, а мы только решились, потому что дизайнеры Coalla Agency (https://coalla.ru) в работе использу Фигму, а не Скетч.

Фигма и Скетч: базовые инструменты

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

Интерфейс Фигмы, как и многие программы для UI-дизайна, имеет интерфейс, очень похожий на Скетч.

Вот Скетч:

А вот Фигма:

Обе программы располагают холст посередине, слои слева, а инструменты вверху. И хотя правая панель в Скетче называется «properties», а в Фигме — «inspector», обе имеют одно и тоже назначение. Эти совпадения не случайны, потому что Фигма стремится сделать интерфейс похожим, чтобы дизайнеры могли по-быстрому переключиться со Скетча на Фигму. Привычный пользовательский интерфейс иногда очень важен при работе.

Артборды или фреймы

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

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

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

Фигма и Скетч: расширенный инструментарий

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

Коллаборация

Фигма полностью превосходит Скетч в плане коллаборации. Подобно Гугл Документам, Фигма позволяет нескольким дизайнерам одновременно работать над одним проектом.

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

А Скетч, с другой стороны, получил схожий инструментарий только в мае 2021 года, и к тому же — платный. Совместная работа в Скетч удовлетворительна, но все равно проигрывает Фигме. Последняя просто лидирует в уровне функционала для совместной работы, ведь у них были годы для улучшения технологии, а Скетч находится в начале пути.

Инструменты для отрисовки

Пока ни одна из программ не предоставляет такого продвинутого функционала по работе с векторной отрисовкой, как Adobe Illustrator. Но обе имеют набор, достаточный для дизайнерских нужд: шейпы, булевы операции и векторные инструменты для отрисовки с нуля.

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

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

Символы и компоненты

И Фигма, и Скетч включают функционал символов: стандартных элементов, которые могут повторно использоваться на страницах и редактироваться независимо. Но реализация символов в каждой из программ различна.

Скетч собирает все процессы в одну страницу, что делает работу над проектами потоковой.

Когда создаете новый символ, например кнопку или иконку, оригинальный элемент перемещается на «Страницу символов» и остается под «уплощенным» экземпляром. Чтобы редактировать все элементы одновременно, нужно изменить родительский символ на странице символов. Любые изменения главного символа отражаются во всех элементах. И когда хотите сделать копию символа, просто создайте еще один экземпляр. Каждый из которых можно кастомизировать через панель «overrides». В целом, символы в Скетче гибки и мощны.

«Компонент» в Фигме — аналог символа в Скетче. Компоненты проще, но не так мощны и организованы. В отличие от Скетча, у Фигмы нет отдельной страницы для компонентов. Но родительский компонент присутствует. Чтобы создать новый экземпляр, скопируйте родительский компонент. Редактирование родительского компонента обновляет каждый экземпляр, но последние могут быть изменены и независимо от него.

Плагины

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

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

Фигма и Скетч: стоимость

Тут прямая зависимость от команды вашего проекта. Фигма предоставляет бесплатную версию, в которой только два дизайнера могут редактировать документ, хотя просматривать может любое количество человек. Если команда маленькая, бесплатная версия Фигмы идеально подойдет. А вот для больших команд придется платить по 12$ за редактора в профессиональной версии, и по 45$ в версии для организации. Каждая из которых идет с дополнительными преимуществами, которые могут быть найдены на страничке. У Скетча нет бесплатной версии, но лицензия требует лишь единовременной покупки. За 99$ получаете все возможности и целый год обновлений. Пробные и аккаунты для студентов также доступны.

Выбор софта зависит от компании. Компании со штатными сотрудниками и аймаками могут предпочесть Скетч, а команды с дизайнерами на удаленке или windows-компьютерами — Фигму. Обе программы мощны и что бы ни выбрали, любая из них позволит создавать прекрасную графику и трендовые интерфейсы.

Источник

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

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

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

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

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

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

По умолчанию 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 — полностью бесплатна до конца этого года, так что попробуйте.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник