How I Use Raycast to Speed Up My Webflow Workflow

After building lots of sites on Webflow, I've realized it's the tiny, repetitive tasks that kill me. I love Webflow because I can (mostly) move quick, but some other programs help fill in the gaps. One of those programs is Raycast.

I've been using Raycast for over a year now. It's like MacOS's Spotlight, except you actually use it for things beyond search and opening apps. Plus I'm only on the free version – everything I'm about to show you costs nothing.

Here's what I use Raycast for during Webflow projects, listed from what I find the most useful to handy little extras.

Getting SVG Icons Fast with Iconify

You know when you’re designing a card layout and you need an icon really quick? Instead of Googling icons, downloading some ZIP files, and uploading them to Webflow, I use the Iconify extension.

If I need a right arrow, all I need to do is press Command + Space, type “right arrow”, and boom. Bunch of arrows. Copy, paste into Webflow, and move on.

Quick Access to CSS Snippets with Raycast Snippets

Another thing I lean on is Raycast Snippets for storing CSS I use constantly. Webflow lets you add custom CSS, but I'm too lazy to memorize syntax.

For example, my most used CSS snippet – by far – is this one here:

color-mix(in srgb, currentColor var(--_color---opacity--border), transparent)

I use this to generate borders that inherit the current text color with subtle transparency (the percentage of which is stored in my var(--_color---opacity--border) – typically around 10%). This is great because if I want to change the design to be a different text color, like red, the border will be a transparent version of red. No updates needed.

Copy & Paste But Better with Raycast Clipboard History

You ever copy something, copy something else right after, then realize you needed the first thing again? Raycast can keep track of the things you’ve copied. Copy a bunch of stuff back-to-back, then paste from history when you need it. They even have search.

Sometimes when I'm moving JavaScript or CSS between Webflow pages, I'll copy everything first, then paste from history. No more tab-switching gymnastics.

Checking Character Counts with Word Count

The Word Count extension might sound trivial, but it’s pretty handy for quick character count checks. When I’m working on CMS content or layouts with big headlines, I paste text into Raycast to quickly see if it'll fit without awkward surprises later.

Resizing Client Images with Image Modification

Often, clients will send me images with huge resolutions like they’re trying to print billboards. The Image Modification extension lets me resize them to something web-friendly (usually 2500px max) without opening Photoshop. Resize, done, move on with your life.

If I were to get a new Mac tomorrow, Raycast has made it into my first batch of downloads. Again, I’m not even paying for the premium version of Raycast. All of this is free.

If you build websites, or if you just like productivity tools, Raycast is worth trying. It won’t change your life, but it’ll make the annoying stuff slightly less annoying. And that’s enough.