Canvasredigerare
Wireframe-redigeringens canvas ar dar du designar och forfinar dina skarmar. Det vanstra sidofaltet innehaller alla ritnings- och urvalsverktyg, mitten ar canvasen dar du placerar och arrangerar element, och det hogra sidofaltet visar egenskaperna for det valda elementet.
Verktyg
Valj
Klicka for att valja och flytta element pa canvasen. Valda element visar sina egenskaper i hogra sidofaltet.
Fyrkant
Rita rektangulara containerelement pa canvasen.
Cirkel
Rita cirkulara element pa canvasen.
Text
Lagg till textetiketter och innehallsblock.
Bild
Placera bildplatshallarelement.
Knapp
Lagg till interaktiva knappelement.
Inmatning
Lagg till formularinmatningsfalt.
+ (Lagg till skarm)
Lagg till en ny skarm till wireframe-projektet.
Lasta element
AI-genererade skarmar ar lasta som standard — element kan inte flyttas eller storleksandras forruan de lases upp. Tryck pa Ctrl + D for att lasa upp alla element pa den aktuella skarmen, vilket ger dig full kontroll att omorganisera och redigera dem.
Storyboard-lage
Storyboard-laget later dig se alla dina ramar och deras anslutningspunkter i en fagelperspektivvy. Vaxla mellan enkelskarms-canvasen och storyboard-laget med samma knapp i det vanstra sidofaltet. I storyboard-laget visas varje skarm som ett kort med en forhandsgranskning av dess layout.
Storyboard-funktioner
Ramoversikt
Se alla skarmar med en blick med deras elementantal och visuella forhandsgranskningar.
Stall in modal
Markera valfri skarm som ett modalt overlagg istallet for en helsida.
Klicka for att redigera
Klicka pa valfritt ramkort for att hoppa till dess canvasvy for detaljerad redigering.
Zoomkontroller
Anvand zoomkontrollerna till vanster for att zooma in/ut pa storyboarden.
Flodeskopplingar
Visualisera hur skarmar ar sammankopplade genom flodesatgarder mellan ramar.
Elementegenskaper
Dubbelklicka pa valfritt canvaselement for att ga in i det och oppna dess egenskapspanel i hoger sidofalt. Panelen har tre flikar: Egenskaper, Flode och Farger. Harifran kan du redigera varje elements position, storlek, stil och beteende.
Egenskaper-flik
Position (X, Y)
Stall in den exakta pixelpositionen for elementet pa canvasen.
Storlek (Bredd, Hojd)
Stall in elementets dimensioner i pixlar.
Z-Index (lagerordning)
Styr vilka element som visas ovanpa andra.
Kantradie
Stall in hornavrundning med ett numeriskt varde eller anvand forinstellningarna Skarp, Avrundad eller Pill.
Textinnehall
Redigera texten som visas inuti elementet.
Farger-flik
Anpassa bakgrunds-, kant- och textfarger for det valda elementet.
Floden
Floden definierar atgarder och navigering mellan skarmar. Ett flode ar en atgard sasom att navigera till en annan sida, oppna en modal eller dirigera till ett annat omrade. Sma lankikoner pa canvasen indikerar vilka element som har floden bifogade. Ramar lankas automatiskt till varandra under AI-generering, och flodeskopplingar skapas ocksa.
Konfigurera floden
Valj ett element
Klicka pa elementet du vill lagga till ett flode till.
Oppna flodesflik
I hogra sidofaltet, byt till fliken Flode for att se befintliga kopplingar eller lagga till nya.
Lagg till koppling
Klicka pa Lagg till forsta kopplingen (eller +-knappen) for att skapa ett nytt flode. Valj en malskarm eller ram att lanka till.
Visa pa canvas
Kopplade element visar en liten lankikon pa canvasen for att indikera att de har flodesatgarder.
Blockkopplingar
Blockanslutningar later dig bifoga block fran Blockbiblioteket direkt till wireframe-element. Nar du dubbelklickar pa ett element och scrollar ner i egenskapspanelen hittar du sektionen Blockanslutningar. Klicka pa + Lagg till Block for att lanka ett block (HTML, komponent eller mall) till elementet. Anslutna block refereras vid AI-kodgenerering, vilket gor det enkelt att bifoga specifik HTML- eller komponentkod till wireframe-element.
AI-redigering
AI-promptfaltet langst ner pa canvasen later dig anvanda AI for att redigera eller skapa skarmar. Valj din AI-modell fran rullgardinsmenyn till vanster, beskriv de andringar du onskar och AI kommer att modifiera wireframen at dig. Du kan aven anvanda rostinmatning eller knappen CLI-redigering for avancerad redigering.
Kontextmedveten promptning
Enkel skarm
Nar du redigerar en enskild skarm visar promptfaltet "Redigerar 'Skarmnamn'" och AI-andringar tillampas enbart pa den skarmen.
Storyboard
I storyboard-lage kan AI redigera alla ramar pa en gang eller bygga nya ramar med de befintliga som referens.
Rostinmatning
Anvand mikrofonikonen i promptfaltet for att diktera dina instruktioner istallet for att skriva.
CLI-redigering
Klicka pa CLI-redigering for ett avancerat redigeringslage med mer kontroll over de AI-drivna andringarna.
Export och integration
Wireframes kan exporteras, importeras eller anvandas direkt vid skapande av projekt eller inom Projekthubben. Detta gor det enkelt att ga fran wireframe-design till ett funktionellt projekt utan att aterskap designerna manuellt.