Zurück zu Projekten
Figma Plugin · Side Project · 2025

AnchorLabs.

Kostenfreies Tool für Figma, das SVGs als Ankerpunkte und Bezier-Pfade visualisiert. Für Präsentationen, Fehlerkorrekturen und Logo-Analysen — ohne Programmierkenntnisse, in wenigen Minuten.

0+
Nutzer
0 Saves
0 Likes
Jahr 2025
Typ Side Project · Figma Plugin
Stack Figma Plugin API · JavaScript · HTML · CSS
Status Live · Figma Community
01 / Problem

Warum gibt es das nicht schon?

Wer ein Logo wirklich versteht, sieht nicht nur die Form — er sieht den Aufbau dahinter. Wo liegen die Ankerpunkte? Welche Bezier-Handles formen die Kurven? Dieses Wissen war lange hinter Paywalls oder zu komplexen Workflows versteckt.

Problem 01

Kostenpflichtige Alternativen

Illustrator-Plugins für Ankerpunkt-Visualisierung kosten Geld — und setzen eine Adobe Creative Cloud Lizenz voraus, die nicht jeder hat oder haben will.

Problem 02

Zeitaufwändiger Workflow

Jeden Ankerpunkt manuell in Figma zu dokumentieren kostet Stunden. Für Kundenpräsentationen, die den Aufbau eines Logos erklären müssen, ist das schlicht nicht praktikabel.

Problem 03

Figma hat kein natives Tool

In Figma gibt es keinen eingebauten Weg, Bezier-Handles und Ankerpunkte sichtbar zu machen ohne selbst in den Pfad-Editor zu wechseln — ohne Exportmöglichkeit, ohne Präsentations-Layer.

02 / Lösung

Ein Plugin. Kein Paywall. 2–5 Minuten.

AnchorLabs legt Ankerpunkte, Bezier-Handles, Vektor-Outlines und optionale Konstruktionslinien direkt als Layer über jede Vektorauswahl in Figma. Kein Exportieren, kein manuelles Zeichnen — in unter fünf Minuten fertig.

Logo-Zerlegung · Ankerpunkte + Konstruktionslinien
  • Ankerpunkte visualisieren — alle Nodes eines Vektorpfads werden als beschriftete Quadrate als eigener Layer eingeblendet.
  • Bezier-Handles — In- und Out-Handles werden als Linien mit Kontrollpunkten sichtbar gemacht.
  • Vektor-Outlines — der Pfad wird als separate Outline-Ebene eingeblendet, abkoppelbar vom Original.
  • Konstruktionslinien — optionale Baseline-, Cap-Height- und Winkellinien für Präzisions-Layouts und saubere Präsentationen.
  • Mehrsprachig — Interface in Deutsch, Englisch und weiteren Sprachen, synchronisiert und konsistent.
  • Kostenlos — kein Abo, kein Paywall, keine Creative-Cloud-Abhängigkeit. Direkt in der Figma Community verfügbar.
03 / Designentscheidungen

Einfach — aber nicht simpel.

Das Interface sollte so wenig Erklärung wie möglich brauchen. Nicht weil es nichts zu erklären gibt, sondern weil ein gutes Werkzeug den Nutzer nicht aufhält.

Design-Prinzip

Progressive Disclosure

Kernfunktion sofort erreichbar. Erweiterte Optionen zugänglich aber nicht aufdringlich — damit niemand eine Dokumentation lesen muss.

Design-Prinzip

Sinnvolle Defaults

Ohne Konfiguration sofort nutzbar. Jede Einstellung hat einen durchdachten Startwert — Farbe, Stroke-Breite, Sichtbarkeit.

Design-Prinzip

Mehrsprachigkeit by Default

Internationaler Rollout von Anfang an. Nicht nachträglich hinzugefügt — das Interface war von Tag 1 an auf mehrere Sprachen ausgelegt.

04 / Visuelles System

Das Interface.

Das Plugin-Interface spiegelt seine Funktion: präzise, technisch, klar. Schwarzer Hintergrund, kontraststarkes Grün, monospace-geprägte Typografie.

Farbpalette
Charcoal #111111
Electric #00FB87
White #FFFFFF
Muted #444444
Typografie
Jost
Plugin Interface Typeface

Jost wurde wegen seiner geometrischen Klarheit gewählt — nah an der Formsprache von Vektorgrafiken. Klar, direkt, präzise.

UI
05 / Versionsverlauf

Was ich beim nächsten Mal anders machen würde.

Version 1.0 hatte einen konkreten Bug: Farbwahl und Stroke-Width wurden nicht korrekt synchronisiert. Nutzer sahen andere Werte als tatsächlich gerendert wurden — ein klassischer Tunnelblick-Fehler.

v1.0

Erster Launch

Plugin live in der Figma Community. Kernfunktionen vorhanden: Ankerpunkte, Handles, Outline. Schneller Zuspruch — aber auch schnelle Rückmeldungen zu einem Problem.

v1.0 · Bug

Synchronisations-Problem

Farbwahl und Stroke-Width wurden zwischen UI und Rendering nicht korrekt synchronisiert. Nutzer stellten eine Farbe ein — das Plugin renderte eine andere. Ich war so tief in der Funktionalität, dass ich vergessen hatte wie jemand das Plugin zum ersten Mal benutzt: er erwartet, dass das was er einstellt auch das ist was er sieht.

v1.1

Bugfix + Refinement

Synchronisations-Bug behoben. State-Management komplett überarbeitet, Interface verfeinert, Mehrsprachigkeit ausgebaut. Bessere Error-States für ungültige Selektionen.

Heute

2.200+ Nutzer

Aktiv genutzt von Designern weltweit. 261 Saves, 35 Likes, 2 Community-Comments. Das Problem war real — und die Lösung offenbar auch.

Nutzerperspektive früher einnehmen

Beim nächsten Projekt bringe ich externe Augen früher rein — nicht erst nach dem Launch, sondern während der Beta.

KI-Entwicklung mit eigenem Testing kombinieren

KI-assistierte Entwicklung spart Zeit — aber kein Testing-Protokoll zu haben ist der schnellste Weg zu Bugs wie diesem.

06 / Resultat

Ein Tool. Ein Zweck. 100% kostenlos.

Nutzer
0+

Designer in der Figma Community weltweit.

Saves
0

Mal in Figma-Bibliotheken gespeichert.

Likes
0

Community-Likes in der Figma Community.

Kosten
0€

Kein Abo, kein Paywall. Für immer kostenlos.