Developing the Screenshot Finder Figma Plugin with Cursor and Brave Search

As a product designer, I’ve always been driven to solve problems that disrupt my workflow. One frustration stood out: the constant switching between Figma and my browser to hunt for reference screenshots, Like UI designs or app layouts. It was slow, tedious, and pulled me out of my creative groove. I imagined a Figma plugin that could search for screenshots right inside my workspace, saving me time and keeping my focus intact.

The only problem? I don’t code. Building a plugin seemed like a dream reserved for developers Until I discovered AI could help. Using Cursor, an AI coding assistant, I created "Screenshot Finder," a plugin that searches the web for images via Brave Search and inserts them into my Figma canvas. This is the story of how I went from an idea to a working tool, no coding expertise required.

The Spark: A Designer’s Pain Point

The idea was straightforward but powerful: I wanted a plugin that would:

• Let me type a search query (e.g., "mobile app login screenshot").

• Find relevant images from the web.

• Display them in a clean grid inside Figma.

• (Even better) Allow me to click an image to add it to my design.

I’d heard of other designers building plugins to solve their own problems—like "Layer Renamer" by Kasthuri Rajaram—and thought, "If they can do it, maybe I can too." With AI by my side, that "maybe" turned into a "yes."

Phase 1: Starting with AI as My Guide

Grasping the Basics

I had no clue how Figma plugins worked, but Cursor made it approachable. It explained that a plugin needs three main pieces:

• manifest.json: A file that tells Figma what the plugin is called and how to launch it.

• code.js: The logic that makes the plugin do its job.

• ui.html: The visual part users see and interact with.

Cursor even gave me starter versions of these files. Within minutes, I had a basic plugin with a text box for my search query and a button to trigger it. Suddenly, this didn’t feel so impossible.

Choosing Brave Search

I picked Brave Search for the plugin because I had an API key and liked its privacy focus. Cursor showed me how to use Brave’s image search to find screenshots—a perfect fit for my needs. It guided me through setting up the API connection, something I’d never have figured out alone.

Phase 2: Building It Step by Step

Getting the Search to Work

The heart of the plugin was the search feature. Cursor wrote a function called searchImages that:

• Took my query (like "dashboard UI").

• Added "screenshot" to narrow the results.

• Asked Brave Search for image URLs.

• Pulled the links from the response.

At first, some images wouldn’t load. Cursor suggested I peek at the API data to troubleshoot. I learned some results were just tiny thumbnails, not full images. With its help, I adjusted the code to handle both, making the plugin more reliable.

Showing Images in Figma

Next, I needed those images to appear in the plugin’s window. Cursor explained Figma’s messaging system: the code.js file sends the image URLs to ui.html, which displays them as a grid of thumbnails. I typed a query, hit search, and—bam!—images appeared. It felt like a small victory.

Not every image worked, though. Some links were broken or blocked—a limitation I decided to live with for now.

Phase 3: Adding the Magic Touch

Placing Images on the Canvas

I wanted more than just a search tool—I wanted to click an image and see it in my Figma file. Cursor introduced me to createImageAsync, a Figma function that turns a URL into an image on the canvas. Here’s how it worked:

• Click a thumbnail in the plugin.

• The URL goes to code.js.

• Figma creates a rectangle filled with the image, right in my design.

When it worked, it was thrilling—like I’d unlocked a superpower. Some images still failed to load due to technical quirks, but the successes outweighed the hiccups.

Polishing the UI

As a designer, I couldn’t let the plugin look bland. I styled the thumbnails to be small and clickable, adding a hover effect for clarity. Cursor suggested a "loading" message during searches, but I kept it simple for this first version.

Overcoming Hurdles with AI

Building this wasn’t all smooth sailing, but AI helped me through:

• Decoding the Code: I didn’t need to master programming—Cursor explained things in plain terms. For example, it described "async functions" as "waiting for a task to finish before moving on."

• Fixing Mistakes: When the search button didn’t work, Cursor spotted that I’d missed linking it to the search function. Problem solved.

• Handling API Surprises: Brave Search sometimes sent odd results. Cursor helped me add filters to skip unusable data, improving the plugin’s consistency.
  

• 
  

The Payoff: A Workflow Game-Changer

Since finishing "Screenshot Finder," it’s become a staple in my projects. What used to take 10 minutes—searching for a reference—now takes less than a minute. More than saving time, it keeps me in the design zone. I’ve shared it with teammates, and they’ve loved it too, using it to grab inspiration without breaking their stride.

What I Learned as a Non-Coder

• AI Levels the Playing Field: I didn’t write code from scratch; I shaped the idea, and Cursor handled the details.

• Small Steps, Big Wins: Starting with a basic search and adding features bit by bit kept me motivated.

• Good Enough Beats Perfect: The plugin isn’t flawless, but it works—and that’s what matters.

• 
  

Conclusion: You Can Build Too

Creating "Screenshot Finder" showed me that coding isn’t a barrier for designers anymore. With AI, we can turn our frustrations into tools that make our work better—and maybe even help others. This journey has me dreaming bigger: what else can I solve? If you’re a designer with an idea, don’t let code scare you off. AI can be your partner in making it real.