Raycast for designers
uxdesign.cc
Not all design happens inFigma.I love tools, especially if they make my work easier and more enjoyable. This article is about one such tool:Raycast.Its 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 useFigma.Rather than trying to explain it in abstract terms, Ive 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. Im 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, andothers.I use a Mac, but Raycast is also available for Windows, so check their website for the equivalent shortcuts and features.Ill 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 furtherdown.1. Window management1.1 CustompresetsRaycast lets you resize apps into custom positions and aspect ratios. Its handy when Im using an external display and I want to see my browser in the size of, for example, a MacBook Pro14.To create your own presets, open Raycast and type Create window management command (Itll show up way before you finish typing allthat).In my example, I used 1512 x 982 px to simulate the MBP. But you can use any resolution youneed.You can choose any resolution you want and precisely where in the screen its rendered.1.2 Cycle through tilingoptionsWhile Windows and finally, Mac both have window tiling and snapping, Raycast takes it to a whole newlevel.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 eachone.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 Iwant.Windows tiling options with shortcuts.2. Clipboard historyRaycast 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 evencolors!I use the links clipboard to manage the links to my sources when Im writing. I also find it handy to keep track of certain color codes when Im designing.Use casesQuick access to color codes copied recently.Keeping track of links for Linear projects, Figma, or Notionfiles.3. QuicklinksRaycasts quick links are like bookmarks, but they work everywhere and are muchfaster.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 whats 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 youre not limited by the amount of space in your bookmarks bar.Use casesQuickly sharing a link to book ameeting.Sharing a link to your design system or other frequentfiles.Sharing a link to your portfolio orwebsite.4. RaycastnotesYou can launch a text file from any app to take quick notes. Theyve become my go-to way to take notes. In fact, this very article started as a Raycastnote.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 casesTaking notes during user interview sessions.Capturing quick ideas during meetings.5. Appearance toggleLets you toggle between Light and Dark modes without having to go into System Settings. Simple but useful. I use it a lot when Im working with code to test how things look in bothmodes.Use casesTest how a product looks in Dark and LightmodesRest your weary eyes atnightYou can assign a keyboard shortcut to toggle your computers appearance evenfaster.6. Raycast AIpresetsIts only available on the paid version, but it gives you access to lots of models from a single chat interface. Its super easy to compare how each model responds to a prompt, for example. And thats just the beginning.While this is more of a general-purpose feature, its useful for designers as our effectiveness depends a lot on how well we communicate. From product decisions to project briefs, its hard to overstate the value ofwriting.6.1 AICommandsRaycast comes loaded with some useful prompts to help you work with your writing. Just type AI commands to search throughthem.6.2 AIPresetsIf 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 hesstuck.https://medium.com/media/9134d1760719e887d70da7d699cf2480/hrefUse casesDraft product decisions, meeting notes, and projectstatusesVibe-codingExplaining what a certain piece of codedoes7. SnippetsSnippets are reusable chunks of text that you paste into any app. But whats 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 dynamicfields:{clipboard}Uses the text in my clipboard, which I use for the customers name.{date}Uses todaysdate{cursor}Places my cursor in the chosenpositionThe whole snippet looks likethis:Customer feedback from {clipboard} {date}:- {cursor}When I run it, it pastes the following output and places my cursor at the end of it so Im ready to starttyping:Customer feedback from Jennifer Hansen Aug 16, 2025:- It might sound intimidating at first, but once you create a few, youll start getting the hang ofit.Use casesPaste in todaysdateCurrent timeStatus updates in Slack channels or any other repetitive piece oftextProject updates templates8. Search screenshotsIts a gallery with all the screenshots youve taken, and whats more, you can search bytyping.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 theFinder.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 realworld.Raycasts interface for visually searching through screenshots.Use casesQuickly reference recent screenshots.Browse specific imagefolders.Third-party extensionsThese are extensions created by the Raycast community. Theres an ever-growing universe of them, so I often check to see what I canfind.Heres a list of the ones Ive been using most frequently sofar.9. ColorpickerPretty basic here. It lets you pick a color from anywhere on your screen. You can assign a shortcut for easy access. I use+C.Use casesGrabbing a HEX color from any website, picture, orvideo.Converting HEX codes to virtually any other colorspace.10. Open a SlackchannelI 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 inSlack.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 outflow.Use casesQuickly 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 ColorpickerIt lets me quickly search and copy the color code of any Tailwindcolor.Tailwinds comprehensive color library is very useful, not just when designing in Figma, but also when working in otherapps.Tailwind recently switched to the OKLCH color space, which Figma, as of writing, still doesnt fully support. So I relied a lot on this extension to set the equivalencies in our designsystem.Use casesUse Tailwind colors in any app without having to open theirwebsite.Tailwinds website now defaults to OKLCH, but with the extension, you can very easily get the HEX or RGB code of anycolor.12. Open a FigmafileSimilar 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 eachfile.Use casesShare the link to a Figma file without having to openFigmaNavigate your Figma projects morequickly13. LinearA very powerful extension for those of you working withLinear.You can search, read, and create issues. You can also search for projects and open them directly fromRaycast.This extension has drastically reduced the number of times I go into Linear, which is great because I find their UI very distracting.Use casesSearch for and read the content of LinearissuesShare links toissuesSearch for projects and read theirissues14. GooglefontsLast 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 Fontss website, especially if I already have an idea of which fonts Im going to gofor.Use casesQuickly browse the Google FontsscatalogCopy the import HTML code or download the font files to yourcomputerI 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. Im always down to geek out with fellow designers.Further readingDeveloper productivity MichaelKuncioRidd from Dive Club shows his Raycast setupYouTubeRaycast for designers was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.
Like
Love
Wow
Sad
Angry
1χλμ.
· 0 Σχόλια ·0 Μοιράστηκε
CGShares https://cgshares.com