Webflow is an exceptional tool for developing custom websites. Unlike tools like WordPress or Wix, Webflow does not offer the option to install plugins on its projects. This distinguishing feature allows for optimized projects that are free from security vulnerabilities.
To add functionalities to Webflow projects, some agencies have developed Chrome extensions. Today, we will introduce you to five of them that provide real benefits for optimizing development time.
1. Finsweet Extension for Webflow
The Finsweet extension adds some very handy features to your Webflow.
It includes the bonuses referred to as "candies":
- Bulk 301 redirections
- Remove breakpoints
- Reorganize colors
- Insert a cookie banner
- Reorganize CSS styles (for the principle of CSS specificity)
- Add global custom code without going into the project's general settings
- Reorganize interactions
- Merge combo classes into one
- Access the page history directly
- Delete classes
- Delete styles
- Disconnect the CMS from a page or section
- Resize your Webflow project vertically
We also have many features for Client-First:
- Add the basic structure to a page
- Add the spacing system
- Generate a fluid responsive layout for your project
- Access the V2 folder system
- Pixel to REM calculator
- Convert PX to REM
We also have access to all the scripts for attributes to integrate them into our project with just a couple of clicks. Lastly, there are useful links to the Webflow agency documentation and the latest updates.
2. Relume Chrome Extension for Webflow
The Relume Chrome extension for Webflow may seem simple, but it is nonetheless very useful. The Relume Library has become a reference for developing projects more quickly by avoiding repetitive tasks.
However, without the extension, when you copy and paste an element from this component library, some classes may duplicate. For example, a component that includes a button may end up having a class named "button 2". To avoid this, Relume has released an extension that allows us to enable "Sync Mode".
This sync mode ensures that the elements you copy adopt the styles you have already created in your project. Thus, we no longer face the issue of having "button 2".
3. Flowbase Chrome Extension
The Flowbase Webflow extension also brings interesting features for more efficient development.
Within our Designer, we find:
- a component library
- an icons library
- Keyboard shortcut manager
- The ability to reorganize your colors
- The option to import colors from a JSON file (Import your colors from Figma to Webflow)
4. AI Alt Text for Webflow by Web Bae
The AI Alt Text extension by Web Bae is a gem for optimizing your Webflow project in terms of SEO and web accessibility.
As its name suggests, this extension automatically generates (using artificial intelligence) alternative texts for your images in the Designer. The tool works perfectly for png, webp, jpeg, but not yet for SVG. With this extension, your website will be SEO-friendly.
Here is a YouTube tutorial to guide you on how to use the tool:
5. GPT-3 Meta Descriptions
Artificial intelligences are very trendy today. Their use improves our productivity. Recently, ChatGPT has been making waves. The Webflow GPT-3 Meta Description extension utilizes AI to automatically generate SEO title and meta-description.
All you need to do is go to your page settings, click on generate Title (or Meta), add your keywords and a description of your page, and the tool will suggest a title or a description optimized for search engine optimization.
A significant time saver, although we still recommend reviewing what the tool provides!
That wraps up this list of useful extensions for Webflow! With the announcement at the Webflow Conf' 2022 about apps in Webflow, will we see similar tools directly integrated into our projects? Only time will tell!
