Inspectiehandleiding
Als je UI3 gebruikt, het nieuwe ontwerp van Figma, komen sommige delen van dit artikel mogelijk niet overeen met wat je nu in het product ziet. We waarderen je geduld terwijl we de updates doorvoeren. Lees verder over Figma’s herontwerp →
Het inspecteren van ontwerpen helpt ontwikkelaars of andere belanghebbenden de structuur en eigenschappen van een ontwerp te begrijpen, zodat ze dit gemakkelijker naar code kunnen vertalen.
Hoe je een ontwerpbestand inspecteert, hangt af van het type abonnement, het soort werkplek en je bestandsmachtigingen. Gebruik de tool hieronder om te zien hoe je veelvoorkomende inspectietaken uitvoert, zoals exporteren, meten, code genereren, annotaties bekijken en plugins gebruiken voor ontwikkeling, op basis van je persoonlijke toegang tot het bestand dat je wilt inspecteren.
Er is altijd een inspectiemogelijkheid, ongeacht je bestandstoegang.
Controleer eerst of je toegang hebt tot Dev Mode in het bestand dat je inspecteert door bovenaan het bestand naar Dev Mode te schakelen of door de sneltoets Shift D te gebruiken. Als je geen toegang hebt tot Dev Mode, inspecteer je in Design Mode. Je kunt aangeven of je de toegangsrechten Kan bewerken of Kan bekijken hebt om te bepalen hoe je kunt inspecteren.
Ik heb geen Dev Mode en ik heb alleen toegangsrechten om te bekijken
Heb je toegang nodig tot Dev Mode? Als je het Starter-plan hebt, moet je opwaarderen naar een betaald abonnement of je bestand verplaatsen naar een betaald team. Als je een betaald abonnement hebt, heb je een Volledige of Dev-werkplek nodig.
Afstanden meten
Je kunt afstanden tussen objecten meten, zelfs als ze genest zijn binnen frames, groepen of componenten.
- Selecteer het eerste object op het canvas.
- Houd de modificatietoets ingedrukt:
- Mac: ⌥ Option
- Windows: Alt
- Beweeg je muis naar het tweede object.
Figma geeft een rode lijn tussen de twee objecten weer, evenals horizontale en verticale afmetingen.
Tip: Ervaar je problemen bij het meten? Bekijk de handleiding voor het meten van de afstand tussen objecten.
Genereer code
Je kunt automatisch gegenereerde codefragmenten kopiëren voor CSS, iOS of Android.
- Selecteer een object op het canvas.
- Klik met de rechtermuisknop op het object en selecteer Kopiëren/Plakken als > Kopiëren als code.
- Selecteer de code-optie die past bij je behoeften.
Eigenschappen weergeven
Het tabblad Eigenschappen geeft een lijst met eigenschappen van objecten op het canvas. Dit omvat eigenschappen zoals: indeling, kleur, typografie, tekststrings, eigenschappen van de component, stijlen en variabelen. Bekijk als volgt de eigenschappen van een object:
- Selecteer een object op het canvas.
- Klik op het tabblad Eigenschappen in de rechter zijbalk.
Export
- Selecteer de lagen die je wilt exporteren. Als je het hele canvas van de huidige pagina wilt exporten, deselecteer dan alles op het canvas.
- In het tabblad Exporteren klik je op het pluspictogram om een exportconfiguratie toe te voegen. Je kunt zoveel exportconfiguraties aan een selectie toevoegen als je wilt.
- Stel de exportinstellingen in. Lees verder over Figma's exportformaten en instellingen →
- Klik indien nodig op Voorbeeld om te zien hoe je hulpmiddel eruit zal zien. Als je meerdere objecten hebt geselecteerd, wordt de Voorbeeld-instelling niet weergegeven.
- Klik op Exporteren.
Tip: Wil je meer weten over exporteren? Bekijk de volledige handleiding voor exports in Figma.
Opmerkingen bekijken of toevoegen
Reacties helpen ontwerpers en ontwikkelaars samen te werken door de aandacht te vestigen op specifieke onderdelen van het ontwerp. Je kunt reacties plaatsen om meer context te delen over hoe onderdelen van het ontwerp moeten werken.
- Klik op in de werkbalk, of druk op C om de reactiemodus te activeren. Je cursor verandert in een .
- Selecteer een locatie om op te reageren:
- Klik op de locatie op het canvas waar je de reactie wilt vastmaken.
- Of klik en sleep je cursor om een gebied te selecteren waar je op wilt reageren.
- Typ je bericht in het veld. Typ @ om een collega of medewerker te vermelden.
- Klik op om je bericht te verzenden.
Plug-ins gebruiken
Je hebt het toegangsrecht Kan bewerken nodig om plugins in een bestand te kunnen gebruiken.
Ik heb geen Dev Mode en ik heb "Kan bewerken" toegangsrecht
Heb je toegang nodig tot Dev Mode? Als je het Starter-plan hebt, moet je opwaarderen naar een betaald abonnement of je bestand verplaatsen naar een betaald team. Als je een betaald abonnement hebt, heb je een Volledige of Dev-werkplek nodig.
Kan bewerken tot een Design, kun je de inspectietools direct in de ontwerpmodus gebruiken:
Afstanden meten
Je kunt afstanden tussen objecten meten, zelfs als ze genest zijn binnen frames, groepen of componenten.
- Selecteer het eerste object op het canvas.
- Houd de modificatietoets ingedrukt:
- Mac: ⌥ Option
- Windows: Alt
- Beweeg je muis naar het tweede object.
Figma geeft een rode lijn tussen de twee objecten weer, evenals horizontale en verticale afmetingen.
Tip: Ervaar je problemen bij het meten? Bekijk de handleiding voor het meten van de afstand tussen objecten.
Genereer code
Je kunt automatisch gegenereerde codefragmenten kopiëren voor CSS, iOS of Android.
- Selecteer een object op het canvas.
- Klik met de rechtermuisknop op het object en selecteer Kopiëren/Plakken als > Kopiëren als code.
- Selecteer de code-optie die past bij je behoeften.
Eigenschappen weergeven
Het tabblad Design biedt je een lijst met eigenschappen van objecten op het canvas. Dit omvat eigenschappen zoals: indeling, kleur, typografie, tekststrings, eigenschappen van de component, stijlen en variabelen. Bekijk als volgt de eigenschappen van een object:
- Selecteer een object op het canvas.
- Blader in het tabblad Design in de rechter zijbalk naar het gedeelte met de eigenschappen die je wilt inspecteren.
Export
- Selecteer de lagen die je wilt exporteren. Als je het hele canvas van de huidige pagina wilt exporten, deselecteer dan alles op het canvas.
- Klik op het tabblad Design en klik op het pluspictogram in het gedeelte Exporteren om een exportconfiguratie toe te voegen. Je kunt zoveel exportconfiguraties aan een selectie toevoegen als je wilt.
- Stel de exportinstellingen in. Lees verder over Figma's exportformaten en instellingen →
- Klik indien nodig op Voorbeeld om te zien hoe je hulpmiddel eruit zal zien. Als je meerdere objecten hebt geselecteerd, wordt de Voorbeeld-instelling niet weergegeven.
- Klik op Exporteren.
Tip: Wil je meer weten over exporteren? Bekijk de volledige handleiding voor exports in Figma.
Opmerkingen bekijken of toevoegen
Reacties helpen ontwerpers en ontwikkelaars samen te werken door de aandacht te vestigen op specifieke onderdelen van het ontwerp. Je kunt reacties plaatsen om meer context te delen over hoe onderdelen van het ontwerp moeten werken.
- Klik op in de werkbalk, of druk op C om de reactiemodus te activeren. Je cursor verandert in een .
- Selecteer een locatie om op te reageren:
- Klik op de locatie op het canvas waar je de reactie wilt vastmaken.
- Of klik en sleep je cursor om een gebied te selecteren waar je op wilt reageren.
- Typ je bericht in het veld. Typ @ om een collega of medewerker te vermelden.
- Klik op om je bericht te verzenden.
Plug-ins gebruiken
Je kunt een plug-in uitvoeren vanuit de Community of rechtstreeks vanuit een bestand in Figma of FigJam.
- Klik op Hulpbronnen in de werkbalk.
- Kies op het tabblad Plugins uit je recent gebruikte of opgeslagen plug-ins of zoek een plug-in in de Community.
- Klik op een plug-in om de details te bekijken.
- Klik op Uitvoeren om de plug-in in het huidige bestand uit te voeren.
Meer informatie over het gebruik van plug-ins in bestanden →
Ik heb Dev Mode
Om ontwerpen te inspecteren, ga je naar Dev Mode door de Dev Mode-schakelaar te selecteren met de sneltoets Shift D. Van daaruit kun je de volgende inspectietools gebruiken:
Afstanden meten
Je kunt afstanden tussen objecten meten, zelfs als ze genest zijn binnen frames, groepen of componenten. Selecteer in Dev Mode een boven- of onderliggende laag op het canvas. Wanneer je met de muis over omringende lagen beweegt, toont Figma de opvulwaarden of de afstanden tussen de twee objecten. Je kunt ook de afstand tussen specifieke objecten meten:
- Selecteer het eerste object op het canvas.
- Houd de modificatietoets ingedrukt:
- Mac: ⌥ Option
- Windows: Alt
- Beweeg je muis naar het tweede object.
Figma geeft een rode lijn tussen de twee objecten weer, evenals horizontale en verticale afmetingen.
Genereer code
Klik op een object op het canvas in Dev Mode om het gedeelte Code in het inspectiepaneel te vullen. Afhankelijk van wat je selecteert, wordt er een typografisch voorbeeld of een kadermodel weergegeven, gevolgd door automatisch gegenereerde codefragmenten voor het object.
Ga als volgt te werk om je taal- en eenheidsselectie te wijzigen of een codegen-plug-in te gebruiken:
- Selecteer rechtsboven in het gedeelte Code een taal of plug-in uit het keuzemenu.
- Klik indien nodig op Instellingen inspecteren en selecteer een eenheid uit het keuzemenu.
Ontdek hoe je codefragmenten kunt gebruiken in Dev Mode→
Let op: Sommige Dev Mode-functies, zoals het gedeelte Code, worden niet weergegeven in het inspectiepaneel als kopiëren en delen voor het bestand zijn uitgeschakeld.
Eigenschappen weergeven
In Dev Mode geeft het tabblad Inspecteren een lijst met eigenschappen van objecten op het canvas. Dit omvat eigenschappen zoals: indeling, kleur, typografie, tekststrings, eigenschappen van de component, stijlen en variabelen. Bekijk als volgt de eigenschappen van een object:
- Selecteer in Dev Mode een object op het canvas.
- Scroll het tabblad Inspecteren in de rechter zijbalk naar het gedeelte met de eigenschappen die je wilt bekijken.
Tip: Als je een component of exemplaar inspecteert, zie je een voorbeeld van de component, een link naar de hoofdcomponent en eventuele links naar relevante documentatie en hulpbronnen voor ontwikkelaars. De testomgeving voor componenten verschijnt in het Inspectiepaneel wanneer een componentexemplaar is geselecteerd. Gebruik de testomgeving om te experimenteren met de verschillende eigenschappen van de componenten zonder het eigenlijke ontwerp te veranderen.
Verken variabelen
Dev Mode biedt verschillende manieren om met variabelen te werken bij het inspecteren van een ontwerp:
- Bekijk details over een variabele, inclusief de waarde en de modus. Je kunt van modi wisselen en, als de waarde aliassen gebruikt, de hele aliasketen tot aan de ruwe waarde van de variabele.
- Ontvang voorgestelde variabelen voor ruwe waarden in een ontwerp, als de waarden overeenkomen met een of meer van je bestaande variabelen.
- Krijg toegang tot de variabelencollecties die in het huidige bestand zijn aangemaakt en bekijk alle variabelen en modi in een tabel.
Zie Variabelen in Dev Mode voor meer informatie.
Hulpmiddelen exporten of downloaden
Dev Mode kan automatisch pictogrammen detecteren en ze als downloadbare hulpmiddelen voor ontwikkelaars presenteren. Je ziet deze hulpmiddelen in het tabblad Inspecteren boven de exportinstellingen. Zweef met je muis over een item, selecteer een bestandstype en klik op het downloadpictogram.
Stel als volgt een aangepaste export in:
- Selecteer in Dev Mode de lagen die je wilt exporteren.
- Klik op het tabblad Inspecteren op het pluspictogram in het gedeelte exporteren om een exportconfiguratie toe te voegen. Je kunt zoveel exportconfiguraties aan een selectie toevoegen als je wilt.
- Stel de exportinstellingen in. Lees verder over Figma's exportformaten en instellingen →
- Klik indien nodig op Voorbeeld om te zien hoe je hulpmiddel eruit zal zien. Als je meerdere objecten hebt geselecteerd, wordt de Voorbeeld-instelling niet weergegeven.
- Klik op Exporteren.
Aantekeningen bekijken of toevoegen
Met aantekeningen kunnen ontwerpers belangrijke details over een ontwerp direct aan ontwikkelaars overbrengen. Dit omvat het markeren van belangrijke eigenschappen, het visualiseren van afstanden en afmetingen met metingen, of het delen van context met tekstnotities.
In Dev Mode verschijnen aantekeningen op het canvas als een groene stip. Klik op een aantekening om de inhoud ervan weer te geven.
Opmerking: Je hebt een volledige licentie en de toegangsrechten Kan bewerken nodig om aantekeningen aan een bestand toe te voegen.
Voeg als volgt aantekeningen toe aan een ontwerp:
- Klik op de Dev Mode-schakelaar in de rechterbovenhoek van de werkbalk of gebruik de sneltoets Shift D.
- Klik op Aantekeningen in de werkbalk of gebruik de sneltoets Shift T.
- Selecteer de laag waar je een aantekening bij wilt plaatsen.
- Schrijf een notitie in het tekstveld of klik op + Eigenschap om een eigenschap uit de lijst te selecteren. Je kunt in een aantekening zowel platte tekst als eigenschappen opnemen.
Voeg als volgt een meting toe aan een ontwerp:
- Klik op Meten in de werkbalk of gebruik de sneltoets Shift M.
- Beweeg de muis over een laag om opties te zien waar je de meting kunt beginnen.
- Klik en sleep vanaf je startpunt naar de laag waar je de meting wilt eindigen.
- Klik en sleep de meting zodat deze het ontwerp niet bedekt.
Plug-ins gebruiken
Het tabblad Plugins in de Dev Mode geeft recent gebruikte plug-ins en aanbevolen plug-ins van de Figma Community.
Ontdek hoe je plug-ins in bestanden kunt gebruiken →
Wijzigingen vergelijken
Als een frame of component is bijgewerkt sinds je deze voor het laatst hebt bekeken, kun je de versiegeschiedenis vergelijken. Dit helpt je de laatste updates bij te houden en de productiecode nauwkeurig te houden.
Je kunt ook vrijstaande componenten – of exemplaren met ontwerpoverschrijvingen – vergelijken met de basiscomponent.
- Selecteer een frame of component op het hoogste niveau.
- Klik in het tabblad Inspecteren in de rechter zijbalk op Wijzigingen vergelijken.
Tip: Houd Shift ingedrukt en klik om twee componenten op het canvas te selecteren en ze met elkaar te vergelijken.
Meer informatie over het vergelijken van wijzigingen in Dev Mode →