The 10 Commandments of Webflow

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.

1. Design in Figma, Not Webflow

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.

2. Use FontAwesome 

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.

3. Use Adobe Fonts

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.

4. Loading Animations should be mandatory

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%.

5. Upload all of your images at once

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.

6. Make Favicons the easy way

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.

7. Buy your domains through Google Domains

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.

8. Use microinteractions

There’s nothing that says “this site is half-baked” like an FAQ section where the accordion snaps open without any easing. Be better.

9. Consider using a smooth scroll effect

A smooth-scroll effect such as luxy.js can add a subtle awesomeness to your site. For luxy.js it simply involves putting all your sections inside a div with an ID of “luxy.” Then you add a few lines of javascript in the page settings, and your site has a creamy vernier scroll effect.

10. Use Figma plugins to your advantage

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.

Conclusion

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.