Exploring the Latest Webflow Updates 2023

Exploring the Latest Webflow Updates 2023
Published
Jun 2, 2023

Webflow has been undergoing a series of continuous updates since the start of January, and this positive momentum shows no signs of slowing down for the remainder of the year. The company is set to keep this upward trajectory with the exciting plans for four developer conferences scheduled later this year.

Though not all of the Webflow updates featured in the latest online streamed announcement are brand new, as some were introduced earlier this year, they are significant and deserve a closer look. Webflow seized the opportunity of this update announcement to shine a spotlight on these tiny but important updates, capturing the audience's attention and emphasizing their relevance.

Thus further on in this article we will categorize the announced updates in three categories: recently added ones, May updates and updates coming soon this year!

Recently added updates

In our fast-paced lives and with limited free time, it's common to become unaware of our surroundings, particularly when we're engrossed in serious work and feeling the pressure of meeting deadlines. Thus sometimes important news might escape us. 

That's precisely why, even if you happened to overlook some of the recent updates that were rolled out since the start of this year, Webflow leveraged this announcement as an opportunity to provide a brief introduction to those updates alongside introducing the new ones.

Here are the recent Webflow features and enhancement updates launched from the beginning of this year in order:

1. Enhancements to page branching

Webflow has introduced new enhancements to page branching, providing more power, control, and visibility to large teams. 

The enhancements include the below abilities:

An image showing page branching new enhancements features
Page branching new enhancements - resolving conflicts before merging

These Webflow updates aim to facilitate collaborative website development and allow teams to work on the same site simultaneously. Enterprise customers and Enterprise Partners can access these Webflow features.

2. Webflow Editor improvements for large sites

Webflow has introduced significant performance improvements in their Editor, specifically for large websites, providing a smoother editing experience. 

Some of the improvements include:

  • Faster project loading of up to 15x
  • 5x reduced RAM usage for editing and accessing collection data
  • Memory pressure decreased up to 6x
  • 86x lower bandwidth requirements.
Webflow image showing editor improvements for large site customers
Editor improvements for large site customers

Additionally, minor UX updates have been made to filtering and browsing, allowing to refine items in a collection, and paginate through it once 100 data items have been pre-loaded.

3. Google analytics integration updates

Webflow earlier this year updated its Google Analytics integration to accommodate the upcoming transition from Universal Analytics to Google Analytics 4. Users can now only use Google Analytics 4 measurement IDs through the integration. 

An image showing Google Analytics updates in Webflow
Updates to Google Analytics

Those with Universal Analytics measurement IDs will be prompted to replace them, while those with Google Analytics 4 measurement IDs will need to re-save and publish their sites for continued tracking. Toggles for IP anonymization and gtag.js were also removed, as they are now mandatory configurations in Google Analytics 4.

4. Setting a default Workspace for your dashboard

Users in Webflow now are now able to set a default Workspace, making it easier for agency members and freelancers to navigate between different teams. You can now simply specify your preferred Workspace and it will be opened automatically when accessing the dashboard. 

an image showing how to set up default workspace in webflow
Setting your default Workspace is now available

On the other hand, design improvements have also been made to the dropdown menu for switching Workspaces, ensuring a more organized and streamlined experience.

5. Improvements to variable fonts

Another update Webflow launched is regarding variable fonts. Designers can now animate custom axes of variable fonts, giving them more creative possibilities, and have easier access to custom fonts.

an image showing webflow fonts
New font updates in Webflow

Moreover, a new indicator makes it easier to distinguish between variable and static fonts, and designers can access variation controls more conveniently. Not only that but customization of variations can now be done in one step, eliminating the need for manual addition. 

6. Choose your workspace profile

Transitioning from the previous format to a more streamlined one, Webflow has introduced an update that allows users to choose their Workspace @handle and profile URL. This change provides improved branding for profiles and gives users direct control over their URL selection. 

An image showing  how to Choose your Workspace profile @handle and URL
Choose your Workspace profile @handle and URL

Users can navigate to the Workspace settings page and utilize the "Workspace profile URL" field to pick any available URL of their preference. Old URLs will automatically redirect to the new format, ensuring seamless access to the user's public profile.

7. Use CMS data in custom HTML blocks

After many user requests Webflow introduced the update that allows users to utilize CMS data in custom attributes, making custom code and HTML attributes even more powerful. This enhancement enables designers to bind CMS data fields or component properties to custom attributes or element IDs, reducing the reliance on custom code for dynamic data.

Utilize CMS data in custom attributes

Users can now improve site accessibility, control integrations or widgets that use HTML data attributes, customize page styling based on field values, and more. 

8. Support for dotLottie animation files

DotLottie animation files are now supported in Webflow. This allows users to add Adobe After Effects animations to their Webflow sites with smaller file sizes and faster load times. With this integration, users can create interactive experiences by connecting these animations to triggers such as page load, page scroll, and mouse movement using Webflow Interactions

9. Site activity log filters

The introduction of site activity log filters facilitates large teams to find what they need quickly and  more efficiently. With these filters, Webflow Enterprise customers and Enterprise Partners can customize the activity types they want to see, such as classes, custom code, and branch events. 

An image showing how to quickly find what your looking for through filters in activity log in Webflow
Quickly find what your looking for through filters in activity log

Users can also filter by author, viewing results from all authors or specific individuals. Additionally, class modified events now include a clickable "list" icon that provides quick access to elements and pages impacted by class changes. These enhancements streamline the process of tracking and resolving site issues, improving collaboration and productivity for teams.

10. Wrapping elements in div blocks

What previously had to be done in multiple steps, webflow with the introduction of new keyboard shortcuts and canvas context menu options now allows designers to wrap elements in a div or link block much more easily.

Wrapping div blocks is now easily accessible

11. CSS dynamic viewport support for new units

To provide designers with more flexibility when creating responsive designs for mobile browsers, Webflow introduced new CSS viewport width and height units.

New CSS viewport height and width units

These new units (small, large, and dynamic) address the issue of dynamic toolbars on mobile devices, ensuring that fixed elements are not cut off and improving the overall visitor experience. They can be utilized in the Style panel on the Webflow Designer. 

12. Figma plugin enhancements

Addressing a common request from the community to fix class naming, Webflow did that with this fix of the Figma plugin. The update improves class naming when copying and pasting elements from Figma to Webflow.

What previously caused  duplicated classes when copying and pasting elements from Figma to Webflow, leading to a cluttered class system, now users can paste without worry of that. They can paste using Webflow classes or paste updating Webflow classes. Note that clipboard access is needed to be given to Webflow for the first paste.

13. Introducing text stroke styling

Text stroke styling is a much needed feature eliminating the need for designers to use custom code or third-party plugins. The feature allows users to easily add an outline or border to their text elements, offering more flexibility and streamlining their design process.

An image showing how to Add an outline to your elements through text stroke styling
Add an outline to your elements through text stroke styling

14. SSO authentication improvements

Catering to the needs of large enterprises, SSO enhancements have been made for teams with multiple workspaces, teams with multiple email domains, and workspace-level authentication for improved security.

15. Usability updates to Components

The new changes made to components aim to improve the editing experience by reverting to a previous behavior that is smoother and more intuitive. Users can now double-click to edit the main component and edit component properties directly on the canvas. 

a webflow interface picture showing the usability update to components
Improvements in updating your components more easily

Clearer labeling and easier menu navigation have also been implemented. These Webflow features now made it easier to update components without unintended modifications.

16. Nest collection pages within folders

For more control and managing of the CMS content, Webflow introduced this update allowing users to nest Collection pages within folders for better URL control. This feature enables users to optimize their SEO by publishing Collection items within a URL subdirectory. 

Collection items at URL subdirectories
Serve collection items at URL subdirectories

Users can also now prevent template pages from publishing for specific Collections and duplicate Collection structures to speed up content library creation. 

How to duplicate a collection in Webflow
Duplicate existing collections

Webflow updates during May

This list includes Webflow updates that were rolled out during the month of May before the video announcement event!

1. Performance improvements for Designer

Targeting large websites with 50 pages or more, this Webflow update provides improvements on the speed and responsiveness of various Designer functions, including opening the Designer, switching between pages, navigating the Pages panel, Element settings, Navigator, and Style Manager, as well as working with grid layouts. 

an image of the new faster designer on Webflow
A faster designer, especially on large pages

2. Quickly search for swatches

Searching for swatches in the style panel with this update is now quicker than ever. When selecting a color in the color input, a dropdown list of swatches with their corresponding color and name will appear, making it easier to find and choose colors. 

search easily for swatches on webflow
Search for swatches in your style panel

Moreover, users can preview color changes in real-time by hovering over the swatches on the canvas. 

3. Remove yourself from a Workspace

A much requested feature that even got mentioned the first in order in the video announcement, allows users to remove themselves from a Workspace without needing assistance from an admin or client. 

Leave your Workspace without admin assistance

To do that you can access the Workspace dropdown menu in your Dashboard, click on "Manage Workspaces", select the ellipsis for the specific Workspace, and choose the "leave Workspace" option.

4. Components can now be used in collection lists

Dragging components into Collection Lists and connecting CMS data to component properties is now possible with this Webflow update, enabling the reuse of common design patterns across multiple instances. 

Use components in collection lists
Use components in collection lists

Not only that but now elements inside Collection List items can also be converted into components, similar to any other elements, enhancing the efficiency of designing and syncing layouts throughout the website.

5. Private staging

Enhancing privacy and security for reviewing site changes before launching them publicly is made possible with this feature that allows users to restrict access to their webflow.io staging domain to logged-in users within their Workspace.

How to turn on private staging in Webflow
Restrict access by enabling private staging

This webflow update is particularly beneficial for Enterprise customers who can now ensure that only authorized team members have access to the staging environment. 

6. Combo class support for Figma Plugin

Webflow recently also launched combo class support for their Figma plugin, addressing a top-requested feature. This update allows users to automatically create Webflow combo classes when pasting Figma designs into Webflow. To create combo classes, users need to name their Figma layers with both the class and the combo class separated by slashes. 

create combo classes automatically
Combo classes created automatically

To illustrate for instance, naming a Figma layer "Primary Button / Dark '' will generate the Primary Button class and the Dark combo class in Webflow. 

7. Showcase projects from a client’s Workspace 

Previously, it was challenging for Webflow Experts to showcase their work on Made in Webflow and their Webflow profile when the site belonged to a client's Workspace. With this update, site owners can now tag agencies, freelancers, and other contributors to their site's Creator Credits.

Tag agencies, freelancers, etc to your site's Creator Credits

By doing so, these creators can showcase the work on Made in Webflow and their Webflow profile without needing to make a copy of the site to their own account. Site owners, Workspace members, and guests can add up to three other Webflow users or Workspaces to a site's Creator Credits via the General Settings tab. Tagged creators can showcase the site even if the site owner doesn't showcase it on their own account.

5 big upcoming updates

Webflow announced 5 big updates coming soon this year, and though we were expecting some of them, there is much to be excited about. This time we will just mention them in passing, as we’ll be making another in depth article later this year when they get launched!

Here are the 5 Webflow updates we are looking forward to during this year:

  • AI investments
  • DevLink
  • Commenting & Collaboration
  • Localization
  • Spline Integration 

Conclusion

Webflow has been continuously updating its platform and has exciting plans for four developer conferences later this year. The recent updates, although not all brand new, are significant and deserving of attention. 

They range from enhancing collaborative website development to improving editor performance, Google Analytics integration, workspace management,  and more. The last upcoming updates announced are something to be looking forward to, and are keeping us all excited. 

Webflow's commitment to optimizing the user experience is evident in these updates, providing increased power, flexibility, and efficiency for designers and developers.

Lastly, if you are still a beginner in the Webflow roadmap of web design and development, you can check out the Webflow 101 course for an in depth introduction to all the ins and outs of web design, and also make sure to check our blog for the latest Webflow news and updates!

Most read articles:
7 Figma Plugins for Icons – Community Proven
12 Awesome Agency Website Templates for 2024
Weekly Webflow Template Inspirations #1
Thank you! Your submission has been received!
Check your inbox and confirm your email!
Oops! Something went wrong while submitting the form.
Share This

Other Insights

Amazing Webflow
templates 🤩