Building Word Searchly, my First Figma Plugin

From a quick idea to my first published plugin

A few days ago I needed a word search generator for a printable project, preferably directly within Figma. I found existing plugins that almost did what I wanted, but many struggled with German characters, lacked customization options, or occasionally froze the entire application, forcing me to restart Figma.
Instead of trying to work around those limitations, I became curious how hard it would be to build a small version myself.

That curiosity turned into Word Searchly: my first Figma plugin.

What I wanted it to do

When I wrote the initial notes, the list was short but strict:

Support German umlauts (ä, ö, ü, ß)
Offer a configurable grid size for different difficulty levels
Allow multiple reading directions (left-to-right, right-to-left, diagonal)
Include a solution overlay in the same frame, easily hidden or removed
Create text nodes without unnecessary wrapper frames, so typography edits stay easy
Use auto layout to make spacing adjustments a breeze

Essentially: a generator focused on adaptability without overcomplication.

The plugin interface: simple inputs for words, grid size, and direction settings

Building inside Figma

This was my first serious project using the Figma Plugin API, and I learned a lot in the process.

The biggest challenge was performance.

Generating and placing hundreds of letters can easily freeze Figma’s main thread. The solution was to break intensive operations into smaller chunks and periodically yield control back to the UI. Every 50 word-placement attempts, the algorithm pauses briefly, allowing Figma to stay responsive even while generating large 30×30 grids.

for (let attempt = 0; attempt < maxAttempts && !placed; attempt++) {
  // Try random position and direction
  const x = Math.floor(rng() * size);
  const y = Math.floor(rng() * size);
  const dir = directions[Math.floor(rng() * directions.length)];

  if (canPlaceWord(grid, normalized, x, y, dir, size)) {
    placeWord(grid, normalized, x, y, dir);
    placed = true;
  }

  // Yield control periodically to prevent freezing
  if (attempt % 50 === 0) {
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

Another key decision was to use auto-layout frames from the start.

Each letter is an individual text node in a fixed-size cell frame, arranged in rows using auto layout. The monospace font (Roboto Mono) ensures perfect alignment and makes the entire grid editable and predictable.
That choice alone made exporting, styling, and spacing everything much cleaner.

Handling German characters

Figma’s text engine renders umlauts perfectly, but I also wanted compatibility for puzzles where teachers expect SS instead of ß.
Internally the plugin maps ß → SS for placement but keeps the original spelling in the word bank, so nothing looks odd in the printed version.

The random filler letters are pulled from an alphabet that includes Ä, Ö, Ü, making the grid look natural for German words.

I’m also considering adding a checkbox in the future for users who prefer these to be converted to AE, OE, UE instead.

A 15×15 grid with German words containing umlauts, fully supported

A small UX detail: the overlay

The solution overlay lives in the same frame as the grid.
By default it’s visible, but users can simply hide or delete the “Solution Overlay” layer.
It behaves like a highlighter and makes it really easy to generate variants with and without solution keys from a single frame (for example, via component properties or variants).

It’s a small detail, but one that makes printables easier to create.

Clean layer structure with easy-to-hide solution overlay

Smart word placement & error handling

Not every word can fit in every puzzle.
The plugin tries up to 300 different positions for each word, testing various starting points and directions.

If a word is too long for the grid or simply can’t fit after all attempts:

It’s listed in a “Could not fit” frame alongside the puzzle
The reason is clearly explained (e.g., “Too long: 15 letters, max 10”)
You get a notification showing which words were skipped

This transparency helps users adjust their word list or grid size without guessing what went wrong.

Clear feedback when words don’t fit: the plugin explains why and lists them separately

Once the core features worked, I realized this could help more people, especially teachers and printable creators who already use Figma for layout work.

Word Searchly is free for the first ten uses and after with full access to all features, including the maximum 30×30 grid size.
After the first ten uses you can get a pay-what-you-want license key from Gumroad to unlock unlimited puzzles.

I wanted everyone to be able to test the full capabilities before deciding whether to support it. The pay-what-you-want model means you can grab a free key or contribute whatever feels right, making it accessible to everybody while allowing those who find value in it to support future development.

Maximum capacity: a 30×30 grid with multiple words in various directions

Lessons learned

Figma’s Plugin API is powerful but demands attention to performance
Auto layout solves most layout issues before they can even arise
For me personally, overcoming to resistance to just building the thing is incredibly rewarding

What’s next

At some point in the future I’d love to expand the plugin with:

A light/dark UI theme matching user preferences
Themed templates for common printable formats

Feedback, ideas, and bug reports are always welcome.

Try it yourself

👉 Install Word Searchly on Figma Community
👉 Get your free or supporter key after 10 uses on Gumroad

If you create something cool with it (classroom worksheets, Etsy printables, or just a fun puzzle), I’d love to see it.

Thanks for reading! This was my first published plugin, and I hope it inspires others to build small tools that solve their own everyday problems.