Wireframe-Bibliothek

Wer kann das tun: Alle Nutzer
Welche Preispläne: Alle Preispläne
Welche Plattformen: Browser, Desktop, Mobil

HINWEIS: Die Prototyping Library heißt jetzt Wireframing Library. Deine vorhandenen Screens, Komponenten und Flows funktionieren weiterhin wie bisher.

Verwende die Wireframing Library, um Low-Fidelity-Screens und Flows direkt auf dem Miro-Canvas zu erstellen. Die Bibliothek enthält Screens, UI components und Icons, mit denen du Flows skizzieren und Ideen früh strukturieren kannst.

Alle Nutzer können statische Wireframes erstellen. Advanced components, connector lines und interactive preview erfordern einen Business plan oder eine Enterprise Accelerate license.

TIPP: Brauchst du einen High-Fidelity-Prototyp? Verwende Prototypes 2.0 (HTML Prototype). Du kannst deine Wireframes in einen HTML Prototype umwandeln, um realistischere Darstellung, KI-Bearbeitung, Review und Übergabe zu ermöglichen. Siehe Über Prototypes 2.0 und Einen Prototype 2.0 erstellen.

Wireframing Library öffnen

1. Klicke auf dem Canvas in der Erstellungsleiste auf das Symbol Tools, Media and Integrations.
2. Suche nach Wireframing und klicke dann auf Wireframing Library.
3. Das Wireframing Library-Feld öffnet sich.

Was die Wireframing Library enthält

Die Wireframing Library ist in Tabs organisiert. Alle Nutzer können statische Wireframes mit Screens, UI components und Symbolen erstellen.

Screens

Screens sind vorgefertigte Rahmen zum Erstellen von Wireframes. Füge Mobile, Tablet oder Desktop Screens zu deinem Canvas hinzu und ziehe dann UI-Elemente darauf.

Mit Screens arbeiten

• Show or hide die Chrome des Screens, sodass er wie ein Geräterahmen oder ein einfacher Rahmen aussieht.
• Rotate einen Screen.
• Resize einen Screen, indem du ihn ziehst, um seine Höhe zu vergrößern (nur vertikal).

UI components

UI components sind gängige Interface-Elemente wie Schaltflächen, Eingabefelder, Navigationsleisten und Formularelemente.

Du kannst:

• Drag Komponenten auf einen Screen.
• Resize und reposition Komponenten.
• Edit Text und grundlegendes Styling über das context menu.

HINWEIS: Die Optionen im Kontextmenü variieren je nach ausgewähltem Element.

Im Business plan und mit der Enterprise Accelerate license sind einige UI components im Preview mode interaktiv. Beispielsweise reagieren Schaltflächen, Schieberegler, Eingabefelder und Dropdown-Menüs auf die Connector lines, die du definiert hast.

Advanced components sind nur im Business plan und mit der Enterprise Accelerate license verfügbar.

Icons

Der Tab Icons enthält eine durchsuchbare Symbolbibliothek.

Icon hinzufügen oder ersetzen

1. Ziehe ein Symbol aus der Bibliothek auf das Canvas.
2. Wähle das Symbol aus, um seine Farbe über das Kontextmenü zu ändern.
3. Wähle Replace icon, um es durch ein anderes Symbol zu tauschen, ohne Position oder Größe zu verändern.

Connector lines und interactive preview

Welche Preispläne: Business, Enterprise (mit Accelerate-Lizenz)

Connector lines definieren die Navigation zwischen Screens. Zieh Connector lines von einem Element auf einem Screen zu einem anderen, um mehrstufige Flows zu erstellen.

Connector lines aktivieren auch die interactive preview. Im Preview mode funktionieren verbundene Screens wie ein anklickbarer Flow.

TIPP: Einige UI-Elemente zeigen beim Hinzufügen zu einem Screen ein Blitzsymbol. Bei Flows mit mehreren Screens zieh das Blitzsymbol auf einen anderen Screen, um eine Connector line zu erstellen.

Wireframes in HTML Prototypes umwandeln

Welche Preispläne: Business, Enterprise (mit Accelerate-Lizenz)

Wenn dein Flow bereit für eine High‑Fidelity‑Überprüfung oder die Übergabe ist, wandle deine Widgets, Wireframes oder Screens in ein HTML Prototype (Prototypes 2.0) um. HTML Prototypes unterstützen:

• Realistischere Darstellung (Verläufe, Schatten, Schriftarten und Layouts).
• Leichte Bearbeitungen auf dem Canvas.
• Interaktive Connectoren.
• Mit KI bearbeiten.
• Vollbildvorschau mit teilbarem Link.
• Als HTML oder Bild exportieren.

HINWEIS: Wenn du Mit KI bearbeiten auf Wireframing Library Screens nutzt, erstellt Miro ein neues Prototypes 2.0 prototype. Deine ursprünglichen Screens werden dabei nicht verändert.

FAQ