Von einer schnellen Idee zu meinem ersten veröffentlichten Plugin
Vor ein paar Tagen brauchte ich einen Suchsel-Generator für ein Printable-Projekt, am liebsten direkt in Figma.
Ich fand neben externen Lösungen bestehende Plugins, die fast das taten, was ich wollte, aber viele hatten Probleme mit deutschen Zeichen, es fehlten Anpassungsoptionen oder sie froren gelegentlich die gesamte Anwendung ein, sodass ich Figma neu starten musste.
Anstatt zu versuchen, diese Einschränkungen zu umgehen, fragte ich mich, wie schwer es eigentlich wäre, eine kleine Version selbst zu entwickeln.
Diese Neugier entwickelte sich zu Word Searchly, meinem ersten Figma-Plugin.
Was ich erreichen wollte
Als ich die ersten Notizen schrieb, war die Liste kurz, aber strikt:
- Unterstützung für deutsche Umlaute (ä, ö, ü) und ß
- Eine konfigurierbare Gittergröße für verschiedene Schwierigkeitsgrade
- Mehrere Leserichtungen (links-nach-rechts, rechts-nach-links, diagonal)
- Ein Lösungs-Overlay im selben Frame, einfach zu verstecken oder komplett zu löschen
- Text-Nodes erstellen ohne unnötige Wrapper-Frames, damit Typografie-Anpassungen schnell und einfach umsetzbar bleiben
- Auto-Layout verwenden, um Abstandsanpassungen kinderleicht zu machen
Im Wesentlichen: ein Generator mit Fokus auf Anpassbarkeit ohne Überkomplizierung.
Die Plugin-Oberfläche: einfache Input-Felder für Wörter, Gittergröße und Richtungseinstellungen
Entwicklung in Figma
Dies war mein erstes richtiges Projekt mit der Figma Plugin API, und ich habe dabei viel gelernt.
Die größte Herausforderung war die Performance.
Das Generieren und Platzieren von Hunderten von Buchstaben kann Figmas Haupt-Thread leicht einfrieren. Die Lösung bestand darin, intensive Operationen in kleinere Blöcke zu unterteilen und in regelmäßgem Abständen immer wieder die Kontrolle an die UI zurückzugeben. Alle 50 Wortplatzierungsversuche pausiert der Algorithmus kurz, sodass Figma reaktionsfähig bleibt, selbst beim Generieren großer 30×30-Gitter.
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));
}
}Eine weitere wichtige Entscheidung war es, von Anfang an Auto-Layout-Frames zu verwenden.
Jeder Buchstabe ist ein individueller Textknoten in einem Frame mit fester Größe, in Reihen mit Auto-Layout angeordnet. Die Monospace-Schrift (Roboto Mono) sorgt für perfekte Ausrichtung und macht das gesamte Gitter bearbeitbar und vorhersehbar.
Diese Entscheidung allein machte das Exportieren, Stylen und die Abstandsgestaltung viel sauberer.
Umgang mit deutschen Zeichen
Die Figma-Text-Engine rendert Umlaute perfekt, aber ich wollte auch Kompatibilität für Rätsel bieten, bei denen Lehrer SS statt ß erwarten.
Intern bildet das Plugin ß → SS für die Platzierung ab, behält aber die ursprüngliche Schreibweise in der Wortbank bei, sodass nichts in der gedruckten Version seltsam aussieht.
Die zufälligen Füllbuchstaben werden aus einem Alphabet gezogen, das Ä, Ö, Ü enthält, wodurch das Gitter für deutsche Wörter natürlich aussieht.
Für die Zukunft erwäge ich aber gerade auch, noch eine Option hinzuzufügen für Nutzer, die diese lieber in AE, OE, UE umgewandelt haben möchten.
Ein 15×15-Gitter mit deutschen Wörtern mit Umlauten, voll unterstützt
Ein kleines UX-Detail: das Overlay
Das Lösungs-Overlay befindet sich im selben Frame wie das Gitter.
Standardmäßig ist es sichtbar, aber Benutzer können einfach das “Solution Overlay”-Layer verstecken oder löschen.
Es verhält sich wie ein Textmarker und macht es das Generieren von Varianten mit und ohne Lösungsschlüssel aus einem einzigen Frame (zum Beispiel über Komponenten-Properties oder -Varianten) kinderleicht.
Es ist ein kleines Detail, aber eines, das das Erstellen von Druckvorlagen einfacher macht.
Klare Layer-Struktur mit leicht ausblendbarem Lösungs-Overlay
Intelligente Wortplatzierung & Fehlerbehandlung
Nicht jedes Wort passt in jedes Rätsel.
Das Plugin versucht bis zu 300 verschiedene Positionen für jedes Wort und testet verschiedene Startpunkte und Richtungen.
Wenn ein Wort zu lang für das Gitter ist oder einfach nach allen Versuchen nicht passt:
- … wird es in einem “Could not fit”-Frame neben dem Rätsel aufgelistet
- … wird der Grund klar erklärt (z.B. “Too long: 15 letters, max 10”)
- … erhält man eine Benachrichtigung, welche Wörter übersprungen wurden
Diese Transparenz hilft Nutzern, ihre Wortliste oder Gittergröße anzupassen, ohne raten zu müssen, was schiefgelaufen ist.
Klares Feedback, wenn Wörter nicht passen: das Plugin erklärt warum und listet sie separat auf
Mit anderen teilen
Als die Kernfunktionen zuverlässig liefen, wurde mir klar, dass das Plugin auch anderen helfen könnte, besonders Lehrkräften und Designer*innen, die Figma bereits für Arbeitsblätter oder Printables verwenden.
Word Searchly ist für die ersten zehn Nutzungen kostenlos und bietet dabei den vollständigen Funktionsumfang, inklusive der maximalen 30×30-Rastergröße. Nach diesen zehn Nutzungen kann man auf Gumroad einen Pay-what-you-want-Lizenzschlüssel erhalten, um unbegrenzt viele Suchsel zu erstellen.
Mir war wichtig, dass alle das Plugin erst in Ruhe ausprobieren können, bevor sie sich entscheiden, ob sie es unterstützen möchten. Das Pay-what-you-want-Modell hält den Zugang für alle offen - man kann einen kostenlosen Schlüssel wählen oder einen beliebigen Betrag beisteuern - und gleichzeitig diejenigen, die darin echten Mehrwert sehen, an der Weiterentwicklung teilhaben lassen.
Maximale Größe: ein 30×30-Raster mit mehreren Wörtern in verschiedenen Richtungen
Gelernte Lektionen
- Die Figma Plugin API ist leistungsstark, erfordert aber Aufmerksamkeit für Performance
- Auto-Layout löst die meisten Layout-Probleme, bevor sie überhaupt entstehen können
- Für mich persönlich war es eine wertvolle Erfahrung, innere Widerstände und Perfektionismus zu überwinden und in einen Einfach-mal-bauen-Modus zu kommen und das bis zum Release durchzuziehen
Was als nächstes ansteht
Irgendwann in der Zukunft würde ich das Plugin gerne erweitern mit:
- Einem Light-/Dark-Mode-UI-Theme, das den Benutzerpräferenzen entspricht
- Themevorlagen für gängige druckbare Formate
Feedback, Ideen und Fehlerberichte sind immer willkommen.
Probier es selbst aus
👉 Word Searchly installieren auf Figma Community
👉 Kostenloser Supporter-Schlüssel nach 10 Nutzungen auf Gumroad
Wenn du etwas Cooles damit erstellst (Arbeitsblätter für die Klasse, Etsy-Druckvorlagen oder einfach nur ein lustiges Rätsel), würde ich mich freuen, es zu sehen.
Danke fürs Lesen! Dies ist mein erstes öffentliches Plugin, und ich hoffe, es inspiriert andere dazu, kleine Tools zu bauen, die ihre eigenen alltäglichen Probleme lösen.