30 new Webflow features you need to know (from Q4 2024)

This video is about 30 exciting Webflow updates from the last few months. You'll learn how variables can now be adjusted more flexibly, what new AI features in Webflow Designer are all about, and how you can use global components for various projects. There is also information about new options with forms, improved Figma integration and further optimizations for a more efficient workflow.

30 Webflow updates at a glance

1. Replace images directly in the asset panel

You can now exchange an existing image directly via “Replace” without having to constantly upload new variants. This saves you time and avoids unnecessary duplicate assets.

2. Improved popover in the asset panel

The popover has been redesigned and now offers more space for future features. For example, you can currently see clearly here how much your image compression has achieved.

3. Variables with breakpoint overrides (modes)

You can finally create variables so that they automatically adjust for each breakpoint. For different device sizes, you no longer have to manually overwrite everything, but create several values right next to each other.

4. Automatic or manual variable modes

You can now decide for yourself whether you want to have your new values applied automatically from a tablet or mobile device or whether you prefer to control them manually. This gives you more control even with individual sections, for example for special color modes such as Light and Dark.

5. AI text editing in the designer

With one click, you can shorten, rephrase, or translate texts into another language. The integrated AI automatically recognizes the source language and suggests suitable variants for you.

6. Create components directly from CMS items

If you have an item such as a card in a collection list, you can now instantly convert it into a component. Webflow automatically sets up the necessary overrides for image and text fields.

7. Shared libraries for components and variables

Create a library and share it across your workspace. For example, you can use a set of brand colors, buttons or entire sections over and over again in new projects without rebuilding everything.

8. Revised Figma-to-Webflow integration

The Figma app for Webflow now better recognizes your components and variables created in Figma. This allows you to import layout and color styles into your Webflow project much faster.

9. New form panel in the designer

If you mark the entire form block, you get a compact overview of all fields on the right. This makes it easier to change or edit individual fields in order.

10. Manage form notifications in a targeted manner

Decide directly in the designer who receives an email notification when a form is submitted. You save yourself the detour via general site settings.

11. Component Style Variants

Create different styles for a single component, such as primary and secondary buttons. Instead of two separate components, you only manage one and simply change the style variant.

12. Page slots for easier page building

Give your customers or team members specific slots into which they can only draw selected components. This ensures a consistent design and prevents wild layout experiments.

13. New text decoration styles

You can now precisely adjust the underlining of your texts. Choose the line width, color, font spacing and make your links or headlines visually more individual.

14. Client Payments as a successor to Client Billing

Webflow has introduced its own payment module. You can pass on hosting etc. to your customers without them having access to your Webflow account settings.

15. Drafts for multilingual subpages

If your site is available in multiple languages, you don't have to launch incomplete language versions right away. Simply set the corresponding subpage to “Draft” until you're done.

16. New variable types for numbers and percentages

In addition to general units such as PX, EM or REM, you can now also create variables for font weights, percentage sizes and other numeric values.

17. Sort variables in the blink of an eye

Simply drag and drop your variables to the desired position in the list. In this way, you can keep track of many values, especially when you have created many values.

18. Revised top navigation in Designer

The main bar has been restructured and looks tidier. Breakpoints are now at the bottom and you can see more clearly in the middle which layer or view you're editing.

19. Slash commands in rich text

Similar to Notion or other Markdown tools, you can now create headings, links or dividers with simple character combinations such as “##” or “-”.

20. Webflow Analytics

If you want to track your website directly from Webflow, you can use the new analytics tool. It shows you page views and user behavior without additional code or external services.

21. Localize styles for different languages

You can make individual style adjustments for each language. This is helpful if, for example, an RTL language (such as Arabic) needs to be formatted differently or if you use special fonts.

22. Rive Support in Designer

In addition to Spline, you can now easily integrate Rive files. Rive allows interactive vector animations that are suitable for unusual scrolling effects or animated icons.

23. AI-controlled dummy content in the CMS

When you create a new collection, the integrated AI helps you to automatically create sample texts. This speeds up your project start and you can immediately see how the layout looks filled.

24. Style pre-tags in code blocks

If you include code examples or snippets, you can now customize the pre-elements directly in the designer. The color scheme, font size or background can thus be defined without custom code.

25. Improved CMS design and publishing logic

You can specifically remove CMS entries from the live inventory without immediately republishing the entire website. This gives you finer control over when new CMS content goes online.

26. Sort projects in the dashboard and display them as a list

So that you don't lose track of numerous projects, you can now display your websites in a list view and sort them by “last updated”, for example.

27. Organize components into groups

Create categories for your components, such as “Buttons,” “Sections,” or “Icons.” This allows you to find what you need faster and keep track of even larger projects.

28. Component preview

You'll see a thumbnail of your component when you hover over it in the sidebar. Especially with many components, this visual preview helps you make a quick selection.

29. Drop shadow filter for transparent graphics

A normal box shadow often only takes into account the rectangular format of PNGs and SVGs. With the Drop Shadow Filter, the shadow is applied to the transparent areas.

30. AVIF format for images

In addition to WebP, you can use AVIF as a format. It offers high compression with good image quality. Webflow automatically converts your images when you want to.