Wireframer
Jim Raptis · Bilder · Coding
Wireframer ist ein kostenloses Figma-Plugin, das Wireframes mit einzigartigen SVG-Illustrationen füllt. Sie stellen ein paar Parameter ein und setzen eigene Bilder in jedes Layout.
Über Wireframer
What Is Wireframer
Wireframer ist ein Figma-Plugin, das Füllillustrationen für Wireframes erzeugt. Statt grauer Kästen und Blindtext bekommen Sie frische SVG-Formen, die Sie direkt in ein Layout ziehen. Das Tool richtet sich an Designer, die wollen, dass ihre ersten Mockups gewollt aussehen und nicht leer. Hinter dem Plugin steht Jim Raptis, ein Designer, der auch die Web-App Wireframer auf wireframer.art gebaut hat. Sie wählen einen Stil, justieren die Parameter, und das Plugin liefert jedes Mal ein anderes Stück Füllillustration zurück. Es taugt als Wireframing-Tool für Figma bei schnellen, unsauberen Wireframes genauso wie bei feineren Screens. Ein zweiter Anwendungsfall erzeugt isometrische Illustrationen, wenn Sie etwas Brauchbareres als ein flaches Rechteck brauchen. Das Plugin für isometrische Illustrationen greift genau dann, wenn ein flacher Kasten zu wenig hermacht.
Zwei Dinge lohnen sich vor der Installation zu wissen. Das Plugin läuft in Figma, ist also ein Designwerkzeug und keine eigenständige Website. Und es ist ein kleines, klar umrissenes Hilfsmittel: Es erzeugt Füllbilder, und das war es. Wer Layout-Vorlagen, Prototypen oder ein komplettes Designsystem sucht, wird woanders fündig.
Getting Started
- Öffnen Sie Figma und rufen Sie die Plugin-Seite von Wireframer in der Community auf
- Installieren Sie das Plugin und starten Sie es aus dem Plugin-Menü heraus in einer Datei
- Stellen Sie die Parameter wie Stil und Form ein, bis die Vorschau passt
- Setzen Sie die erzeugte SVG-Illustration in Ihren Wireframe oder Ihre Illustration ein
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von Wireframer.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- UI- und UX-Designer
- Freelancer
- Design-Studierende
- Produktteams
- Präsentationsersteller
Aufgaben
- Einen Wireframe füllen
- Isometrische Bilder erzeugen
- Ein Mockup aufbauen
- Ein Layout testen
- Ein Portfolio-Stück fertigstellen
Szenarien
- Ein neues Projekt starten
- Ein Kunden-Review vorbereiten
- Eine Klasse unterrichten
- Ein Pitch-Deck bauen
- Eine Illustration skizzieren
Wichtigste Funktionen
SVG-Platzhalter erzeugen
Die Kernaufgabe von Wireframer ist es, aus wenigen Einstellungen einen einzigartigen Wireframe-Platzhalter zu machen. Die Ausgabe ist eine SVG-Füllillustration als Vektorgrafik, bleibt also in jeder Größe scharf und landet sauber in einem Figma-Rahmen. Jedes Ergebnis entsteht neu, was verhindert, dass eine Seite voller Wireframe-Platzhalter wiederholend wirkt. Es ist die Funktion, die den grauen Kasten ersetzt, ein zuverlässiger Wireframe-Füller ohne Stockbilder.
Einstellbare Parameter
Sie steuern das Aussehen über Regler und Optionen statt über eine feste Voreinstellung. Die Parameter lassen Sie Stil und Form verschieben, bis der Platzhalter in den Abschnitt passt, in dem er sitzt. Genau diese Kontrolle trennt Wireframer von einem statischen Füll-Asset. Statt aus einer Liste zu wählen, justieren Sie das Ergebnis.
Isometrischer Illustrationsmodus
Über einfache Platzhalter hinaus erzeugt das Tool isometrische Illustrationen. Sie passen in Abschnitte, in denen ein flaches Rechteck unfertig wirkt und ein kleines Bild mit Volumen besser sitzt. Das ist ein zweiter Anwendungsfall auf dem Wireframing und folgt demselben einstellbaren Ansatz. Designer greifen darauf zurück, wenn ein Screen ein Bild braucht, das durchdacht aussieht, und genau das ist die Rolle des Plugins für isometrische Illustrationen.
Unterstützung für High Fidelity
Wireframer taugt für schnelle, unsaubere Wireframes und für feinere Screens. In einer Skizze gibt die Grafik dem Layout genug Textur, um Abstände zu beurteilen. Auf einem saubereren Screen bleibt dieselbe Ausgabe vorzeigbar genug zum Teilen. Das Tool zwingt Sie nicht, sich vorher auf ein Fidelity-Level festzulegen.
Läuft in Figma
Das Plugin lebt in Ihrem Figma-Arbeitsbereich, es gibt also keinen Schritt zum Exportieren und erneuten Importieren. Sie erzeugen die Grafik und setzen sie in dieselbe Datei, an der Sie arbeiten. Der ganze Wireframing-Ablauf bleibt an einem Ort. Für Teams, die schon in Figma arbeiten, fügt es sich in den täglichen Ablauf ein.
Ergänzende Web-App
Der Entwickler liefert außerdem eine Web-App auf wireframer.art mit mehr Optionen als das Plugin. Wer Stile vor der Installation testen will oder einen breiteren Satz an Bedienelementen braucht, kann dort starten. Sie ist eine Ergänzung und kein Ersatz und deckt dieselbe Füllaufgabe mit mehr Spielraum ab.
Vor- und Nachteile
Vorteile
- Kostenlose Installation, sodass Sie das Plugin an einer echten Datei ohne Bezahlung testen können
- Erzeugt jedes Mal eine andere SVG-Grafik, was verhindert, dass ein Satz Platzhalter identisch wirkt
- Die einstellbaren Parameter geben Ihnen Kontrolle statt eines festen Sets an Assets
- Der isometrische Modus fügt einen zweiten Anwendungsfall jenseits des Wireframe-Füllens hinzu
- Läuft in Figma ohne Schritt zum Exportieren oder erneuten Importieren
Nachteile
- Es ist ein enges Werkzeug: Es erzeugt nur Füllbilder, ohne Vorlagen oder Prototypen
- Es braucht Figma zum Laufen, Sie können es also nicht als eigenständige Wireframing-App nutzen
- Das Plugin ist klein und wurde zuletzt Ende 2019 aktualisiert, der Funktionsumfang blieb also fix
- Weil die Ausgabe zufällig ist, brauchen Sie manchmal mehrere Versuche, bis ein Platzhalter in den Abschnitt passt
Häufige Fragen
Wireframer füllt Wireframes in Figma mit einzigartiger SVG-Illustration. Sie stellen ein paar Parameter ein und setzen das Ergebnis in ein Layout, was verhindert, dass frühe Mockups wie leere graue Kästen wirken.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu Wireframer.
Alternativen zu Wireframer
Tractionwave
TractionWave · Bilder · MarketingTractionWave erstellt per KI eine Aufmerksamkeits-Heatmap für statische Anzeigen. Sie laden ein PNG oder JPG hoch und bekommen prognostizierte Aufmerksamkeit, sortierte Hotspots und Korrekturen, bevor Budget fließt.
Imejis.io
Imejis.io · Bilder · MarketingImejis.io ist ein KI-Designstudio für Agenten und Marketingteams. Sie beschreiben ein Bild in eigenen Worten, und das Werkzeug schreibt den Text, baut das Layout, passt es an jedes Format an und exportiert die fertige Datei.
Layoutr
Van Dijk Ontwikkeling · Bilder · KI aus ChinaLayoutr ist ein Grundriss-Tool im Browser: Es skaliert Ihren vorhandenen Plan, stellt Möbel in echter Größe ab, zeigt den Raum in 3D und rendert ihn mit KI.