Met Dev Mode kunnen ontwikkelaars zien wanneer een frame of component voor het laatst is bewerkt en wijzigingen vergelijken die op verschillende momenten in de versiegeschiedenis zijn aangebracht. Aangezien de overdracht tussen ontwerp en ontwikkeling iteratief kan zijn, zorgt het vergelijken van wijzigingen en versiegeschiedenis voor duidelijkheid in het proces. Door wijzigingen te vergelijken, kun je altijd de laatste updates bijhouden en de productiecode nauwkeurig houden.

Wijzigingen vergelijken

Als een frame of component is bijgewerkt sinds je deze voor het laatst hebt bekeken, kun je de versiegeschiedenis vergelijken. Ook kun je losstaande componenten of exemplaren met ontwerpoverschrijvingen vergelijken met de basiscomponent. 

1. Selecteer een frame of component op het hoogste niveau.

   Tip: Houd Shift ingedrukt en klik om twee componenten op het canvas te selecteren zodat je ze met elkaar kunt vergelijken.

2. Klik in het tabblad Inspecteren van de rechter zijbalk op Wijzigingen vergelijken.

• A

  Versiegeschiedenis

  Bekijk een tijdlijn van de geschiedenis van het bestand, inclusief opgeslagen en automatisch opgeslagen versies. Klik op een eerdere versie om deze te vergelijken met de huidige versie. Versiegeschiedenis wordt alleen getoond bij het vergelijken van een frame op het hoogste niveau in de loop van de tijd.

• B

  Bekijk bewerkte lagen

  Onder Lagen kun je bekijken hoe de afzonderlijke lagen van een hulpmiddel in de loop van de tijd zijn veranderd. Je kunt voor laagwijzigingen de volgende aanduidingen tegenkomen:

  • Bewerkt: De laag is bewerkt tussen de huidige en de geselecteerde versies
  • Toegevoegd: De laag is toegevoegd tussen de huidige en de geselecteerde versies
  • Verwijderd: De laag is verwijderd tussen de huidige en de geselecteerde versies

  Klik op een laag in de lijst om in to zoomen in op de geselecteerde laag in de zij-aan-zij- of deklaagweergave.

• C

  Zij aan zij

  Een zij-aan-zij-weergave van de geselecteerde versie en de huidige versie van een hulpmiddel. Pas de zoominstellingen van de modaal aan met de knoppen om in- en uit te zoomen aan de rechterkant.

• D

  Overlay

  Een deklaagweergave van de huidige frameversie bovenop de geselecteerde versie is nuttig om kleinere bewerkingen te laten opvallen. Gebruik de schuifbalk aan de rechterkant om de transparantie van het huidige frame aan te passen of klik op om de zichtbaarheid in- of uit te schakelen. Pas de zoominstellingen van de modaal aan met de knoppen om in- en uit te zoomen aan de rechterkant.

• E

  Code vergelijken

  Wanneer je een bewerkte laag selecteert, kun je de bijgewerkte code tussen de vorige en de huidige versie bekijken. Dit is een handige manier om ervoor te zorgen dat je codebase is afgestemd op de nieuwste ontwerpen.

  Gebruik de vervolgkeuzelijst om je gewenste taal voor het codepaneel te selecteren en klik op om je gewenste eenheid te selecteren.

  Lees verder over het gebruik van codefragmenten in Dev Mode →

• F

  Eigenschappen vergelijken

  Wanneer je een bewerkte laag selecteert, worden de bijgewerkte eigenschappen weergegeven, samen met de toegewezen waarden van de vorige en de huidige versie.

Wijzigingen vergelijken in de focusweergave

Als je je concentreert op een ontwerp in Dev Mode, kun je gebruikmaken van de versiegeschiedenis in de focusweergave om wijzigingen te vergelijken. De interface is bij het vergelijken van wijzigingen hetzelfde als onder Wijzigingen vergelijken.

Vergelijk als volgt wijzigingen in de focusweergave:

1. Open een Figma Design-bestand.
2. Klik op het canvas, voor het ontwerp waarop je wilt focussen, op de ontwikkelingsstatusindicator en selecteer Tonen in focusweergave.
   Als er niets is geselecteerd, toont de focusweergave de versiegeschiedenis aan de rechterkant van de weergave.
3. Voor de versie die je wilt vergelijken met de nieuwste, klik je op … en selecteer je Vergelijken met de nieuwste versie.
   
4. Klik op Link kopiëren om een link naar de focusweergave met anderen te delen (optioneel).

Lees verder over de focusweergave →