Hoe maak je vormen in Figma? Figma voor beginners #4

In dit artikel vind je een beschrijving van de tools voor het creëren en aanpassen van de vormen die elk van je projecten zullen vormen. Je leert over basisvormbewerkingsopties en meer geavanceerde functies zoals booleaanse groepen en het maken van maskers. Hoe maak je vormen in Figma? Lees verder en ontdek het.

Hoe maak je vormen in Figma – inhoudsopgave:

1. Vormen toevoegen
2. Eigenschappenpaneel – Ontwerp
3. Object bewerken
4. Booleaanse groepen
5. Maskers

Vormen toevoegen

Je kunt een vorm toevoegen met de functie Vormtools die je in de Werkbalk vindt. Deze functie stelt je in staat om basis vectorvormen te creëren: rechthoek, lijn, pijl, ellips, veelhoek, ster.

Je kunt ook aangepaste vormen maken met behulp van Tekenhulpmiddelen. Je kunt kiezen tussen een Penn of een Potlood.

Net als in het geval van frames, zijn er veel manieren om vormen te creëren:

• Na het selecteren van een vorm uit de lijst met Vormtools, klik je op het Frame of het Canvasgebied. Dit zal een vorm creëren met een standaardgrootte van 100×100 px.
• Als je controle wilt hebben over de grootte van het gemaakte element, klik je op het Frame of Canvasgebied en houd je de linkermuisknop ingedrukt, terwijl je beweegt kun je de grootte van de vorm manipuleren.
• Als je een perfecte vierkant, cirkel of veelhoek wilt maken, houd dan de Shift-toets ingedrukt terwijl je sleept.

Elke vorm, tekstobject of afbeelding die je aan het Canvas toevoegt, zal een aparte laag zijn. Dit stelt je in staat om de individuele eigenschappen van elk element te wijzigen.

Eigenschappenpaneel – Ontwerp

Je kunt objecteigenschappen bekijken en bewerken in het Ontwerp-tabblad van het Eigenschappenpaneel. Het type laag bepaalt welke parameters hier worden weergegeven. De meeste parameters zijn hetzelfde in alle laaggroepen. Als je geen laag kiest, toont het Eigenschappenpaneel alle lokale stijlen voor het bestand en de Canvas-kleur.

In het Ontwerp tabblad kun je de volgende parameters toevoegen:

1. Uitlijning – uitlijningshulpmiddelen stellen je in staat om lagen in het Canvas correct ten opzichte van elkaar uit te lijnen. Deze functies zijn alleen beschikbaar wanneer twee of meer lagen zijn geselecteerd.

2. Verdeling en Opruimen – deze functie stelt je in staat om lagen te organiseren door gelijke ruimte tussen hen te creëren. Deze functies zijn alleen beschikbaar wanneer twee of meer lagen zijn geselecteerd.

3. Positie van het Canvas (X en Y) – hier kun je de positie van lagen in het Canvas langs de horizontale (X) en verticale (Y) assen aanpassen.

4. Afmetingen van het Object (Breedte en Hoogte) – hier kun je de grootte van een laag wijzigen.

5. Beperk verhoudingen – stelt je in staat om de verhoudingen van de vorm te behouden tijdens het wijzigen van de grootte. Je kunt de hoogte of breedte van de vorm wijzigen, en de tweede parameter zal automatisch worden aangepast.

6. Rotatie – hier kun je de hoek van een frame instellen.

7. Hoekradius – met deze functie kun je de hoeken van het frame afronden.

8. Onafhankelijke hoeken – de instelling voor onafhankelijke hoeken stelt je in staat om de hoekradius voor elke hoek aan te passen.

9. Laag (Mengmodi) – hier kun je specificeren hoe twee lagen in elkaar moeten overlappen. Je kunt slechts één mengmodus op elke laag toepassen.

10. Vul en Lijn – je kunt vullingen en lijnen toepassen op vormen en tekstlagen. Om een vulling of lijn toe te voegen, selecteer je de gewenste laag en klik je op het + pictogram. Je kunt meerdere vullingen en omtrekken aan elke laag toevoegen.

Voor vullingen en lijnen is Solide kleur standaard ingesteld. Om de eigenschappen aan te passen, klik je op het kleurstaal. Dit opent de kleursector, waar de opties beschikbaar zijn: Solide kleur, verloop (lineair, radiaal, hoekig, diamant) en afbeelding.

Als je de lijnstijl verder wilt aanpassen, kun je Geavanceerde lijninstellingen gebruiken, die beschikbaar zijn onder het ellips-pictogram.

Nuttige tip: Je kunt de zichtbaarheid van elke eigenschap in de actieve laag in- en uitschakelen met het Oog-pictogram. Actieve eigenschappen worden in het zwart weergegeven, zodat je ze gemakkelijk kunt onderscheiden van de inactieve.

11.Effecten – hier kun je een schaduw of vervaging aan de laag toevoegen. Om de effectwaarden aan te passen, klik je op Effectinstellingen, die zich onder de knop met het zon-pictogram bevinden.

12.Exportinstellingen – hier kun je de geselecteerde laag exporteren naar het formaat van jouw keuze: PNG, JPG, SVG en PDF.

Taak 4.1. Plan de lay-out van de interface-elementen van je applicatie. Maak eerst wireframes met behulp van eenvoudige vormen.

Nuttige tip: Vergeet niet om elke laag regelmatig een goede naam te geven. Als je hier niet op let, maak je zeker een rommel van je lagen.

Laten we beginnen met het inlogscherm:

• Onderaan het scherm plaatsen we het logo van de applicatie die wordt ontworpen.
• Er zullen plaatsaanduiders met labels onder staan: inloggen en wachtwoord. Op dit punt kun je de plaats voor de tekst markeren met een rechthoek.
• Onderaan het scherm plaatsen we de inlogknop.

Nuttige tip: Als je op zoek bent naar een logo voor je project, bezoek dan deze website: https://www.freepik.com/free-photos-vectors/logo en download het gratis.

Elk bestand op Freepik.com heeft een licentiemelding. Zorg ervoor dat de licentie je toestaat het te gebruiken zoals je nodig hebt, voordat je het downloadt.

Je kunt ook een logo gebruiken dat beschikbaar is in de “Logo maker” plugin.

Laten we nu de Home-frame aanpakken:

• We plaatsen een zoekbalk bovenaan het scherm.
• Er zal de “Bestsellers” kop onder staan.
• Onder de kop plaatsen we productafbeeldingen in twee kolommen. Maak een rechthoek die in één kolom past en dupliceer deze meerdere keren.
• Onder elk product moet er wat ruimte zijn voor de naam en prijs.
• Een ander element van onze interface zal de onderste balk zijn, waar we de iconen plaatsen: home, favoriet, profiel, mandje.

Nuttige tip: Je kunt gemakkelijk iconen aan je project toevoegen door ze te kopiëren uit de Figma-bibliotheek.

Gemeenschap. Je vindt hier een voorbeeldbestand: https://www.figma.com/community/file/1118814949321037573.

Klik gewoon op de Kopieer knop en het opent het Iconia bestand – een volledig bewerkbaar iconenpakket van 1.300+ kant-en-klare en schaalbare vectoriconen in 6 unieke stijlen. Om de geselecteerde iconen te kopiëren, ga je naar de Iconia-bibliotheekpagina in het lagenpaneel.

Zoek het pictogram dat je in je bestand wilt gebruiken, klik er met de rechtermuisknop op en klik op Kopiëren. Ga vervolgens terug naar je bestand, klik opnieuw met de rechtermuisknop ergens en kies Plakken hier. Een andere manier om iconen toe te voegen is door plugins te gebruiken.

Vergeet niet dat consistentie van de interface erg belangrijk is. Beslis over één stijl van iconen en houd je daar overal in je applicatie aan. Pas hetzelfde principe later toe op tekststijlen, afbeeldingsgroottes en andere elementen.

Als je de lay-out van de elementen op de startpagina hebt gepland, kun je verder gaan naar het Product-frame:

• Onderaan het scherm plaatsen we de “Terug” knop aan de linkerkant.
• Er zal een grote foto van het product onder staan.
• In de rechterhoek van de foto plaatsen we een knop met het “favoriet” pictogram.
• Onder de foto plaatsen we de naam en prijs van het product en ruimte voor een beschrijving.
• Onderaan het scherm voegen we een CTA-knop “Voeg toe aan winkelwagentje” toe.

Object bewerken

Je kunt alle vormen eenvoudig aanpassen met het hulpmiddel Object bewerken dat je in het midden van de Werkbalk kunt vinden. Om deze functie te gebruiken, moet je eerst de vorm selecteren die je wilt aanpassen.

Het activeren van de bewerkingsmodus zal nieuwe functies in de Werkbalk laten verschijnen, en je zult hoekpunten op de bewerkte vorm zien. Je kunt op het gewenste hoekpunt klikken en het slepen om de vorm van een vorm te veranderen.

Je kunt ook andere Hoekpunten aan de vorm toevoegen met behulp van het Pentool. Dit stelt je in staat om meer aanpassingen te maken.

Je kunt vormen vrij buigen met behulp van het Buighulpmiddel. Selecteer het Buighulpmiddel in de Werkbalk, en klik vervolgens op het gekozen hoekpunt.

Het Verfemmer hulpmiddel stelt je in staat om de vulling van een vorm te verwijderen en te herstellen. Om dit te doen, selecteer je Verfemmer en klik vervolgens op de vorm die je aan het bewerken bent.

Om de bewerkingsmodus te verlaten, klik je op Klaar.

Booleaanse groepen

Als je twee of meer vormen selecteert, verschijnt het Booleaanse groepen hulpmiddel in de Werkbalk. Hiermee kun je aangepaste vormen maken door ze te combineren, met behulp van een van de vier beschikbare formules: unie, aftrekken, snijden, uitsluiten.

• unie selectie – combineert de geselecteerde vormen tot één nieuwe vorm.

• aftrekken selectie – trekt alle bovenste vormen en hun overlappende gebieden af van de laagste vorm

• snijden selectie – de nieuwe vorm bestaat alleen uit overlappende fragmenten van geselecteerde vormen

• uitsluiten selectie – de gemaakte vorm bestaat alleen uit fragmenten van geselecteerde vormen die niet overlappen.

Na het toepassen van het Booleaanse groep hulpmiddel, worden alle geselecteerde vormen samengevoegd tot één enkele laag, wat betekent dat ze vulling en lijn eigenschappen delen. Je kunt ze combineren met andere vormen en verdere logische bewerkingen uitvoeren.

Taak 4.2. Oefen met het aanpassen van vormen met de Object bewerken en Booleaanse groep hulpmiddelen. Zelfs als je deze functies in deze fase van je project niet nodig hebt, is het de moeite waard om je kennis te consolideren door middel van oefening. Wees creatief en heb plezier. Je kunt ook proberen de voorbeeldvormen die je in de volgende screenshot ziet, opnieuw te creëren. Maak hiervoor een nieuwe pagina in het bestand of voeg objecten toe naast de frames met het project, en verwijder ze vervolgens eenvoudig.

Maskers

Maskers stellen je in staat om alleen geselecteerde gebieden van een afbeelding te tonen en de rest te verbergen zonder te bijsnijden. Dit betekent dat geen enkel deel van de lagen in het maskeringsproces wordt verwijderd of gewijzigd, zodat je het masker op elk moment kunt aanpassen als je een ander deel van de afbeelding wilt tonen.

Om dit beter te begrijpen, kun je je een fotolijst voorstellen met een kleine opening. Je ziet alleen een deel van de foto erin, terwijl de rest verborgen is, maar als je de lijst opent, kun je de hele foto nog steeds zien.

Je kunt elke laag als masker gebruiken, zoals vectorvormen, tekstlagen en afbeeldingen. De volgorde van de lagen is erg belangrijk. De laag die het laagste is, wordt beschouwd als de container van het masker, dat wil zeggen, de opening waardoor je de afbeelding zult zien.

Om een masker te maken, zorg ervoor dat de lagen goed zijn uitgelijnd. Selecteer vervolgens beide lagen en kies Gebruik als masker in de Werkbalk.

Alle buitenste gebieden van de laag die boven de container liggen, zullen verborgen zijn. Alleen die gebieden die zich binnen het maskergebied bevinden, blijven zichtbaar.

Taak 4.3. Gebruik maskers om productafbeeldingen aan je ontwerp toe te voegen. Vergeet de juiste volgorde van lagen niet. De laag die de container zal zijn, moet onder de afbeeldingslaag staan.

Nuttige tip: Je kunt gratis afbeeldingen voor je projecten downloaden van de website https://unsplash.com.

Je kunt ook de “Unsplash” plugin gebruiken.

Je hebt net geleerd hoe je vormen kunt maken in Figma. Lees ook: 10 bruikbaarheid heuristieken voor UX-ontwerp.

Als je onze inhoud leuk vindt, sluit je dan aan bij onze drukke bijengemeenschap op Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.