Introduction
Webflow is a powerful platform that allows you to create stunning websites without coding. But even with Webflow, you might need some extra tools to enhance your web design and development process. In this blog post, I will share with you 5 powerful tools & resources that I use for almost every project, and yet I rarely see being recommended in the Webflow community.
These tools will help you with adding dynamic features, creating micro-interactions, optimizing images, converting graphics, and custom file upload solutions for your Webflow forms. So let's get into it:
1. jQuery builder (by Timothy Ricks):
Built by the great Timothy Ricks, the jQuery Builder is a tool that helps you write custom jQuery code for your Webflow projects with ease.
You can use jQuery to create dynamic elements, on-click events, interactions, and more. The possibilities are endless. From simple code like disabling scroll when a popup is open, to more complicated animations can be achieved with custom jQuery code.
The jQuery builder has a simple and intuitive interface that allows you to write and preview your code in real-time and you can copy and paste it to your Webflow project.
To learn more about what you can do with jQuery and how to do it, I recommend checking out Timothy Ricks's playlist on jQuery.
2. Image compression tool
An image compressor is a tool that helps you optimize your images for your Webflow projects. Optimizing your images can reduce the file size, improve the loading speed, and enhance the performance of your website.
Never use Webflow's built-in image compressor tool if you don't want to lose image quality.
There are many photo compressor tools available online, like Squoosh, Compress JPEG, and more. However, most of these tools either compress an image so much that it loses its quality and sharpness, or just simply don't compress it enough.
In my experience these two tools do the best job:
a. Tiny PNG (good for jpeg & png)
One of the more well-known tools in this industry. It is a web service that uses smart lossy compression techniques to reduce the file size of your PNG and JPEG images. You can upload up to 20 images at a time and download them as a ZIP file.
b. Ezgif (best for everything)
Don't be fooled by the name, although it's a great and simple GIF maker tool. It practically does every type of image editing: convert, crop, resize, rotate, and optimize your images. It also does a great job of converting to Webp and optimizing them.
3. Vectorizer AI
Speaking of images, Vectorizer AI is a tool that allows you to convert your raster images (such as PNG, JPEG, or GIF) to vector graphics (such as SVG, PDF, or EPS).
Vector graphics are scalable, editable, and resolution-independent, which makes them ideal for web design. Vectorizer AI uses artificial intelligence to trace the outlines and shapes of your images and create high-quality vector graphics.
I've never found any other image to SVG tool let it be a site or Figma plugin that does the job so perfectly. As of the time of writing this blog post, Vectorizer AI is free while in beta.
4. Micro-interactions (by Hafiz)
Built by awesome Hafiz, micro-interactions is probably the easiest way to add beautiful buttons with subtle and smooth animations to your Webflow project.
With 35 ready-to-use components, you can easily copy and paste them into your Webflow project with the interactions ready to go! The future of Micro-interactions also looks bright as new features and components are coming!
As of the time this blog is being written, it is completely free to use, however, new features and paid plans are in the works. Follow Hafiz on Twitter (X) to follow its updates.
5. Uploadcare
If your site isn't on the Business, Ecommerce Plus, or Ecommerce Advanced hosting tier, you cannot add a File upload button to your Webflow forms. Even if you are on one of those plans, it still has some limitations, such as uploading large files, uploading from multiple sources, and editing uploaded images.
Although this is frustrating, you have two options:
- use a form builder tool like Tally:Super easy to build forms, but you'll lose the seamless user experience & design as they will have to be redirected to another site.
- Use Uploadcare!With Uploadcare, you can upload files up to 5 TB and use more input sources, including Facebook, Instagram, Dropbox, etc. It is also super easy to set up. You can follow the guide on their website to have it set up.
