Canvas-editor
Het wireframe-bewerkingscanvas is waar je je schermen ontwerpt en verfijnt. De linkerzijbalk bevat alle teken- en selectiegereedschappen, het midden is het canvas waar je elementen plaatst en rangschikt en de rechterzijbalk toont de eigenschappen van het geselecteerde element.
Gereedschappen
Selecteren
Klik om elementen op het canvas te selecteren en te verplaatsen. Geselecteerde elementen tonen hun eigenschappen in de rechterzijbalk.
Vierkant
Teken rechthoekige containerelementen op het canvas.
Cirkel
Teken cirkelvormige elementen op het canvas.
Tekst
Voeg tekstlabels en inhoudsblokken toe.
Afbeelding
Plaats afbeeldingsplaatshouderelementen.
Knop
Voeg interactieve knopelementen toe.
Invoer
Voeg formulierinvoervelden toe.
+ (Scherm toevoegen)
Voeg een nieuw scherm toe aan het wireframeproject.
Vergrendelde elementen
AI-gegenereerde schermen zijn standaard vergrendeld — elementen kunnen niet worden verplaatst of van grootte worden veranderd totdat ze zijn ontgrendeld. Druk op Ctrl + D om alle elementen op het huidige scherm te ontgrendelen, waardoor je volledige controle krijgt om ze te herschikken en te bewerken.
Storyboardmodus
Storyboardmodus laat je al je frames en hun verbindingspunten in een vogelperspectief zien. Wissel tussen het enkelschermscanvas en storyboardmodus met dezelfde knop in de linkerzijbalk. In storyboardmodus wordt elk scherm weergegeven als een kaart met een voorvertoning van de indeling.
Storyboardfuncties
Frameoverzicht
Bekijk alle schermen in één oogopslag met hun elementaantallen en visuele voorvertoningen.
Modaal instellen
Markeer elk scherm als een modale overlay in plaats van een volledige pagina.
Klik om te bewerken
Klik op een framekaart om naar de canvasweergave te springen voor gedetailleerde bewerking.
Zoombedieningen
Gebruik de zoombedieningen links om in/uit te zoomen op het storyboard.
Stroomverbindingen
Visualiseer hoe schermen zijn verbonden via stroomacties tussen frames.
Elementeigenschappen
Dubbelklik op een element op het canvas om erin te gaan en het eigenschappenpaneel te openen in de rechterzijbalk. Het paneel heeft drie tabbladen: Eigenschappen, Stroom en Kleuren. Vanaf hier kun je de positie, grootte, stijl en het gedrag van elk element bewerken.
Tabblad eigenschappen
Positie (X, Y)
Stel de exacte pixelpositie van het element op het canvas in.
Grootte (Breedte, Hoogte)
Stel de afmetingen van het element in pixels in.
Z-Index (Laagvolgorde)
Bepaal welke elementen bovenop andere verschijnen.
Randradius
Stel hoekafronding in met een numerieke waarde of gebruik de presets Scherp, Afgerond of Pil.
Tekstinhoud
Bewerk de tekst die in het element wordt weergegeven.
Tabblad kleuren
Pas achtergrond-, rand- en tekstkleuren aan voor het geselecteerde element.
Stromen
Stromen definiëren acties en navigatie tussen schermen. Een stroom is een actie zoals navigeren naar een andere pagina, een modaal venster openen of routeren naar een ander gebied. Kleine linkpictogrammen op het canvas geven aan welke elementen stromen hebben. Frames worden automatisch aan elkaar gekoppeld tijdens AI-generatie en stroomverbindingen worden ook aangemaakt.
Stromen instellen
Selecteer een element
Klik op het element waaraan je een stroom wilt toevoegen.
Stroomtabblad openen
Schakel in de rechterzijbalk naar het tabblad Stroom om bestaande verbindingen te zien of nieuwe toe te voegen.
Verbinding toevoegen
Klik op Eerste verbinding toevoegen (of de + knop) om een nieuwe stroom aan te maken. Kies een doelscherm of frame om naar te koppelen.
Bekijken op canvas
Verbonden elementen tonen een klein linkpictogram op het canvas om aan te geven dat ze stroomacties hebben.
Blokverbindingen
Blokverbindingen stellen je in staat om blokken uit de Blokbibliotheek direct aan wireframe-elementen te koppelen. Wanneer je dubbelklikt op een element en naar beneden scrollt in het eigenschappenpaneel, vind je de sectie Blokverbindingen. Klik op + Blok Toevoegen om een blok (HTML, component of template) aan het element te koppelen. Gekoppelde blokken worden gerefereerd bij het genereren van code met AI, waardoor het eenvoudig is om specifieke HTML- of componentcode aan wireframe-elementen te koppelen.
AI-bewerking
De AI-promptbalk onderaan het canvas stelt je in staat om AI te gebruiken om schermen te bewerken of te maken. Selecteer je AI-model uit het dropdown-menu links, beschrijf de gewenste wijzigingen en de AI past het wireframe voor je aan. Je kunt ook spraakinvoer of de CLI Bewerken-knop gebruiken voor geavanceerde bewerking.
Contextbewuste prompting
Enkel scherm
Bij het bewerken van een enkel scherm toont de promptbalk "Bewerken van 'Schermnaam'" en worden AI-wijzigingen alleen op dat scherm toegepast.
Storyboard
In storyboardmodus kan AI alle frames tegelijk bewerken of nieuwe frames bouwen met de bestaande als referentie.
Spraakinvoer
Gebruik het microfoonpictogram in de promptbalk om je instructies te dicteren in plaats van te typen.
CLI-bewerking
Klik op CLI-bewerking voor een geavanceerde bewerkingsmodus met meer controle over de AI-aangedreven wijzigingen.
Export & integratie
Wireframes kunnen worden geëxporteerd, geïmporteerd of direct gebruikt bij het maken van projecten of binnen de Projecthub. Dit maakt het eenvoudig om van wireframe-ontwerp naar een werkend project te gaan zonder ontwerpen handmatig opnieuw te maken.