If you’re a Webflow user, this is for you.
(If you’re not, maybe try reading this essay about Jeff Bezos’ 7-year strategy?)
Anyhow, these are some not-always-obvious ways to improve your Webflow workflow. And they’re all things I learned way too late. Let’s go.
Webflow is for implementing, not designing. That’s what Figma is for. It’s tempting at first to tweak things in Webflow to get real-time feedback.
But inevitably your client will come back with some 11th-hour change of plans which will require re-styling classes and adding sections and reordering elements. Hash these things out in Figma first. Pixels are easier to move around than HTML is.
Start in Figma. Keep your project there for as long as you can. Then, implement in Webflow.
FontAwesome is a font made up of hundreds of perfectly proportional icons. It’s the easiest way to add simple icons to your site. Best part? They’re considered text, so you can easily change their color.
I won’t explain how to install it here, but it’s worth it, trust me.
The Adobe Fonts x Webflow integration is brilliant. Find your perfect font in Adobe Fonts, add it to a web project, and then paste the API token into Webflow. You can paste this token both at the project level, but also at the account level, under “integrations.”
Also: just because a font is on Adobe Fonts doesn’t mean it’s a good one. Typewolf has listed the 40 best fonts on Adobe Fonts, and I reference this article often. Some of my favorites: Neue Haas Grotesk Display, Aktiv Grotesk, Roc Grotesk, Sofia, Acumin Extrawide, Orpheus, IvyJournal, IvyPresto Display, DIN 2014.
Once you’ve finished a site, it takes an extra 20 minutes to add a delicious loading animation to the site. The ROI for creating this great first impression is huge.
If you’re feeling lazy, simply start at the top of your page, and do the following:
Select each element, and apply the interaction named “Scroll into view.” Select “when scrolled into view” and choose “Slide from bottom.” Boom, you just increased your site’s sex appeal by at least 10%.
This works if you adhere to Commandment One. Simply select all images on your Figma mockup (by holding down shift as you click on them) and download to a folder on your computer. Then, upload them all as you start the Webflow implementation process. So easy it feels like cheating.
Webflow is picky about favicon and webclip image size. In your Figma doc, create a square (or circular) image and include the required graphic. Group them, lock the aspect ratio, and give it a width of 32px. Export as a .png file. Repeat for the webclip image, except this time export with 256x256px dimensions.
When it comes to domain hosting, Google Domains is the clear winner. Is it more expensive than GoDaddy and Namecheap? Yes. Is it worth it? Fuck yes. Especially when you consider the flawless integration between Webflow and Google Workspaces.
There’s nothing that says “this site is half-baked” like an FAQ section where the accordion snaps open without any easing. Be better.
Figma plugins are like cheat codes. Here are some that I rely on:
Blobs: Use blobs to add a splash of color to your designs, or fill them with an image for a casual, friendly vibe.
Arc: Use Arc to turn a line of text into a circle. Then in Webflow, you can animate the circle to either spin as the page is scrolled, or to spin continuously.
Figma <> HTML: use this plugin whenever you’d like to clone parts of a website you see in the wild. It’s not 100% reliable, but there’s a chance it could save you an hour or two.
Hope you guys found this helpful. Working in Webflow is an infinite game—you can always take it to the next level. And that’s why it’s awesome.