Webflow new features, explained.

I attended the 2023 Webflow conference, where several new announcements were made. While there is already a lot of information available, there is even more beneath the surface. In this document, I will provide a detailed analysis of the announcements and explain their implications for web development professionals, such as us at Eldur Studio, as well as for anyone with a Webflow website, regardless of their technical expertise.

New branding and the leadership’s vision: a tool for Developers

Let's start with something that may seem superficial, such as re-branding. During the conference, Webflow's Founder and CEO, Vlad Magdalin, introduced the new Webflow branding. The square represents HTML, the left curve represents CSS, and the / represents JavaScript. Together, they symbolize the updated mission of Webflow: to empower everyone to be a developer. This new positioning has already been announced, but the new branding, which affects both the corporate website and the platform UI itself, really solidifies it.

What it means for Webflow users: Webflow is growing up. This is a 15 year old company with a ton of top VC investment that is eyeing IPO and clearly positioning themselves as the professional solution for developing the front end of enterprise grade websites, and to some extent apps. The pricing has been going up, but so has the power of this platform and its distribution (self-reported 2M sites and 1% of the internet)

What it means for Webflow Pros: Webflow is officially transitioning from a tool for Designers to a tool for Developers. They are getting more technical and of course it’s time to watch some new training videos and update the Webflow logo. While I’m not personally too keen on the new branding, most people I talked to liked it a lot, and I love that they did it all in-house. I just wish every new CMO didn’t have to rebrand to prove their worth…

More Info:

https://webflow.com/blog/meet-the-new-webflow

Spline Integration: boost your websites with 3D animations

More info: https://spline.design

Components and Variables to scale for the enterprise customer

Webflow has been investing heavily in "components". These components allow for the creation of websites with reusable yet dynamic elements, enhancing the flexibility and power of the design process. For example, you can have a product card that automatically updates for all individual products, while still following a completely custom design. This approach simplifies complex designs and offers the consistency and scalability that traditional no-code website builders have never provided. It also eliminates the need for expensive and time-consuming custom development builds.

Webflow wants users to build with components, and it’s making them more useful and powerful by introducing "variables". Think of variables as style guides that define rules for spacing, size, and colors that can be applied to any style. If you make a change to a variable, that change will be applied globally across all components and throughout the entire website. This feature closely resembles what Figma, a company valued at $20B, has recently launched.

What it means for Webflow users: Components and variables are technically complex features, you don’t need to know what they are. But as you talk to your designer / developers, it’s wise to start asking: where can we use components on the website to reuse elements in a smart way? Are you creating variables for the style guide? This will help you hire the right people and enjoy a website that truly scales.

What it means for Webflow Pros: if your workflow is Figma-to-Webflow, this update is for you. If you keep your design system in Figma and you have started to use variables there, you should be over the moon. On the other hand, if the only components of your builds are nav bar and footer, it’s time to evolve how you build sites in Webflow. On one hand, you are missing out the power of components and should blame yourself for every little manual change you have to repeat across pages, on the other hand, components make the project more complex and require proper planning. Time to watch some videos and get up to speed on the best way to use these new tools. If you are a template / UI kit developer… I feel for you. You’ll need to update everything!

More info: https://webflow.com/feature/variables

Native Localization

This has been a long-awaited enterprise feature. While it is possible to manually translate or use third-party translation tools to localize a Webflow site, these options are often expensive, difficult to implement, and not always reliable. Localization is often a dealbreaker for enterprise global sites, and I have encountered numerous potential customers lost due to this limitation, particularly in Europe. Fortunately, Webflow has finally launched a robust native localization feature. This is a significant development, and I will delve into its benefits in more detail. Feel free to skip ahead to the TL;DR if you prefer.

• Scalability: Instead of having multiple copies of pages or relying on third-party integrations, Webflow allows for one version of the website in the main language, which can be easily translated into an infinite number of languages.
• Better SEO: Webflow creates a sitemap for each locale, sets the correct language in browser settings to aid with indexing, and allows customization of meta tags for each locale.
• Automatic URL structure: Webflow follows SEO best practices by using subfolders for localization (e.g., scalapay.com/it/) instead of subdomains (e.g., it.scalapay.com). This structure is automatically managed by Webflow, eliminating the need for manual folder creation. Geo-redirect is also handled by Webflow, automatically redirecting customers to the appropriate language version of the site. This allows for faster page publishing and eliminates the need for third-party services for redirects or URL rewriting.

• Localized Collections: Each element in collections is automatically localized. If an integration is not available in a specific locale, it can be marked as a draft.
• Included machine-generated translation: Webflow uses a white-labeled vendor that utilizes AI-powered translation. The translation is fast and quite accurate, and adjustments can be made manually. This reduces the need for translation agencies. Webflow is also working on integrating with TMS (Translation Management Systems).
• Custom styles and images: Webflow allows for customization of styles and images based on specific locales. For example, using a smaller font for German to avoid long paragraphs or using different images for specific locales. Note that an Enterprise plan is required for this feature.
• Self-sufficiency: Editors can easily translate content, change images, and make other adjustments without causing any issues.

What does it mean for Webflow users: TL;DR: SEO best practices, manual and machine-generated translations, and customizable components for each locale. Bulk localization of CMS items will be also supported soon. If you ever needed to localize your website, Webflow is now equally or better suited than other web builders, and makes it substantially easier than translating custom build. No plugins, no extensions needed.

What does it mean for Webflow Pros: unlike other times when Webflow launched a feature that seemingly replaced a third party integration (notably, native Memberships and Memberstack), this feature was properly scoped and released at the right level of maturity. It is still an open ecosystem, with other localization services building their own competing solution on the marketplace, but I am moving all my multi-language sites to native localization and so should you, unless you need support for Greek or Chinese characters, which sounds in the roadmap.

More info: https://webflow.com/localization

DevLink and React Components

DevLink was launched at the last conference as the missing link between Webflow and "traditional" front-end developers. Let's face it, "Webflow developers" are a unique group, usually consisting of designers who taught themselves HTML, CSS, and JavaScript, or developers who were tired of writing repetitive code. Although Webflow generates real code, very few people actually export that code because the hosting and CMS features are such significant benefits of using Webflow. This means that while your Webflow project is self-sufficient, it can also be somewhat isolated. DevLink aims to bridge this gap by allowing Webflow to communicate and synchronize with an external development environment, providing the best of both worlds. At this conference, Webflow demonstrated their continued investment in the platform, not just for Enterprise customers. React developers can create dynamic components and sync them with Webflow, allowing configuration properties to be pushed back into the Designer.

What does it mean for Webflow users: There are really 2 use cases for DevLink:

1. Teams who want to reuse parts of their marketing site in their other apps

2. Teams who want to build advanced components in Webflow is a scalable way (e.g. charts powered by live data from an API).

If this is you, rejoice!

What does it mean for Webflow Pros: if you don’t touch code or React, this feature is not for you. However, if you pride yourself of not being afraid of coding inside and outside Webflow, this feature can unlock interesting projects. At Eldur Studio we haven’t used it yet as it didn’t look out of beta, but the new ability of importing react components and hosting them in Webflow mad us rethink some painful custom code solutions to integrate tricky libraries like chart.js.

Webflow Apps

In a strategy closely resembling Shopify’s (indeed, Webflow just hired ex Shopify leader Aland Leinwand as CTO) Webflow introduced "apps" in a public marketplace, providing access to third-party tools within the designer experience. The availability of these apps is made possible by the new Webflow API, which allows developers to manipulate various aspects of the platform.

What does it mean for Webflow users: integrations were already available in Webflow, but this is great news as it will accelerate the speed of new features and integration available for Webflow by enabling third party developers. Try the new Hubspot app, and browse the marketplace for surprising utilities in analytics, e-commerce, and more advanced use cases. Definitely a space to keep monitoring as more apps will enter the marketplace.

What does it mean for Webflow Pros: The marketplace has been in a very closed beta for a while and I was a bit concerned around the true support for developers by Webflow. That said, the demand is there for Webflow power-up, and success stories like Jetboost and Memberstack have really enabled devs to push the limits of Webflow by building proper apps on it. With this announcement, Webflow has put the money where the mouth is: there is a dev advocate team, and the early developers I met at the conference were extremely friendly and enthusiastic. I personally think this is a great strategic investment for Webflow and a powerful differentiator in the long run, plus, a potential business opportunity for pros who have scratched their own itch against some Webflow limitations and want to enable others in the community.

Of course, you should also browse the marketplace and get your hand on as many apps as you can. I recommend Figma to Webflow (not yet on the marketplace but the Conference Workshow had a wonderful demo), NoCodeLytics, and Whalesynch. If you’re looking to get more productive and reduce the amount of custom code in your projects, the Dev Tools category is just for you!

Collaboration Features and Enterprise Capabilities

Lastly, Webflow unveiled new collaboration features, including comments, approval workflows, and the graduation of beta features like branching, which brings proper version controls and approval to Webflow. These features cater to enterprise needs and have been in development for some time and really enrich the value of the pricey Enterprise plan.

Easter egg: the DOM element

With the new Designer API, Webflow “accidentally” launched a new element in the Designer, called “DOM”. This is very technical so if you are not a Webflow dev, just know people who develop everyday in Webflow are very excited as this element unlocks some new capabilities that were traditionally very pernicious (like adding images inside H1) and offers unparalleled flexibility in the way you build a project. For those interested in learning more, I’m going to refer to Timothy Ricks’ explanatory video.

So… Should you use Webflow for your website?

I have wrote in the past about Webflow vs Wordpress (vs other CMS, too!) and the question is: is my recommendation changing after what has been released this year?

Webflow has been a contender for a long time but here are some use cases for where it becomes the top choice:

• You want your website to look exactly like your Figma designs
• You want a unique look with cool visuals and native animations that work on mobile and desktop, without making the whole thing painfully slow
• You need to easily translate your site in multiple language and SEO is very important to you
• You design in Figma using a design system
• You don’t want to hire front-end engineers for your marketing website
• You want a wide range and number of people to make changes to a lot of things without breaking the website
• You are tired of hosting your website and waiting for an engineer to publish a new version
• You have more than 100 pages on your website and you need to make changes at scale
• You want an integrated solution for your marketing website: back end and front end control
• You want a no-code solution because your marketing team needs it (or you can’t afford a “code” one), but can’t stand any more compromises for functionality.
• Your web presence is important enough to you that $500-1000 per year is a no-brainer (especially if you don’t need to hire dedicated resources)
• You want to be able to synch and export react components to other project, or vice-versa.
• You value a solution that easily integrates with a lot of third party apps

Thanks for reading, please share if you enjoyed, and @ me on X fka Twitter (@ubervero) or LinkedIn with questions or comments!