To aftalesider ser ryddelige ud. Begge har et datofelt og en Gem-knap. På den første ændrer en dialog aftalen; på den anden åbnes en separat side. Hvilken version er bedst? Et skærmbillede hjælper med farver og afstande. Det viser kun i begrænset omfang, om folk forstår forløbet.
Den 15. oktober 2026 åbnede Figma for Code Layers som beta. Understøttede prototyper kan videreudvikles med kode og sammenlignes på det fælles designlærred; eksisterende kode kan hentes ind under de dokumenterede betingelser. Redaktionelt set er det interessante aspekt at arbejde sammen om adfærd. En prototype bliver dermed genstand for en beslutning i stedet for blot at vise sit flotte resultat.
Først den samme opgave, så forskellige brugerflader
Vores eget eksempel er et foreningsarrangement. Personen skal ændre datoen, læse betingelsen for deltagelse og derefter enten gemme eller annullere. Begge versioner får den samme titel, den samme dato og den samme længere note. Hvis den ene version kun viste en kort pladsholdertitel, ville sammenligningen allerede være skæv.
Dialogen holder aftaleoversigten i baggrunden. En separat redigeringsside giver mere plads. Det er forskellige designbeslutninger, ikke kvalitetsvurderinger. Det bliver interessant ved overgangene: Hvor er personen efter at have gemt? Hvad sker der med påbegyndt input, når vedkommende annullerer? Hvilke oplysninger forbliver synlige under ændringen?
En tilstandsmodel gør adfærd til noget, du kan diskutere
Beskriv først forløbet uden programmeringssyntaks. Aftalen er synlig. Rediger åbner et inputfelt. Ugyldigt input fører til en forklaring, og de gyldige indtastninger bevares. Gem viser den bekræftede tilstand. Annuller vender tilbage til den uændrede tilstand. Det er krav til vores eksempel, ikke et løfte om indbyggede Figma-funktioner.
View → Edit → Input
Input → valid → Save → Confirmation
Input → invalid → Hint + input kept
Input → Cancel → original viewMed denne lille model kan hver version undersøges målrettet. Måske ser dialogen fremragende ud, men mister hjælpeteksten, når der opstår en fejl. Måske er den separate side mindre elegant, men gør vejen tilbage lettere at forstå. Vurderingen handler så om observerbar adfærd, ikke om en generel præference for dialoger.
Feedback kræver et fælles referencepunkt
En brugbar kommentar lyder: “Efter at jeg havde annulleret, kunne jeg ikke se, om min nye dato var blevet gemt.” Den nævner stedet, handlingen og usikkerheden. “Føles ikke moderne nok” giver derimod endnu ikke et spørgsmål, som nogen kan arbejde med. Når udkast og kommentarer ligger på det samme lærred, kan koblingen til den version, der blev set på, bevares.
Notér for hver ændring, hvilken usikkerhed den skal fjerne. Ændr for eksempel først bekræftelsen i stedet for at ændre skrifttype, farver og navigation på samme tid. Så er det lettere at forstå, hvorfor en anden version virker anderledes. Dette er ikke en kontrolleret brugervenlighedsundersøgelse, men det er en fornuftig arbejdsdisciplin i designfasen.
Beslutningen kan overføres; koden kan ikke automatisk
Til sidst bør der være en kort overdragelsesnote: den foretrukne version, den opgave, den understøtter, de relevante tilstande og de åbne spørgsmål. Et interaktivt udkast med eksempeldata er endnu ikke en rigtig bookingplatform. Login, lagrede data og faktiske tilladelser skal fungere separat i en applikation.
Til en lille klientside-tilføjelse på en KENJTEC-side kan beslutningen derefter implementeres som din egen HTML, CSS og JavaScript. Til det formål tilbyder KENJTEC WebSiteBuilder ai en udviklertilstand med en isoleret forhåndsvisning og sit eget trin til kodeudgivelse. Du overfører selv den relevante komponent; det betyder ikke en Figma-import eller hosting af en hvilken som helst applikation efter eget valg.
Ifølge den dokumenterede status er Code Layers fortsat en beta. Tilgængelighed, understøttede startprojekter og betingelser bør tjekkes igen før enhver konkret vejledning. Metoden holder dog uanset værktøjet: Sammenlign ikke bare to flotte skærmbilleder. Sammenlign to sporbare svar på det samme spørgsmål om, hvordan noget bruges.
Kilder og status
Research og dokumentation pr. 25. oktober 2026. Design sammen med code layers på lærredet.
