WarmdevsBlog
Technology

Webflow Updates for November 2023: What to expect?

5
(
5
 votes)

Intro

Here at Warmdevs, we are as excited about new Webflow updates as any other agencies that have been working with this platform for years. It has been our primary tool for building professional, functional, custom-designed websites. So when the Webflow team announced a conference about upcoming updates, we had to watch. Here’s a comprehensive rundown of everything about the new features that are coming to Webflow either next month or earlier next year, based on what we learned.

Spline Integration

Yes, Webflow will include in its editor native Spline integration. This means you’ll be able to create 3D animations just as easily as working with 2D in the Designer. How awesome is that?

If you are unfamiliar with the topic, Spline is a 3D editor on the web that has been gaining popularity over the past year. Integration with Webflow means that 3D animations can be created directly in the Editor using the same principles as 2D, eliminating the need for separate expertise in 3D or coding knowledge. At least, this seems to be true for simple integrations, as the presentation didn't clarify how extensive the editor's capabilities are. 

It is also unclear for now if there's any possibility for performance optimization, which is a crucial aspect of 3D development. The question now is whether it will be integrated into Webflow without access to optimization. Therefore, it seems to me that complex, unique 3D solutions will still need to be done manually. However, this significantly lowers the entry barrier and development time for simpler elements.

Native Localization

Localization was always somewhat of a pain to incorporate into the website built on Webflow, as a developer practically needed to create a separate version of the site just to make it in another language. Not the most complicated work for a professional, but certainly an unnecessarily tedious and time-consuming one.

Well, it will continue no more! With the new updates, the Webflow team plans to introduce the feature of Native Localization and AI translation right in their web builder, so you won’t have to do any switches. You’ll be able to do everything in one place while manipulating separate sections of use the text and switching between the original version and the translation. Of course, we would advise you to carefully inspect translations made with AI, as it can be nothing but faulty. Still, the feature itself is a hidden gem that will speed up the development process — something Enterprise users were already able to attest to, according to the conference presentation.

CSS Variables

The team at Webflow also introduced us to the integration of CSS variables into the platform. The power of CSS variables lies in the fact that many style values will be repeated during website development, such as primary colors, default button margins, and so on. In the past, in Webflow, if, for example, a color needed to be changed, it meant going through the entire site and manually changing it in all places (the smart use of classes partially mitigated this, but the way they worked in Webflow wasn't an ideal solution).

In web development, entire token systems are created (similar to Tailwind), allowing developers to assemble styles from ready-made blocks. If the design was also created using such a token system, it means a greatly simplified development process for the developer. I would equate this to painting a picture from scratch using classes as before and assembling a mosaic by numbers with a well-configured token system. Therefore, it's cool that in Webflow, there is now the possibility to work according to an accepted standard. This opens up new possibilities for development, such as light/dark themes, enlarged font mode for people with poor vision, and so on.

Custom CSS Values

Another neat feature that the developers will appreciate, as it is a long-awaited one — at least among our devs who got excited.

The thing is, In CSS, hundreds of different properties for various cases arise during page styling. Naturally, not all of them can be accommodated in a visual editor, so in the Webflow visual editor, only the most common and frequently used ones were available, and for everything else, custom code had to be written. In theory, this should have been sufficient for simple pages, but it wasn't quite so in practice. We talked to a few other developers and found them thinking that none of them had ever worked on a Webflow project where custom code wasn't used. Most of this code is always CSS, so the fact that all styles can now be kept in one place (instead of dividing them into custom code/visual editor) should greatly simplify the development process, code review, and debugging.

This is especially noticeable with tokens on larger projects, where due to the large number of elements, it's easy to get confused about which code corresponds to what, especially considering that in Webflow, there are no options to organize it neatly. So, this should significantly ease both the later stages of development and the support for larger projects.

Contact us

Components

Components that are introduced to the platform are essentially rebranded symbols that previously had some new features imported into them. Now working with them in the Designer has become a bit more intuitive, especially because the Webflow team have added slots.

Slots are also a pattern that has long been a standard in various templating technologies in the web, and it's great that it's now available in Webflow as well. It often happens that the same element can be used on different pages, and to avoid repeating it, you can create it as a component. Any changes made to one component will be applied to all others.

However, problems arise if, for example, on one page the component needs to contain a form, and on another, a calendar. In Webflow, this used to mean either a lot of complicated settings for visibility or giving up on components and doing it manually, neither of which is very convenient for future client edits. Slots allow you to specify a place in the component where something can be placed. In other words, the component doesn't know what exactly will be there, but it marks a spot for it. We can then choose what will be inserted into this slot. In web development, you can even insert another component with its own slots into a slot, which opens up a lot of possibilities.

Whether this can be done in Webflow is not clear from the presentation, but the groundwork has been laid, and that is certainly a step in a promising direction.

Marketplace Apps

In general, this is the same functionality that was previously available on third-party platforms, but now there's no need to leave the Designer for their integrations. From experience, these applications are still limited in what they allow you to do, but they simplify working with basic cases. It still doesn't offer as much control as custom solutions (in fact, it takes some control away). In exchange, however, we get a more understandable process for the client, faster development of basic features, and a lower entry barrier, which is not half-bad.

API

So Webflow is relizing three new APIs as developer tools: Components Designer APIs, Variables Designer API, and Localization APIs. Each of them will be able to aid with corresponding tasks in the development process.

For the end user, the most exciting aspect of Webflow here is probably the Designer API. This means that native extensions for Webflow will now emerge, simplifying tasks (such as the shadow or table generators demonstrated by FinSuite). When a platform opens up broader access to its components, it's always a positive development. It allows the community to enhance the product hands-on, rather than waiting for the platform to do it themselves (which, in the case of Webflow, typically takes a long time).

Figma to Webflow

One of the Big announcements, in our opinion, was of course an introduction to “Figma to Webflow.” This is a feature that will bind your Figma designs directly to your Webflow workspace and, in this, is supposed to significantly simplify the workflow, as many custom designs initially are created in Figma.

To say the feature seems to be awesome is to say nothing. However, from what we can gather, this currently works best only in a controlled, laboratory-like environment and will need a lot of polishing before it will be ready to be shipped to the end-users. In other words, the design must be created from the outset with the intention of importing it into Webflow, and not all elements can be implemented this way.

However, regarding the synchronization of tokens and variables, that's an exciting feature being integrated here. Again, it's a feature that has existed in web development for a while and greatly simplifies the development process. Essentially, it takes away even more things developers must remember and automates them. It will, of course, only work with designs that were initially created with this integration in mind, so it means more work for the designer.

Final Thoughts

Well, does the future look promising, or does it look promising? In all seriousness, there is some skepticism involved when hearing such news. On the one hand, many exciting plans are being laid out before you, while on the other, there is still a lingering question of whether all of them will reach the final stage. Most of these features will be released in November 2023, while some of the more complex ones are planned for early 2024.

However, there is always a note of “things might change along the way.” And knowing how many previous Webflow features ended up stuck in beta limbo or were brought to a somewhat functional state and then forgotten for years, like E-Commerce, it’s probably best to keep the cool head along with the excitement.

It's clear that the Webflow team has shifted their direction a bit. They've realized they can't cover every use case independently and started adding lower-level features that give developers more flexibility. It's also evident that they're gradually catching up with the rest of the web development world by adding features that have long become standards, such as slots and tokens. This certainly seems encouraging.

Look at our list of Webflow web design services.

FAQ

Why are updates important in Webflow

Updates in Webflow are crucial as they introduce new features, enhancements, and bug fixes. These updates improve the platform's functionality, provide users with more design possibilities, and ensure a seamless experience. Staying up-to-date with Webflow updates allows users to leverage the latest tools and technologies for their projects.

How often does Webflow release updates?

Webflow releases updates regularly, with both minor and major updates occurring frequently. Minor updates, such as bug fixes and small feature improvements, may happen more often, while major updates with significant new features are typically released regularly.

How can I stay informed about the latest Webflow updates?

To stay informed about the latest Webflow updates, you can visit the Webflow blog, follow their social media channels, and subscribe to their newsletter. Additionally, within the Webflow dashboard are notifications and announcements informing users about recent and upcoming updates. In our blog, we also post articles about new Webflow features.

How can I stay informed about the latest Webflow updates?
How can I stay informed about the latest Webflow updates?
plusplus activeminus

To stay informed about the latest Webflow updates, you can visit the Webflow blog, follow their social media channels, and subscribe to their newsletter. Additionally, within the Webflow dashboard are notifications and announcements informing users about recent and upcoming updates. In our blog, we also post articles about new Webflow features.

Was this article helpful for you?
Please, rate it
5
(
5
 votes)

Let's scale your business today

Schedule a consultation with our representative to talk about development services with no obligations from your side. Take a part in a professional discussion that will provide you

A reply from our manager within 24 hours
Eye icon
Approved time of a meeting convenient to you
A folder icon
WA signed NDA provided the project information needs to be confidential
Graph icon
Defined project scope, specifically the requirements, deadlines, and cost estimation