Editor canvas
Der Wireframe-Bearbeitungs-Canvas ist der Ort, an dem Sie Ihre Bildschirme gestalten und verfeinern. Die linke Seitenleiste enthält alle Zeichen- und Auswahlwerkzeuge, die Mitte ist der Canvas, auf dem Sie Elemente platzieren und anordnen, und die rechte Seitenleiste zeigt die Eigenschaften des ausgewählten Elements.
Tools
Auswählen
Klicken Sie, um Elemente auf dem Canvas auszuwählen und zu verschieben. Ausgewählte Elemente zeigen ihre Eigenschaften in der rechten Seitenleiste.
Rechteck
Zeichnen Sie rechteckige Containerelemente auf dem Canvas.
Kreis
Zeichnen Sie kreisförmige Elemente auf dem Canvas.
Text
Fügen Sie Textbeschriftungen und Inhaltsblöcke hinzu.
Bild
Platzieren Sie Bild-Platzhalterelemente.
Schaltfläche
Fügen Sie interaktive Schaltflächenelemente hinzu.
Eingabefeld
Fügen Sie Formulareingabefelder hinzu.
+ (Bildschirm hinzufügen)
Fügen Sie einen neuen Bildschirm zum Wireframe-Projekt hinzu.
Elementi bloccati
KI-generierte Bildschirme sind standardmäßig gesperrt — Elemente können nicht verschoben oder in der Größe geändert werden, bis sie entsperrt werden. Drücke Strg + D, um alle Elemente auf dem aktuellen Bildschirm zu entsperren, was dir volle Kontrolle zum Neuanordnen und Bearbeiten gibt.
Modalita storyboard
Storyboard mode lets you see all your frames and their connection points in a bird’s-eye view. Toggle between the single-screen canvas and storyboard mode using the same button in the left sidebar. In storyboard mode, each screen is shown as a card with a preview of its layout.
Funzionalita storyboard
Frame Overview
See all screens at a glance with their element counts and visual previews.
Modal festlegen
Markieren Sie einen beliebigen Bildschirm als modales Overlay anstelle einer vollständigen Seite.
Klicken zum Bearbeiten
Klicken Sie auf eine Frame-Karte, um in deren Canvas-Ansicht zur detaillierten Bearbeitung zu springen.
Zoom Controls
Verwenden Sie die Zoom-Steuerung links zum Hinein-/Herauszoomen des Storyboards.
Flow Connections
Visualisieren Sie, wie Bildschirme durch Flow-Aktionen zwischen Frames verbunden sind.
Proprieta degli elementi
Doppelklicke auf ein beliebiges Leinwand-Element, um es zu betreten und sein Eigenschaftenpanel in der rechten Seitenleiste zu öffnen. Das Panel hat drei Registerkarten: Eigenschaften, Fluss und Farben. Von hier aus kannst du Position, Größe, Stil und Verhalten jedes Elements bearbeiten.
Scheda proprieta
Position (X, Y)
Legen Sie die genaue Pixelposition des Elements auf dem Canvas fest.
Größe (Breite, Höhe)
Legen Sie die Abmessungen des Elements in Pixeln fest.
Z-Index (Ebenenreihenfolge)
Steuern Sie, welche Elemente über anderen erscheinen.
Eckenradius
Legen Sie die Eckenrundung mit einem numerischen Wert fest oder verwenden Sie die Voreinstellungen Scharf, Gerundet oder Pill.
Textinhalt
Bearbeiten Sie den im Element angezeigten Text.
Farben-Tab
Passen Sie Hintergrund-, Rahmen- und Textfarben für das ausgewählte Element an.
Flussi
Flows definieren Aktionen und Navigation zwischen Bildschirmen. Ein Flow ist eine Aktion wie das Navigieren zu einer anderen Seite, das Öffnen eines Modals oder das Weiterleiten zu einem anderen Bereich. Kleine Link-Symbole auf dem Canvas zeigen an, welche Elemente Flows angehängt haben. Frames werden während der KI-Generierung automatisch miteinander verknüpft, und Flow-Verbindungen werden ebenfalls erstellt.
Configurazione dei flussi
Ein Element auswählen
Klicken Sie auf das Element, dem Sie einen Flow hinzufügen möchten.
Flow-Tab öffnen
Wechseln Sie in der rechten Seitenleiste zum Flow-Tab, um vorhandene Verbindungen anzuzeigen oder neue hinzuzufügen.
Verbindung hinzufügen
Klicken Sie auf Erste Verbindung hinzufügen (oder die +-Schaltfläche), um einen neuen Flow zu erstellen. Wählen Sie einen Zielbildschirm oder -frame zum Verknüpfen.
Auf Canvas anzeigen
Verbundene Elemente zeigen ein kleines Link-Symbol auf dem Canvas an, um anzuzeigen, dass sie Flow-Aktionen haben.
Connessioni dei blocchi
Block-Verbindungen ermöglichen es dir, Blöcke aus der Block-Bibliothek direkt an Wireframe-Elemente anzuhängen. Wenn du auf ein Element doppelklickst und im Eigenschaftenbereich nach unten scrollst, findest du den Abschnitt Block-Verbindungen. Klicke auf + Block hinzufügen, um einen Block (HTML, Komponente oder Vorlage) mit dem Element zu verknüpfen. Verbundene Blöcke werden bei der KI-gestützten Codegenerierung referenziert, was es einfach macht, spezifischen HTML- oder Komponentencode an Wireframe-Elemente anzuhängen.
Modifica con IA
Die KI-Eingabeleiste am unteren Rand der Leinwand ermöglicht es dir, KI zum Bearbeiten oder Erstellen von Bildschirmen zu verwenden. Wähle dein KI-Modell aus dem Dropdown links, beschreibe die gewünschten Änderungen und die KI wird das Wireframe für dich anpassen. Du kannst auch die Spracheingabe oder die Schaltfläche CLI-Bearbeitung für erweiterte Bearbeitung verwenden.
Prompt con riconoscimento del contesto
Einzelner Bildschirm
Beim Bearbeiten eines einzelnen Bildschirms zeigt die Prompt-Leiste „Bearbeite 'Bildschirmname'" an und KI-Änderungen gelten nur für diesen Bildschirm.
Storyboard
Im Storyboard-Modus kann die KI alle Frames auf einmal bearbeiten oder neue Frames unter Verwendung der vorhandenen als Referenz erstellen.
Spracheingabe
Verwenden Sie das Mikrofon-Symbol in der Prompt-Leiste, um Ihre Anweisungen zu diktieren, anstatt zu tippen.
CLI-Bearbeitung
Klicken Sie auf CLI-Bearbeitung für einen erweiterten Bearbeitungsmodus mit mehr Kontrolle über die KI-gestützten Änderungen.
Esportazione e integrazione
Wireframes können exportiert, importiert oder direkt verwendet werden, wenn Projekte erstellt werden oder innerhalb des Projekt-Hubs. Dies erleichtert den Übergang vom Wireframe-Design zu einem funktionierenden Projekt, ohne Designs manuell neu erstellen zu müssen.