Twee afsprakenpagina’s zien er netjes uit. Beide hebben een datumveld en een knop Opslaan. Op de eerste wijzigt een dialoogvenster de afspraak; op de tweede opent een aparte pagina. Welke versie is beter? Een screenshot helpt bij kleuren en afstanden. Het laat maar beperkt zien of mensen de flow begrijpen.
Op 15 oktober 2026 stelde Figma Code Layers open als bèta. Ondersteunde prototypes kunnen met code verder worden ontwikkeld en op het gedeelde ontwerpcanvas worden vergeleken; bestaande code kan onder de gedocumenteerde voorwaarden worden ingebracht. Redactioneel gezien is het interessante aspect het gezamenlijk werken aan gedrag. Een prototype wordt daardoor het onderwerp van een beslissing in plaats van alleen het aantrekkelijke resultaat te tonen.
Eerst dezelfde taak, dan verschillende interfaces
Ons eigen voorbeeld is een verenigingsevenement. De persoon moet de datum wijzigen, de deelnamevoorwaarde lezen en vervolgens opslaan of annuleren. Beide versies krijgen dezelfde titel, dezelfde datum en dezelfde langere opmerking. Als één versie alleen een korte tijdelijke titel liet zien, zou de vergelijking al scheef zijn.
Het dialoogvenster houdt het afsprakenoverzicht op de achtergrond. Een aparte bewerkingspagina biedt meer ruimte. Dit zijn verschillende ontwerpbeslissingen, geen kwaliteitsoordelen. Interessant wordt het bij de overgangen: waar is de persoon na het opslaan? Wat gebeurt er met begonnen invoer bij annuleren? Welke informatie blijft zichtbaar tijdens de wijziging?
Een toestandsmodel maakt gedrag bespreekbaar
Beschrijf de flow eerst zonder programmeersyntaxis. De afspraak is zichtbaar. Bewerken opent een invoer. Ongeldige invoer leidt tot een uitleg en de geldige gegevens blijven behouden. Opslaan toont de bevestigde toestand. Annuleren keert terug naar de ongewijzigde toestand. Dit zijn eisen voor ons voorbeeld, geen belofte over ingebouwde functies van Figma.
View → Edit → Input
Input → valid → Save → Confirmation
Input → invalid → Hint + input kept
Input → Cancel → original viewMet dit kleine model kan elke versie gericht worden onderzocht. Misschien ziet het dialoogvenster er uitstekend uit, maar verliest het de hinttekst wanneer er een fout optreedt. Misschien is de aparte pagina minder elegant, maar maakt ze de weg terug begrijpelijker. De beoordeling gaat dan over waarneembaar gedrag, niet over een algemene voorkeur voor dialoogvensters.
Feedback heeft een gedeeld referentiepunt nodig
Een bruikbare opmerking luidt: ‘Na het annuleren kon ik niet zien of mijn nieuwe datum was opgeslagen.’ Ze noemt de plek, de handeling en de onzekerheid. ‘Voelt niet modern genoeg’ levert daarentegen nog geen vraag op waar iemand mee aan de slag kan. Wanneer ontwerpen en opmerkingen op hetzelfde canvas staan, kan de koppeling met de bekeken versie behouden blijven.
Noteer bij elke wijziging welke onzekerheid ze moet wegnemen. Wijzig bijvoorbeeld eerst de bevestiging, in plaats van tegelijk het lettertype, de kleuren en de navigatie aan te passen. Zo is beter te begrijpen waarom een tweede versie anders overkomt. Dit is geen gecontroleerd bruikbaarheidsonderzoek, maar wel een verstandige werkdiscipline voor de ontwerpfase.
De beslissing is overdraagbaar; de code niet automatisch
Aan het eind hoort een korte overdrachtsnotitie: de voorkeursversie, de taak die ze ondersteunt, de relevante toestanden en de resterende vragen. Een interactief ontwerp met voorbeeldgegevens is nog geen echt boekingsplatform. Aanmelden, opgeslagen gegevens en daadwerkelijke rechten moeten in een applicatie afzonderlijk werken.
Voor een kleine client-side toevoeging aan een KENJTEC-pagina kan de beslissing vervolgens worden uitgevoerd als je eigen HTML, CSS en JavaScript. De KENJTEC WebSiteBuilder ai biedt hiervoor een ontwikkelaarsmodus, met een geïsoleerde preview en een eigen stap voor het publiceren van code. Je zet het relevante onderdeel zelf over; dit betekent geen Figma-import en geen hosting voor een willekeurige applicatie.
Volgens de gedocumenteerde stand blijft Code Layers een bèta. Beschikbaarheid, ondersteunde startprojecten en voorwaarden moeten vóór elke concrete handleiding opnieuw worden gecontroleerd. De methode houdt echter stand, ongeacht de tool: vergelijk niet alleen twee aantrekkelijke schermen. Vergelijk twee navolgbare antwoorden op dezelfde vraag hoe iets wordt gebruikt.
Bronnen en status
Onderzoek en documentatie met stand van 25 oktober 2026. Samen ontwerpen met code layers op het canvas.
