Voeg metingen en aantekeningen toe aan ontwerpen
Dit artikel is beschikbaar voor zowel de vorige Figma UI als de nieuwe Figma UI. Gebruik de schakelaar linksonderin de pagina om je huidige UI te selecteren. Ontdek UI3: Figma's herontwerp →
Voordat je begint
Wie kan deze functie gebruiken?
Beschikbaar op alle betaalde abonnementen
Iedereen met een Volledige werkplek en de toegangsrechten kan bewerken
tot een bestand kan metingen en annotaties toevoegen.
Iedereen met een Volledige of een Dev-werkplek en ten minste de toegangsrechten Kan bekijken
tot een bestand kan metingen en annotaties bekijken
Gebruik aantekeningen en metingen om sneller duidelijke overdrachtsmaterialen maken, die ook up-to-date blijven als er wijzigingen in de projecten zijn.
Met aantekeningen kunnen ontwerpers belangrijke details direct communiceren en verbinden met hun ontwerpen:
- Markeer belangrijke eigenschappen zodat ontwikkelaars ze niet over het hoofd kunnen zien
- Help ontwikkelaars snel specificaties zoals afstanden en afmetingen te visualiseren
- Deel aanvullende context met tekstnotities
- Maak aantekeningen en categoriseer ze voor eenvoudigere navigatie
Ontwikkelaars kunnen zien hoe annotaties in realtime worden bijgewerkt terwijl ze in Dev Mode werken, zodat ze tijdens de overdracht geen cruciale opmerkingen missen.
Voeg metingen toe aan een ontwerp
Voeg metingen toe om snel de afstanden tussen componenten en hun afmetingen zichtbaar te maken.
Voeg als volgt een meting toe aan een ontwerp:
- Klik op Meting 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.
- Dubbelklik op de meting om de tekst aan te passen.
Tip: Om een meting te verwijderen, klik je erop en druk je op de Delete of Backspace -toets.
Aantekeningen toevoegen aan een ontwerp
Ontwerpers kunnen aantekeningen toevoegen om context te bieden, ontwerpeigenschappen te definiëren of andere relevante informatie door te geven aan ontwikkelaars, zodat zij het ontwerp kunnen omzetten in code. Je kunt aantekeningen toevoegen over de gedefinieerde eigenschappen van een laag, zoals de uitlijning of de afmeting, of extra details doorgeven in de vorm van vrije tekst. Zelfs als ontwerpen later worden bijgewerkt, blijven de eigenschappen van de aantekeningen actueel en nauwkeurig, zodat er niets over het hoofd wordt gezien.
Je kunt aantekeningen toevoegen vanuit de Ontwerpmodus of Dev Mode. Zo voeg je aantekeningen aan een ontwerp toe:
- Klik op Aantekening 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.
Aantekeningen categoriseren
Maak aantekeningen nog duidelijker door ze te categoriseren. Categorieën helpen om verschillende soorten aantekeningen te onderscheiden, waardoor het makkelijker wordt om snel relevante informatie te vinden.
Editors kunnen de standaardlabels gebruiken, en die categorieën bewerken of verwijderen. Categorielabels zijn alleen van toepassing op het huidige bestand - er verandert niets in andere bestanden als je de standaardcategorieën bewerkt of verwijdert.
Figma Design-bestanden bevatten vooraf ingestelde categorieën voor aantekeningen:
- Ontwikkeling
- Interactie
- Toegankelijkheid
- Inhoud
Zo voeg je een nieuwe categorie toe:
- Selecteer een bestaande aantekening of maak een nieuwe aan en klik vervolgens op het keuzemenu.
- Klik op Categorieën bewerken…
- Klik op , selecteer een kleur en typ een naam voor je nieuwe categorielabel.
Opmerking: Bij het kopiëren van lagen met aantekeningen en categorieën wordt de categorie van het bronbestand naar het doelbestand gekopieerd. Als er geen exacte match is in het doelbestand (kleur en label), dan wordt er een nieuwe categorie gedefinieerd.
Tip: Met de plug-in API kunnen teams aangepaste Dev Mode-plug-ins bouwen om aantekeningen in bulk aan te maken en te beheren.
Filter op categorie
Je kunt aantekeningen filteren op categorie, zodat het nog eenvoudiger wordt om de details die je nodig hebt op het canvas te vinden. Er zijn meerdere manieren om aantekeningen per categorie te filteren:
Rechtermuisklik op het menu
- Klik met de rechtermuisknop op een aantekening op het canvas.
- Selecteer Filteren op.
- Selecteer welke categorie je wilt filteren, of selecteer Alle categorieën.
Zoommenu in Dev Mode
- Klik op het zoom-keuzemenu in de rechter zijbalk in Dev Mode.
- Beweeg de muis over Aantekeningen.
- Selecteer welke categorie je wilt filteren, of selecteer Alle categorieën.
Annotaties verbergen
Alle annotaties in een Figma Design-bestand zijn standaard zichtbaar in Dev Mode. Om annotaties te verbergen:
- Klik op het hoofdmenu in de werkbalk.
- Beweeg je muis over Weergave in het keuzemenu.
- Deselecteer Aantekeningen.
Tip: Om een aantekening te verwijderen, klik je erop en druk je op de Delete- of Backspace -toets.
Voordat je begint
Wie kan deze functie gebruiken?
Beschikbaar op alle betaalde abonnementen
Iedereen met een volledige Design-werkplek kan aantekeningen bewerken
in Dev Mode
Iedereen met een Dev Mode-werkplek kan aantekeningen bekijken
in Dev Mode
Zorg voor snellere en transparantere overdrachten met aantekeningen en afmetingen die up-to-date blijven, zelfs als de ontwerpen veranderen.
Met aantekeningen kunnen ontwerpers belangrijke details direct communiceren en verbinden met hun ontwerpen:
- Markeer belangrijke eigenschappen zodat ontwikkelaars ze niet over het hoofd kunnen zien
- Help ontwikkelaars snel specificaties zoals afstanden en afmetingen te visualiseren
- Deel aanvullende context met tekstnotities
Ontwikkelaars kunnen de aantekeningen van ontwerpers in realtime zien terwijl ze in de Dev Mode werken, zodat ze geen cruciale opmerkingen missen tijdens de overdracht.
Tip! In de Ontwerpmodus krijg je een melding wanneer er nieuwe aantekeningen aan een bestand zijn toegevoegd. Klik op de stip naast het ontwerp en selecteer Aantekeningen in Dev Mode weergeven om de bijgewerkte aantekeningen in Dev Mode te bekijken.
Voeg metingen toe aan een ontwerp
Door metingen toe te voegen kunnen ontwikkelaars snel de afstanden en afmetingen visualiseren.
Voeg als volgt een meting toe aan een ontwerp:
- Klik op de Dev Mode-schakelaar in de rechterbovenhoek van de werkbalk of gebruik de sneltoets Shift D.
- 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.
Tip! Om een meting te verwijderen, klik je erop en druk je op de Delete- of Backspace-toets.
Aantekeningen toevoegen aan een ontwerp
Ontwerpers kunnen aantekeningen toevoegen om context te bieden, ontwerpeigenschappen te definiëren of andere relevante informatie te communiceren aan ontwikkelaars zodat zij het ontwerp kunnen omzetten in code. Een mix van vrije tekst en gedefinieerde eigenschappen, zoals uitlijningsrichting of -grootte, kan worden geannoteerd. Zelfs als ontwerpen later worden bijgewerkt, blijven de annotatie-eigenschappen actueel en nauwkeurig, zodat er niets verloren gaat.
Voeg als volgt aantekeningen toe aan een ontwerp:
- Klik op de Dev Mode-schakelaar in de rechterbovenhoek van de werkbalk of gebruik de sneltoetsShift D.
- Klik op Aantekeningen maken 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.
Tip! Met de plugin-API kunnen teams aangepaste Dev Mode-plug-ins bouwen om annotaties in bulk aan te maken en te beheren.
Annotaties verbergen
Alle annotaties in een Figma Design-bestand zijn standaard zichtbaar in Dev Mode. Om annotaties te verbergen:
- Klik op het hoofdmenu in de werkbalk.
- Beweeg je muis over Weergave in het keuzemenu.
- Deselecteer Aantekeningen.
Tip! Om een aantekening te verwijderen, klik je erop en druk je op de Delete- of Backspace-toets.