Latest Webflow Features and Updates 2024

There are some exciting What's new for Webflow, which further improve the platform and expand opportunities for website builders. It's the end of Q1 2024 and today we're taking a look at the latest 2024 updates and features so far, and explaining the benefits for Webflow users and agencies.

Visual localization without code: country flags and custom icons for language switching

Webflow now makes multilingualism of your website even easier! With the update, you can switch the language dance without code Add individual images, such as country flags or your own symbols.

advantages:

• Simplified Localization: Images such as flags provide intuitive user guidance and make it easier to navigate to the language versions of your website.
• Improved usability: Visual elements make language switching easier to understand for users of all language skills.‍
• Professional appearance: Individual icons can underline your branding and visually enhance the entire website.

Improved management of API tokens: More control and overview

Webflow introduces improved API token management that provides more control: targeted access permissions, multiple tokens per website, and the ability to name the tokens.

advantages:

• Improved security: Targeted access authorizations minimize the risk of unwanted data access.
• Collaborate more efficiently: Named tokens simplify communication within the team and ensure greater clarity in the project.
• Future-proof integrations: Updating to the new V2 API suite guarantees the long-term functionality of your external connections.

New features in the rich text editor: code integration, text formatting & improved lists

At last! So far, Webflow's rich text element has been updated rather neglectfully. Many of our customers are still a bit disappointed when they get from Wordpress come and are spoiled by extensive functions. Unfortunately, Webflow still offers very little here so far. But now new features are finally coming: Webflow is adding three functions to the rich text editor:

1. Insert code directly into rich text elements
2. Formatting text as code
3. Improved list functions (Bulletpoint List)

advantages:

• ‍Easy code integration: In December, Webflow launched the Code block element published — a standalone element for embedding code on a web page.

• Until now, this has been more cumbersome. From now on, you can simply insert code blocks directly into rich text elements on the work area and into rich text fields of the content management system.

• ‍Advanced text formatting: Text passages can now be formatted as code directly in the rich text editor, making it easier to display source code on your website.

• Improved list management: The editing of lists in rich text elements is optimized with icons for changing the list type (ordered/unordered) and indentation functions (tab/shift+tab) for indenting and withdrawing list elements.

New layout control in the style panel: intuitive design and optimized workflows

Webflow introduces improved layout control in the style panel, providing a higher level of design flexibility. The new features make it easy to create user-friendly and powerful layouts and streamline the design process.

advantages:

• Intuitive navigation: The clearly labelled controls and icons in the layout area ensure easy navigation and quick understanding of the functions.
• Simplified presentation: Text names for complex concepts such as Flexbox and Grid replace icons and make them easier to use for beginners.
• Efficient control: The most important options are centrally arranged and offer direct access, while additional functions can be accessed via a drop-down menu. These updates reduce cognitive load and promote efficient use of features.
• Precise controls for flexbox: The new alignment box and X/Y axis control give both designers and developers precise control over the arrangement of Flexbox elements.
• Optimized grid options: Grid layout control has been integrated into the style panel for improved usability. The new interface continues to offer extensive customization options.
• Fine-tuning the distances: The improved gap control with linear slider and manual input enables precise adjustment of distances in flex box and grid layouts.

Figma to Webflow: Faster website launch with new Companion App & Design System Sync

Webflow improves the transfer of designs from Figma to Webflow with the introduction of a new companion app and the “Design System Sync” feature in the existing Figma plugin. These updates enable streamlined workflow, improved control, and seamless synchronization.

advantages:

• More efficient process: The companion app in the Webflow Apps Panel provides direct synchronization with Webflow, reducing intermediate steps and increasing productivity.
• Improved design system synchronization: The new “Design System Sync” feature within the plugin easily synchronizes components and variables from Figma with Webflow, which guarantees design consistency between platforms.
• Preview and review: Changes to already linked components or variables can be previewed directly in the app. In addition, the CSS adjustments made can be checked.
• Approval process: With the new approval feature in Webflow, changes can be reviewed and approved before they are finally published. This ensures more control and accuracy when deploying the designs (approval queue).
• Scalable design systems: The Companion app and Design System Sync promote the use of scalable design systems in Webflow. This enables consistent and efficient workflows from designs to code and gives designers more time for creative tasks and maintaining a consistent design language.
• Easy to set up: Die Companion app is already included in the installation of the Figma to Webflow plugin from the Figma Community. Users with an existing plugin installation will automatically receive the app after the next plugin authentication or login. After updating the plugin, the Companion app can be accessed via the Apps Panel in the Webflow project. Synchronization then starts via the plugin in Figma.

New options for advanced designs: custom CSS properties and values

Webflow introduces a comprehensive extension of supported CSS properties and values, giving designers more creative freedom and streamlined workflows.

advantages:

• Expanded design options: Support for nearly 90% of all available CSS properties allows for more detailed and nuanced designs right within the Webflow visual interface.
• Reduced custom code requirement: User-defined CSS properties and values reduce reliance on additional code and make the design process more intuitive and efficient.

Webflow Enterprise: Detailed website change tracking via API

Webflow now offers enterprise customers the option to access their website activity logs via a new API endpoint.

advantages:

• Automatic change monitoring: Automatically access logs that provide detailed information about design and content changes on your website.
• Simplified compliance checks: Use Site Activity Logs to streamline audit and compliance workflows within your organization.
• Improved transparency: Stay on top of important changes to your website, including style modifications, text changes, publishing information, and more.

Webflow Enterprise: Work securely with pages as branches and component editing

Webflow Enterprise offers two new features that improve team collaboration and security: page branches and component editing in branches.

advantages:

• Side branches for secure design: Create new pages in isolated branches and complete the entire review process without the risk of publishing unfinished or unapproved pages.
• Component editing in branches: Make changes to global components in a branch without affecting the live version of your website. Test and verify the effects before applying the changes to the entire website.
• Collaborate more efficiently: Let teams securely collaborate and test changes to pages and components before they're published to the live site. This results in a faster and safer design and development process.

Webflow Enterprise: Standalone staging domain for secure testing

Webflow Enterprise now offers the option to use your own domain for your website's staging environment.

advantages:

• Simplified testing: Use your own domain for the staging environment and avoid confusion with the live website.
• Improved security: Separating the staging environment from the Webflow subdomain increases security during the development phase.
• Consistent presentation: Use a single domain for your website throughout the workflow — from development to testing.

Better organization in the designer: grouping component properties

Webflow introduces the ability to group properties of components in the designer.

advantages:

• Simplified navigation: Group related properties to make it easier to navigate the properties window.
• Improved overview: With groupings, you can keep track of complex components with many properties.
• Work more efficiently: Find the properties you want faster and work more efficiently in the designer.

Conclusion: Webflow 2024 — more control and extended design options for optimized websites

Webflow has become one of the best platforms for creating websites. With its intuitive no-code approach and Wide range of powerful features and updates, Webflow allows both beginners and experienced developers to create professional websites without programming knowledge.

If you need professional help creating your website, marketer UX is Germany's leading Webflow agency with over 7 years of experience. Get to know us & arrange a non-binding Consultation. Our Webflow experts are happy to help you implement your vision!