Vectornetwerken

Voordat je begint

Wie kan deze functie gebruiken?

Ondersteund voor elk team of abonnement.

Iedereen met toegang bewerken kan vectornetwerken maken en bewerken.

Vectornetwerken zijn vormlagen die uit vectorpaden bestaan. Deze paden geven Figma instructies over hoe die vorm op het canvas moet worden weergegeven, inclusief waar de eigenschappen omlijning en vulling van een laag moeten worden toegepast.

Met veel vector-tools kun je alleen paden in één richting tekenen, die vaak eindigen bij het oorspronkelijke beginpunt. Vectornetwerken zijn uniek omdat ze geen specifieke richting vereisen. Ze kunnen meerdere paden hebben die in verschillende richtingen aftakken, zonder dat je afzonderlijke paden hoeft te maken en te combineren.  Daarom noemen we ze vectornetwerken.

Gebruik vectornetwerken om je eigen unieke vormen, gedetailleerde pictogrammen en zelfs ingewikkelde illustraties te maken. Gebruik de pen-tool om je eigen vectornetwerken vanaf nul te creëren. Of bewerk een vormlaag, inclusief basisvormen, in vectorbewerkingsmodus om een vectornetwerk te maken.

Vectornetwerken maken

Je kunt de pen-tool of een andere vorm-tool gebruiken om een nieuw vectornetwerk te maken. 

Als je vorm-gereedschappen gebruikt, kun je modificatietoetsen ingedrukt houden om ze op specifieke manieren te tekenen:

• Houd ⇧ Shift ingedrukt terwijl je een vorm maakt om de verhoudingen van de vorm vast te zetten op 1:1.
• Houd ⌥ Option / Alt ingedrukt terwijl je een vorm maakt om deze te schalen ten opzichte van het midden in plaats van de linkerbovenhoek.
• Als je klikt en sleept om een vorm te maken, houd de spatiebalk ingedrukt om de vorm over het canvas te verplaatsen voordat je de muisknop loslaat.

Vectornetwerken bewerken

In de vectorbewerkingsmodus kun je eigenschappen van afzonderlijke punten, lijnen of hele vormen selecteren, aanpassen en wijzigen.

Wanneer je een object bewerkt, kun je de bestaande punten en de lijnen ertussen manipuleren. Je kunt ook de pen-tool gebruiken om extra punten te plotten en die te manipuleren.

Activeer als volgt de vectorbewerkingsmodus:

• Selecteer een pad en druk op Return / Enter.
• Of selecteer een pad en klik op bovenaan de rechterzijbalk

Om de vectorbewerkingsmodus te verlaten, druk je nogmaals op Return / Enter of klik je op Sluiten in de secundaire werkbalk.

Gebogen paden aanmaken met Bézier-identificatoren

Met Bezier-identificatoren kun je een curve in een pad maken. Je kunt de Bézier-identificator voor elk punt in een vectorpad aanpassen bij het maken of bewerken van een vectornetwerk.

1. Selecteer een vectornetwerk.
2. Klik bovenaan de rechterzijbalk of druk op Return / Enter om de bewerkingsmodus te activeren.
3. Als het een curve is, zullen de identificatoren al zichtbaar zijn. Als het een hoek is zonder identificatoren, druk dan op in de secundaire werkbalk of houd ⌘ Command / Control ingedrukt en klik op het punt om de identificatoren te tonen en een gespiegelde curve te maken.
4. Klik en sleep de identificatoren om de curve van het pad aan te passen.

Hoeken van vormen afronden

Je kunt elk tussenliggend punt op een pad afronden met de eigenschap hoekradius in de rechterzijbalk.

Als je het hele vectornetwerk selecteert, worden alle hoeken op dezelfde waarde afgerond. In de bewerkingsmodus kun je individuele punten selecteren en verschillende waarden voor de hoekradius toekennen.

Als je met een open pad werkt, kun je alleen het eerste en laatste ankerpunt afronden met lijnuiteinden ↓

Vullingen toevoegen aan vormen en gebieden

Je kunt vullingen toevoegen aan alle gesloten gebieden van een vectornetwerk. Als er meerdere gesloten regio's zijn binnen een vectornetwerk, kun je de vulling van elke regio afzonderlijk aanpassen.

Je kunt de vulling van een geselecteerd vectornetwerk toevoegen of bewerken in de eigenschappen Vulling in de rechter zijbalk. Als je vullingen wilt toepassen op slechts enkele regio's, of verschillende vullingen wilt gebruiken voor verschillende regio's, moet je de bewerkingsmodus openen.

1. Druk met de laag geselecteerd op Return / Enter om de bewerkingsmodus te activeren.
2. Klik op de tool Vulkleur in de secundaire werkbalk onderaan, of druk op B.
3. Beweeg met de muis over het gebied van het vectornetwerk waar je een vulling aan wilt toevoegen. Een patroon van diagonale strepen geeft aan welke regio momenteel is geselecteerd.
4. De cursor verandert in een druppelpictogram met een:
   • + als je een vulling aan dat gebied kunt toevoegen
   • – als er een bestaande vulling is die je kunt verwijderen
5. Klik om een vulling aan de vorm of het gebied toe te voegen of te verwijderen.
6. Figma gebruikt standaard een grijze vulling. Je kunt de vulling wijzigen met de eigenschap Vulling in de rechter zijbalk. Je kunt gradiënten, afbeeldingen, GIF's of kleurstijlen uit een bibliotheek toepassen.
7. Om een andere vulling toe te voegen aan een andere regio, beweeg je de muisaanwijzer over die regio om deze te selecteren.
8. Klik om een vulling toe te voegen en pas de eigenschap Vulling aan in de rechterzijbalk.
9. Druk op Enter, Esc of Sluiten om de bewerkingsmodus te verlaten.

Hoofdletters toevoegen aan eindpunten

Voeg styling toe aan het eindpunt van elk open pad. Figma geeft de eigenschap "hoofdletters" anders weer, afhankelijk van het type vectorpad dat je hebt geselecteerd.

Er zijn zes verschillende soorten uiteindestijlen waaruit je kunt kiezen:

• Geen: Voegt geen uiteinde toe aan het einde van het pad. De uiteinden van het pad zijn vierkant afgewerkt, zonder dat er lengte aan het pad wordt toegevoegd.
• Lijnpijl: voegt twee lijnen van 45° toe aan beide zijden van het eindpunt(en). Dit gebruikt dezelfde omlijning als het pad zelf. Je kunt de lengte van de pijlpuntlijnen niet veranderen.
• Driehoekpijl: Voeg een driehoekige pijlpunt toe aan beide uiteinden. Je moet de vectorbewerkingsmodus openen om een pijl op slechts één uiteinde van het pad toe te passen.
• Omgekeerde driehoek: Een omgekeerde of gespiegeld versie van de driehoekige pijl, waarbij de pijlpunt naar binnen wijst richting het pad.
• Cirkelpijl: Een massieve cirkelkap.
• Ruitpijl: Een massief ruitvormig uiteinde.
• Rond (standaard): Voegt een uiteinde toe dat half zo zwaar is als de lijn en rondt het eindpunt van het pad af op 50% van de breedte.
• Vierkant: Voegt een uiteinde toe van de helft van het omlijninggewicht en maakt het eindpunt van het pad vierkant.

Bekijk deze videotutorial over vectornetwerken om ze in actie te zien. En vergeet niet om "Maak kennis met vectornetwerken" te lezen op onze Medium-pagina.