Raycast for designers

Not all design happens in Figma.

A pen cursor drawing a vector rectangle around the Raycast logo in black — Illustration by Ed Orozco.

I love tools, especially if they make my work easier and more enjoyable. This article is about one such tool: Raycast.

It’s difficult to explain what Raycast is —it does so much even though its UI is 99% text— but I can confidently say that not being able to use Raycast would bother me more than not being able to use Figma.

Rather than trying to explain it in abstract terms, I’ve prepared a collection of real-world use cases that paint a clearer picture of why it’s become so important to me and many other designers, developers, and product managers.

Disclaimer: Raycast did not sponsor this guide, and there are no referral links. I’m writing this out of my passion for design tools and workflows. In the future, I plan to write similar guides for Gmail, Slack, Notion, Linear, and others.

I use a Mac, but Raycast is also available for Windows, so check their website for the equivalent shortcuts and features.

I’ll start with the native extensions, which are available out of the box. Raycast also has an extensive open-source library of third-party extensions. I talk about those further down.

1. Window management

1.1 Custom presets

Raycast lets you resize apps into custom positions and aspect ratios. It’s handy when I’m using an external display and I want to see my browser in the size of, for example, a MacBook Pro 14’’.

To create your own presets, open Raycast and type “Create window management command” (It’ll show up way before you finish typing all that).

A GIF zooming into the Raycast dialog as the words “create wind” are typed into the search bar, which opens an interface to create a custom window size preset.

In my example, I used 1512 x 982 px to simulate the MBP. But you can use any resolution you need.

Raycast’s interface to create a custom window size preset.
You can choose any resolution you want and precisely where in the screen it’s rendered.

1.2 Cycle through tiling options

While Windows —and finally, Mac— both have window tiling and snapping, Raycast takes it to a whole new level.

You can move windows around by just typing the initials of the size and position you want, for example, bls = bottom left sixth and trq = top right quarter As you probably guessed, you can assign keyboard shortcuts to each one.

Another neat thing is that for some options, if you press the shortcut again, it cycles between 1/3, 1/6, and back to 1/2. This helps me very quickly create the layout that I want.

A GIF showing a variety of windows tiling options with shortcuts using Raycast.
Windows tiling options with shortcuts.

2. Clipboard history

Raycast keeps a history of everything you copy to your clipboard, which is super handy. But that history can get very long, so if you press ⌘+P, you can filter it to only show links, images, or even colors!

I use the links clipboard to manage the links to my sources when I’m writing. I also find it handy to keep track of certain color codes when I’m designing.

Use cases

  • Quick access to color codes copied recently.
  • Keeping track of links for Linear projects, Figma, or Notion files.

3. Quick links

Raycast’s quick links are like bookmarks, but they work everywhere and are much faster.

Can you not use browser bookmarks? You could, but that means opening the bookmark in your browser and copying the link from the URL. The moment you open the browser, you risk being distracted by what’s there. You also need more mental resources to do the app-switching and to visually find the bookmark.

I also find searching for bookmarks by typing much easier, and you’re not limited by the amount of space in your bookmarks bar.

Use cases

  • Quickly sharing a link to book a meeting.
  • Sharing a link to your design system or other frequent files.
  • Sharing a link to your portfolio or website.
Raycast’s interface showing a list of saved links with their metadata.

4. Raycast notes

You can launch a text file from any app to take quick notes. They’ve become my go-to way to take notes. In fact, this very article started as a Raycast note.

A window of a Raycast note listing a number of features in a bullet list.

My favorite thing is that I can both open and close them with the same shortcut. I use ⌥+N, you can set it to whatever you prefer. And they support markdown as well as all sorts of common formatting options.

Use cases

  • Taking notes during user interview sessions.
  • Capturing quick ideas during meetings.

5. Appearance toggle

Let’s you toggle between Light and Dark modes without having to go into System Settings. Simple but useful. I use it a lot when I’m working with code to test how things look in both modes.

Use cases

  • Test how a product looks in Dark and Light modes
  • Rest your weary eyes at night
A GIF zooming into the Raycast interface as the word “toggle” is typed in. Then it zooms out as the user’s OS appearance switches from dark to light mode.
You can assign a keyboard shortcut to toggle your computer’s appearance even faster.

6. Raycast AI presets

It’s only available on the paid version, but it gives you access to lots of models from a single chat interface. It’s super easy to compare how each model responds to a prompt, for example. And that’s just the beginning.

While this is more of a general-purpose feature, it’s useful for designers as our effectiveness depends a lot on how well we communicate. From product decisions to project briefs, it’s hard to overstate the value of writing.

6.1 AI Commands

Raycast comes loaded with some useful prompts to help you work with your writing. Just type AI commands to search through them.

Raycast’s UI listing a number of AI presents for writing.

6.2 AI Presets

If the AI commands are not enough, you can create your own presets for prompts you use often. For example, Ridd from Dive Club uses it to mimic his writing style when he’s stuck.

https://medium.com/media/9134d1760719e887d70da7d699cf2480/href

Use cases

  • Draft product decisions, meeting notes, and project statuses
  • Vibe-coding
  • Explaining what a certain piece of code does

7. Snippets

Snippets are reusable chunks of text that you paste into any app. But what’s even cooler about them is that you can use dynamic data that changes based on different things.

For example, I have a snippet for the titles of my notes from customer conversations. It has 3 dynamic fields:

  • {clipboard} — Uses the text in my clipboard, which I use for the customer’s name.
  • {date} — Uses today’s date
  • {cursor}—Places my cursor in the chosen position

The whole snippet looks like this:

Customer feedback from {clipboard} · {date}:
- {cursor}
Raycast UI with 3 fields for creating a new snippet. It asks the user for selecting Organization, Name and Snippet text.

When I run it, it pastes the following output and places my cursor at the end of it so I’m ready to start typing:

Customer feedback from Jennifer Hansen · Aug 16, 2025:
-
Raycast’s UI showing the user’s snippets and highlighting the most recent one, where the dynamic fields are shown in green.

It might sound intimidating at first, but once you create a few, you’ll start getting the hang of it.

Use cases

  • Paste in today’s date
  • Current time
  • Status updates in Slack channels or any other repetitive piece of text
  • Project updates templates

8. Search screenshots

It’s a gallery with all the screenshots you’ve taken, and what’s more, you can search by typing.

I use screenshots a lot when doing a design audit of an app or to map out the current flow of a feature. And since it has OCR, I can search them by certain words has been incredibly useful.

You can also press ⌘+⇧+R to open the highlighted screenshot in the Finder.

A hidden gem of this feature is that you can add custom folders to the scope of the gallery. Besides my screenshots folder, I also added my visual inspiration folder, which is where I store visually interesting things I find online or out in the real world.

Raycast’s interface for visually searching through screenshots.

Use cases

  • Quickly reference recent screenshots.
  • Browse specific image folders.
A screenshot of the Raycast store website — features icons of several apps and the title “Store” in large font.

Third-party extensions

These are extensions created by the Raycast community. There’s an ever-growing universe of them, so I often check to see what I can find.

Here’s a list of the ones I’ve been using most frequently so far.

9. Color picker

Pretty basic here. It lets you pick a color from anywhere on your screen. You can assign a shortcut for easy access. I use ⌥+C.

Screenshot of the Color Picker Raycast extension store page.

Use cases

  • Grabbing a HEX color from any website, picture, or video.
  • Converting HEX codes to virtually any other color space.

10. Open a Slack channel

Screenshot of the Slack Raycast extension store page.

I use this at least 10 times a day. You can connect a Slack workspace to Raycast, and the extension lets you search for a channel and open it directly in Slack.

The reason I love it so much is that I can go straight to where I need to read or write something and not get distracted by other unread discussions that would otherwise take me out flow.

A screenshot of the Raycast UI listing multiple Slack channels that start with “proj”

Use cases

  • Quickly opening a DM with a colleague or a specific channel without being distracted by irrelevant, unread conversations.
  • Jump straight into your list of unread messages.

11. TailwindCSS Colorpicker

It lets me quickly search and copy the color code of any Tailwind color.

Tailwind’s comprehensive color library is very useful, not just when designing in Figma, but also when working in other apps.

Screenshot of the TailwindCSS Colorpicker Raycast extension Github page

Tailwind recently switched to the OKLCH color space, which Figma, as of writing, still doesn’t fully support. So I relied a lot on this extension to set the equivalencies in our design system.

Screenshot showing a list of colors provided by the TailwindCSS Colorpicker Raycast extension

Use cases

  • Use Tailwind colors in any app without having to open their website.
  • Tailwind’s website now defaults to OKLCH, but with the extension, you can very easily get the HEX or RGB code of any color.

12. Open a Figma file

Similar to opening a channel in Slack, this extension lets you search for and open any Figma file from your workspace. It also shows a nice preview of each file.

A recording showing Raycast’s Figma plugin being used to browse projects in different folders.

Use cases

  • Share the link to a Figma file without having to open Figma
  • Navigate your Figma projects more quickly

13. Linear

A very powerful extension for those of you working with Linear.

You can search, read, and create issues. You can also search for projects and open them directly from Raycast.

This extension has drastically reduced the number of times I go into Linear, which is great because I find their UI very distracting.

A recording showing the Linear Raycast extension being used to search for an issue, read and pasted onto a note.

Use cases

  • Search for and read the content of Linear issues
  • Share links to issues
  • Search for projects and read their issues

14. Google fonts

Last but not least, this extension lets you browse the Google fonts catalog, pick variants, and download the files or copy the HTML code to import to your projects.

To be honest, I find it way nicer than browsing Google Fonts’s website, especially if I already have an idea of which fonts I’m going to go for.

A GIF showing Raycast’s UI for the Google Fonts extension as the use types to search for a font, select some variants and view download options.

Use cases

  • Quickly browse the Google Fonts’s catalog
  • Copy the import HTML code or download the font files to your computer

I have barely scratched the surface of what Raycast can do for your design workflow. I plan to go deeper into some of these features, as well as how they play with other tools like Figma, Slack, Notion, and Linear, in later articles.

If you have any questions, feel free to drop a comment here or DM me on LinkedIn. I’m always down to geek out with fellow designers.

Further reading

Raycast for designers was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

 

This post first appeared on Read More

Related Posts