Интеграция с Spline, мультиязычность, переменные и другие обновления Webflow 2023

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

Мы в Div Block Studio пользуемся Webflow каждый день. Поэтому обновления нашего основного рабочего инструмента – это всегда интересно и важно. Ведь можно понять в какую сторону двигается продукт, и как мы можем использовать новые функции, чтобы работать эффективней и выдавать лучший результат.

Ну а теперь, без лишней воды, перейдем к самим обновлениям.

Webflow обновили лого на “острый”, но более современный на мой взгляд. Буква “W” все так же хорошо читается, но уже не выглядит так банально. Мне, лично, очень нравится.

Обновленный UI (и UX, кстати, тоже) интерфейса самого инструмента стал более контрастным, но с мелким текстом и линейными иконками, вместо залитых.

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

Какие-то функции перенесли из привычных мест (кнопки undo/redo, чистку стилей, превью) в совсем другие места без уведомления. Могли же хотя бы changelog сделать и при первом заходе после обновы показывать что куда ушло.

Сами Webflow называют эту функцию – Локализация, потому что это шире, чем просто возможность переводить сайт на разные языки. Локализация включает в себя как перевод страниц на нужные языки (и машинный и ручной), так и возможность адаптации дизайна и SEO.

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

Как минимум вам бы точно хотелось видеть картинки с французским языком во Франции, и с Испанским - в Испании, верно?

С новой фичей Webflow это сделать будет очень легко. Пока что только для Enterprise клиентов. Функционал будет доступен для всех в Ноябре.

3D уже давно вошел в мир веб-дизайна, но еще никогда не было так просто создать какой-то клевый 3D опыт для пользователей так просто, как со Spline.

Если кратко, то Spline – это web-based 3D редактор. Простой в освоении, но в то же время достаточно мощный, чтобы можно было настраивать материалы, моделировать, анимировать объекты, а так же создавать интерактивности.

Webflow запартнерились со Spline, и теперь мы можем очень легко добавлять 3D модели на сайт и крутить их как нам угодно.

Чувствую, как кайфанут Hardware-стартапы)

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

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

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

А кастомные свойства расширяют функционал нативных CSS-стилей Webflow, позволяя добавлять абсолютно любые свойства, которые есть в CSS без танцев с бубном.

Тут Webflow просто поработали над UX своих компонентов, сделав работу со свойствами в сущностях чуть проще. Но это не все.

Теперь в исходный компонент можно вставить блок “Slot”, в который в копиях вы можете добавить вообще любой элемент (кнопку, форму, rich text, картинку, и тд) без изменения родителя.

Пример: Есть у вас компонент CTA секции, в которой лежит заголовок, параграф и этот новый slot элемент. На главной странице в этот slot вы, например, ставите кнопку ведущую на страницу регистрации, а на странице блога, в этот же компонент ставите форму для подписка на рассылку.

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

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

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

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

DevLink позволяет разработчикам экспортировать компоненты Webflow в их среду React. Очень крайне интересная и важная функциональность. По сути дает возможность дизайнерам работать над UI вашего saas приложения или сайта (более частый кейс).

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

Импорт же позволяет сделать наоборот.

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

Webflow быстро двигается в сторону добавления все большего количества функционала для совместной работы. Например, разделения ролей на дизайнера, который собирает сайт, и редактора - который может параллельно править текущий контент и добавлять новый в CMS. Потом добавили возможность оставлять комментарии прямо в верстке.

Теперь же Webflow улучшают функционал page branching и сценария публикации на прод, чтобы несколько человек могли работать в одном проекте одновременно, и безопасно публиковать изменения, независимо друг от друга. К сожалению, такая крутая фича доступна только Enterprise клиентам.

Помимо больших обновлений, под конец конференции мельком упомянули несколько минорных, но не менее интересных фишечек.

В 30 раз подняли лимиты CMS items, и количество Static pages в 5 раз. Будут ли лимиты доступны на всех планах, или только на Enterprise – пока остается загадкой. На странице описания планов этих изменений нет.

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

Еще поизучав новый UI, я нашел еще одно микро-нововведение, а именно:

Теперь находясь на странице условной статьи и выделив заголовок (или текст статьи/картинку) можно кликнуть на специальную иконку и перейти сразу в конкретно эту статью в CMS и отредактировать что нужно. Мелочь, а приятно.

Понравилась статья? Подписывайся на мой бложик тут, на VC, или в телеграм, где я по большей части рассказываю про no-code, публикую новости, и делюсь моментами из жизни студии.

Ссылка на презентацию Webflow conf 2023

Посмотреть другие мои статьи можно тут 👇