Создание сайтов с 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 и мультиязычности? 🔥
Больше информации в следующем месяце.
Будет ли интеграция 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 или ноу- и лоукод инструментов в целом, то пишите их в комментариях — постараюсь ответить на все.