FontDiscovery 🖼️ 129: Save Webflow CSS ➯ File
Our Latest Free Mini Tool!
Hope you had a fantastic week! This week I have been doing a lot of marketing work, working with several cool newsletters to get the word out about startup journey and Typogram!
Another thing I have been working on is moving our build in public posts to it's new archive on our blog - that way, we can start getting some benefits from the beach engines.
Still, we love using Webflow’s visual style editor - so we figured out a solution bringing us the best of Code and No-Code world: using Webflow as a pilar for Typogram’s design system.
My co-founder wrote about the journey of developing it in our buildinpublic newsletter. This week, I want to share it here in case anyone is also working with Webflow for their development. This plugin could be useful for your work.
When I found Webflow, it completely changed the game of web styling for me! It works as a visual CSS editor that feels a lot like design apps. I started using Webflow for all my CSS editing, and it’s been fantastic. It’s the best of both worlds: I get to be creative like a designer, but still have the control of a coder.
Leaving Webflow is indeed an option, but it’s not an easy decision to make. While I can export the code, the process is a one-way street. There’s no way to import the code back into Webflow, which means I would permanently lose the ability to edit the CSS using that visual editor.
The main drawback of this hybrid approach is the time-consuming and labor-intensive exporting process. Each time I update the CSS, I have to go through several manual steps:
Click on Prepare the ZIP file.
Locate the CSS file to copy
Rename the file
Paste it into a nested folder in my code repo
This process is not only tedious but also prone to human error. Moreover, the cumbersome nature of this workflow slows down the cycle of development, making it less efficient. The old magic of Webflow is to make a few changes, click on the publish button, and boom! The CSS change is live. It encouraged me to finesse the styling with my designer instinct, resulting in better work.
I reached out to AI for some help and shared a few of my ideas to solve this problem. After a bit of back and forth, I came up with a handy code snippet that can grab the innerText from the export code overlay on Webflow and save it to a local file. It uses the File System Access API to get a file handle to the CSS file in my code folder, and then I can repeatedly save updated CSS into it.
These sketchy little code snippets, run in browser developer tools, did the trick! Well, that is as long as you ignore the big red warning from Weblow dev team.
I want to share this approach with fellow designers and developers, but I know not everyone will be comfortable ignoring the warning or feel at ease opening the developer console to run code. So, what’s the best way to share this solution?
I look at the button where I click publish my code, and right above that, it is a row of Chrome extension icons — that gives me an idea to wrap the code into a handy Chrome Extension, which essentially will replace the Webflow’s publish button for me from now on.
Introducing Chrome Extension — Save Webflow CSS to File
I recorded a little demo to showcase the true power of this handy little Chrome Extension. I am “dogfooding
” it and using it to develop the CSS styling for itself! I created a simple design page on Webflow, and use this tool to export CSS and override the style.css file in my local Chrome Extension development folder. And then, I made a few changes to the border-radius, and font-weight, use the extension to export CSS to the target file, and boom! the Chrome Extension got the latest styling after I opened it again. Pretty neat, right?
Demo of Chrome Extension: Save Webflow CSS to File, watch it on Youtube.
I just launched it in Chrome Web Store! If you like my work, please give me some support by:
This helps more people to find the extension and saves people’s time on their future projects!
1 Eating your own dog food or “dogfooding” refers to the practice of using one’s own products to develop that product itself, to improve its quality, and ensure it meets the needs of its intended users.