{"id":14294,"url":"\/distributions\/14294\/click?bit=1&hash=434adac65d5ae5d3e2e945d184806550325dd9068ef9e9c0681ca88ae4a51357","hash":"434adac65d5ae5d3e2e945d184806550325dd9068ef9e9c0681ca88ae4a51357","title":"\u0412\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0418\u0418 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f\u043c \u043c\u0438\u043b\u043b\u0438\u0430\u0440\u0434\u044b \u0432 \u0433\u043e\u0434","buttonText":"","imageUuid":""}

Создание сайтов с AI и динамические данные в компонентах через CMS — обзор всех нововведений Webflow

Webflow — это визуальный редактор кода (ноукод) для создания сайтов разного калибра, начиная от простых лендингов, заканчивая сложными с кучей анимацией и интеракций, блогов, интернет-магазинов и даже веб-приложений, особенно благодаря множеству интеграций сторонних сервисов, таких как Wized (бэкэнд специально для Webflow).

Если вам интересно, то обо мне вы можете прочитать в моём профиле, но вкратце скажу, что я не первый год работаю с ноу- и лоукод инструментами, в частности Webflow — сейчас же разрабатываю подписку на безлимитный веб-дизайн и разработку Georgy.Design. Также я являюсь сертифицированным экспертом и активном участником сообщества Webflow.

Эта статья является компиляцией постов из моего Telegram канала — если найдёте ошибки в форматировании или ещё какой-то фидбек будет, то напишите в комментариях.

Дальнейшие планы Webflow

Дзяона Чжан, старший вице-президент в Webflow, рассказала о планах компании:

• Инерция (momentum)

Можно заметить как в последнее время Webflow шипит всё больше апдейтов разного уровня. Это направление, которое выбрала компания и не собираются сдавать обороты.

Тут я не буду много комментировать, проще будет описать происходящее примерной цитатой Эмили Лонетто:

Мы будем перерабатывать вишлист, так что эти старые запросы являются частью процесса.

Эмили Лонетто

• ИИ

Самая горячая нынче тема. Я уже рассказывал о планах Webflow по интеграции ИИ в продукт, можете на канале пост с видео найти.

В планах разработать инструмент, который не только поможет создать компонент или найти нужный элемент, но и разобраться в Webflow (ИИ имеет доступ к Webflow University и смежной документации) и даже веб-разработке.

• Webflow Conf

Прошлая конференция Webflow имела огромный успех, так что в этом году будет аж четыре — в Сан-Франциско, Нью-Йорке, Чикаго и Лондоне. Непонятно когда будет в Ереване, Тбилиси и Пхукете, но ждём 👍

Появилась возможность удалить себя из клиентского воркспейса

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

Поиск цветов (swatches) 🔥

Я уже об этом писал, вот пост → https://t.me/georgystories/323.

Настройка стиля обводки текста

Не сказать, что это очень полезная фича, но добавили CSS свойство, которое весьма давно существует. В любом случае приятно и не помешает делать ещё более интересные дизайны!

Новые единицы измерения 🔥

В Webflow добавили новые величины вроде DVH и DVW (Dynamic Viewport Height/Width), которые позволяют правильно рассчитывать размеры элементов исходя из, собственно, вьюпорта, то бишь доступного экрана пользователя.

Долой назойливые горизонтальные скроллбары — самый яркий пример, так как люди частенько давали элементам 100 VW из-за чего появлялись оные. Это связано с тем, что VW учитывает размер всего экрана пользователя, включая скроллбар браузера.

Больше об этом можно почитать по ссылке → https://university.webflow.com/lesson/small-large-and-dynamic-viewport-units.

Если думаете, что это хорошая тема для поста, то напишите в комментариях.

Возможность оборачивать элементы в див- и линк-блоки через горячую клавишу 🔥

Я писал об этом ранее → https://t.me/georgystories/277.

Фича, кстати, чрезмерно удобная — пользуюсь ей достаточно часто.

Поддержка dotLottie

Сразу скажу, что если не знаете о чём речь, то посмотрите этот курс → https://university.webflow.com/courses/after-effects-lottie-in-webflow.

Разница между .JSON и .Lottie по большей части в размерах файла — последний весит зачастую в разы меньше, так что сайты грузится будут быстрее. Также, немало важный фактор — придание идентичности. Понять где JSON файл, а где Lottie трудно, а стало проще. Плюс, у .lottie есть метаданные, что позволяет, например, видеть превью изображений в файле.

Возможность использовать данные из CMS в HTML 🔥

В общем и целом, Webflow расширяют интеграцию CMS в интерфейсе. Теперь можно привязать айди элемента к какому-нибудь полю из CMS.

Или, что, наверное, самое важное — использовать данные из CMS в атрибутах. В этом случае хватает применений и некоторые из них просто «отвал башки». Можно делать очень крутые штуки. В планах сделать видео по этой теме (звиздец, сколько я уже видео наобещал, поди целый плейлист наберётся).

Секции теперь имеют тэг <section>

Да, раньше почему-то это было не так по умолчанию и приходилось в настройках элемента менять. Теперь не надо. Супер, спасибо, Webflow!

Если неясно зачем оно, то супер краткий экскурс — это нужно для SEO, а именно ботам поисковиков, которые смотрят на контент на странице, дабы понять что происходит на ней.

Улучшения вариативных шрифтов

О вариативных шрифтах я писал ранее → https://t.me/georgystories/151.

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

Вложение (нестинг) коллекций в папках 🔥

Да, об этом я тоже писал → https://t.me/georgystories/310.

Обновление интеграции Google Analytics и перенос строки в кастом коде

  • Первый апдейт связан с предстоящим уходом Universal Analytics, который будет 4 июля и переходом на Google Analytics 4. Тут вам SEO специалисты больше расскажут.
  • Второй апдейт думаю объяснять не надо. Стало удобнее работать с кастом кодом в Webflow. Вообще у меня до этого было для такого расширение в браузере.

Улучшение работы Редактора и Дизайнера

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

Компоненты в Collection Lists 🔥

Ну наконец-то! Теперь можно использовать динамические данные, то бишь те самые из CMS, в компонентах на статичных страницах — на шаблонных/CMS страницах это уже можно было делать.

Я рассказывал о переходе Webflow с «символов» на «компоненты» в одном из постов, можете прочитать для понимания картины.

Если вкратце описать этот апдейт, то суть его в том, что теперь вы можете добавить любой компонент, например карточку чего-то там, в Collection List — таким образом имея коллекцию «Товары» вы можете изменить данные в карточки на, собственно, товары, а если у вас коллекция «Мемы», то будет карточка про мемы. Суть простая.

Дополнительно уточнили, что есть возможность делать компоненты из элементов находящихся в Collection Lists — удобно!

Появилась возможность установить воркспейс по умолчанию

Без комментариев, думаю и так понятно, особенно тем у кого много воркспейсов.

Кстати, если это не так и у вас есть вопросы — то пишите в комментариях, постараюсь объяснить и рассказать что да как!

Также появилась возможность сделать уникальную ссылку для воркспейсов

Больше не будет адресов вроде webflow.com/team/kek-cheburek-228-4l0l4, так как можно указать желаемый айдишник, такой же как и для своих профилей — например, webflow.com/@georgy.

Полезно будет тем, кто публикует проекты в Made in Webflow не с личного аккаунта, а с профиля воркспейса.

Улучшения для энтерпрайз клиентов

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

Если обобщить, то у таких клиентов появилась возможность дать доступ к стэйджинг-домену (webflow.io) определённым людям, например своей команде.

Возможность фильтрации логов активности проекта Webflow и дополнительные улучшения для бренчинга (ответвления) страниц

Опять же, только для энтерпрайза.

Однако, ребята сообщили, что рано или поздно эти фичи выкатят на всеобщий доступ. Ждём-с, ибо это очень крутые штуки для команд.

Разные (но очень важные) улучшения CMS 🔥

О которых я уже рассказывал в предыдущем посте по теме → https://t.me/georgystories/309.

Улучшения плагина Figma to Webflow 🔥

Я затрагивал в одном из своих постов некоторые из изменений (лень ссылку искать, можете поиском по каналу воспользоваться) — всё же плагин очень быстро развивается и мне стоило бы об этом писать чаще.

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

Ставьте лукасы на пост если хочется увидеть стрим про то как можно быстро (и с пафосом) переносить дизайны напрямую в Webflow в несколько кликов 🐶

Что на «повестке дня» у Webflow?

  • Инвестирование в ИИ
  • DevLink (мост между ноукодом и кодом)
  • Комментирование и коллаборация
  • Локализация
  • Особый сюрприз!

Что ж’, сделали передышку, а теперь читаем дальше 😅

Webflow + AI 🤖

Продолжаю рассказывать об обновлениях Webflow с последнего стрима «Tiny But Mighty Products Updates».

Компания делает большие планы на интеграцию ИИ в свою платформу. Выделяют три главных аспекта как ИИ поможет Webflow дать «суперспособности в разработке» для всех людей:

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

ИИ помощник в изучении Webflow 🔥

Webflow осознаёт, что кривая изучения (learning curve) платформы весьма высокая, поэтому они хотят сделать процесс в разы проще.

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

Webflow с этим работает — порадуем начинающих этой новостью!

Одним из решений будет ИИ поиск по документации Webflow (тот же Webflow University), который, помимо самого поиска, будет выдавать ответ исходя из контекста — например, вы можете спросить «как изменить цвет фона?», а Webflow AI даст вам ответ исходя из вашего конкретного проекта, подсвечивая элемент интерфейса 🤩

Закрытая бета ИИ помощника Webflow намечена на первую неделю июня 😮

ИИ помощник в работе с Webflow 🔥

Он не просто будет вам помогать с изучением инструмента, показывая куда надо кликать, чтобы что-то поменять, но и делать некоторую за вас:

  • Переводить контент на другой язык.
  • Оптимизировать текст для SEO.
  • Разную работу с текстом, вроде уменьшения длины, смягчения тона (это мне полезно, меньше хейта, хахахахаха (шутка) и исправление грамматики.

Анонс просто пушка, ждём полноценный релиз.

Закрытая бета ИИ ассистента Webflow будет в июне 😮

DevLink — мост между ноукодом и кодом 🔥

Я рассказывал подробнее о DevLink в обзоре прошедшего Webflow Conf → https://t.me/georgystories/148.

Вкратце о DevLink:

  • Этот инструмент поможет использовать Webflow только как фронтэнд когда вся остальная часть проекта кодится ручками.
  • В начале будет возможность синхронизировать компоненты сделанные на Webflow с компонентами на React — сделав изменение в Webflow, они автоматически перенесутся в код вашего проекта.
  • В будущем будет поддержка других фреймворков.
  • Дизайнеры рады, разработчики ещё больше — мост между ноукодом и кодом становиться ещё меньше.

Сейчас же команда сообщила, что релиз (если это можно так называть) будет в течение следующих недель 😮

Податься на ранний доступ можно по ссылке → https://webflow.com/devlink.

Возможность оставлять комментарии по проекту в интерфейсе Webflow 🔥

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

Кстати, в одном из обзоров расширений для Webflow я хотел рассказать о Flowcheck — это практически то же самое, что и нативная фича от самих Webflow. Что будет с этим проектом не ясно, может они как-то по другому будут позиционировать свой проект, да или вовсе закроются. Но я о нём всё равно расскажу, так что, да, подписывайтесь на канал → https://yt.geor.gy 🎬

Нативная локализация сайтов в Webflow 🔥

Ребята, больше никаких сторонних инструментов вроде Weglot, Polyflow и Linguana не нужно будет — скорее всего. Больше не надо создавать отдельные папки для других языков. Не нужно возиться с reverse proxy ради мультиязычности. И так далее по списку.

Это одна из самых крутых новостей лично для меня, ибо сам хочу перевести свой сайт Georgy.Design на русский и китайский языки, но возиться со сторонними инструментами для этого не хочется — а тут можно всё нативно внутри Webflow сделать.

Рад за всех нас кому эта фича нужна!

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

Нативная интеграция Spline в Webflow 🔥

Ребята, которые обожают анимации, интеракции, 3D и всё в этом духе — возрадуйтесь, ведь в Webflow наконец-то таки завезут нативную интеграцию 3D редактора Spline! Я рассказывал немного о нём в одном из постов, где Spline сами вывезли подобную фичу, но теперь это всё нативно в нашем любимом Webflow.

Пока точно не ясно как будет работать эта интеграция, будет ли она, например, совместима с интеракциями Webflow (IX2) или это просто добавление файлов Spline без эмбэд элемента.

Надеюсь, конечно же, на по настоящему глубокий функционал — мы сможем делать действительно крутой 3D опыт для пользователей в Webflow без знаний кода.

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

Подписывайтесь на мой YouTube канал для уведомлений о стриме → https://yt.geor.gy 🎬

Вот я и закончил обозревать последний стрим про обновления Webflow. Потратил на это больше 2 часов — надеюсь вам интересно было читать посты и узнать что-то новое ☕

Хотя это ещё не всё, ведь есть ответы на вопросы, по которым я тоже сейчас буду постить — ведь и там есть интересные анонсы.

Ответы на вопросы от команды Webflow

Будут ли какие-то обновления по вопросу хостинга Webflow сайтов в ЕС?

Обновления будут, это один из самых больших запросов от сообщества.

Какое у вас видение икоммерса (функционала интернет-магазина) Webflow? 🔥

Точного ответа не дали, но обязательно будут изменения в икоммерсе, особенно учитывая то, что новый CTO в Webflow, это Аллан Лэйнванд — бывший CTO в Shopify.

Когда будет релиз Webflow Logic и Memberships? Будет ли увеличен лимит в 10К пользователей (в Memberships)? 🔥

Тут ребята упомянули предыдущий анонс, что Webflow приостанавливает работу над Logic и Memberships, чтобы сфокусироваться на основном инструментарии. Я об этом сделаю пост после ответов на вопросы. Важный анонс: Logic и Memberships скоро будут доступны всем пользователям без дополнительной платы — Memberships также увеличит лимит в 10К пользователей.

Когда будет обновление интерфейса Webflow? 🔥

«Следите за обновлениями ;)»

Примерные даты релиза интеграции Spline и мультиязычности? 🔥

Georgy.Design

Больше информации в следующем месяце.

Будет ли интеграция Rive? 🔥

Webflow инвестирует много ресурсов в свой маркетплейс и для них важно расширять функциональность Webflow с помощью сторонних решений.

Что на счёт форм?

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

Есть ли планы улучшить rich text элемент, чтобы вызывать кастомные классы в CMS редакторе?

Тот же ответ про смещение фокуса на улучшение существующего инструментария Webflow. Проще говоря, обновления rich text элемента будут.

Когда мы сможем выделять несколько элементов? 🔥

Команда не может пока ничего рассказать, но уточнили, что ИИ ассистент сможет это делать, подразумевая что такая возможность появиться и у пользователей.

Планируются ли улучшения Редактора (Webflow Editor)? Чрезмерно нужна возможность отменить изменения (undo feature).

Больше новостей будут этим летом.

Headless ecommerce, то бишь возможность подключать сторонний икоммерс, но нативно, например, Shopify в Webflow? 🔥

Как я понял, команда делает большую ставку на маркетплейс приложений для Webflow и в этом сегменте, так что стоит ждать новостей.

Есть ли планы по обновлению или изменению интеракций (IX2) на что-то более производительное (тот же GSAP)?

Больше новостей в этом году, пока ничего точного не сказали — компания понимает, и рада тому, что сообщество интегрирует в Webflow всякие решения «ручками».

Будет ли доступен бренчинг страниц (page branching) на всех планах?

Пока что только для энтерпрайза :(

Будут ли другие методы оплаты для икоммерса (важно для тех кому недоступен Stripe)?

Точных планов нет, однако компания делает икоммерс приоритетнее (о чём я до этого писал), так что изменения стоит ожидать.

Планируется ли добавить возможность копипастить анимации с одного элемента на другой?

Как и отмечалось до этого, работа над улучшением основного инструментария ведётся и это основной фокус.

Есть ли планы на офлайн режим?

Таких планов нет, но идея интересная.

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

Если вам понравился этот детальный обзор, то я буду признателен репостом этой статьи и подписки на мой профиль. Также у меня есть канал в Telegram «Георгий и истории ✍🏻» (@georgystories). Ваша поддержка помогает мне делать контент чаще и инвестировать в это больше ресурсов!

Ещё раз спасибо за просмотр!

Если у вас есть вопросы по поводу Webflow или ноу- и лоукод инструментов в целом, то пишите их в комментариях — постараюсь ответить на все.

0
7 комментариев
Написать комментарий...
Smartman

Крутой проект, следил за ним долго, оч рекомендую

Ответить
Развернуть ветку
Георгий Алавердян
Автор

Я, конечно, biased, ибо фанбой, но Webflow действительно пушка — столько возможностей открывается и необязательно знать код (однако это всё равно очень полезно и ещё больше возможностей даёт).

Ответить
Развернуть ветку
Нейрослав Жепетеев

Верстальщики, не глотайте последний кусочек лапши. Кажется, более Дошираков не будет...

Ответить
Развернуть ветку
Георгий Алавердян
Автор

Не очень понял этот нейрокомментарий 🤔

Ответить
Развернуть ветку
Нейрослав Жепетеев

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

Ответить
Развернуть ветку
Георгий Алавердян
Автор

«Честные верстальщики», это какие? Подобные инструменты не оставят специалистов без работы, а вот тех кто развиваться не хочет — вполне возможно.

Ответить
Развернуть ветку
Максим Федоров

сейчас фронт делается всякими UI Kit от фреймворков, там уже больше программирвоание :)

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
4 комментария
Раскрывать всегда