Typografie en tekst | Figma voor beginners #5

Hoe teksten toe te voegen en te bewerken in Figma? Waar moet je op letten bij het ontwerpen van content? Je vindt antwoorden op deze vragen in het volgende artikel. Lees verder.

Typografie en tekst in Figma – inhoudsopgave:

1. Tekst toevoegen
2. Tekst eigenschappen

Tekst toevoegen

Je kunt tekst aan je bestand toevoegen met de Teksttool die je in de Werkbalk vindt.

Je kunt twee soorten tekstvakken maken. Kies de Teksttool en dan:

• klik op het Canvas – op deze manier maak je een tekstvak dat automatisch wordt aangepast aan de ingevoerde tekst.
• klik en sleep de cursor in het Canvas, op deze manier maak je een tekstvak van vaste breedte. Dit betekent dat tekst die niet in de breedte van het vak past automatisch naar de volgende regel wordt verplaatst.

Tekst eigenschappen

Net als in het geval van frames en vormen, kun je de texteigenschappen in het Eigenschappenpaneel zien, nadat je een tekstlaag hebt geselecteerd. Beschikbare opties stellen je in staat om veel aspecten van tekstlagen te controleren, onder andere, grootte, lettertype en uitlijning.

1. Tekststijlen – hier kun je tekststijlen bekijken en maken.

2. Lettertype – hier kun je een type lettertype kiezen dat je wilt gebruiken. Na het klikken wordt een dropdownlijst geopend. Als je de naam van het lettertype weet, voer het dan gewoon in.

Nuttige tip: Tekst is een van de belangrijkste elementen van de interface, daarom is de leesbaarheid ervan erg belangrijk. Vermijd het gebruik van scriptlettertypen. Hoewel ze er mooi uitzien, maken ze de inhoud minder leesbaar. Als je niet veel ervaring hebt met typografie, gebruik dan de volgende lettertypen: Open Sans, Roboto of Source Sans Pro.

De “Typescale” plugin maakt je werk gemakkelijker omdat het de juiste maten selecteert.

3. Tekstgewicht en helling – hier kun je het uiterlijk van de tekst aanpassen door een van de beschikbare lettertypevarianten te selecteren.

Nuttige tip: sommige lettertypen hebben geen varianten, dus deze optie is mogelijk niet beschikbaar.

4. Tekstgrootte – hier kun je de grootte van de tekst wijzigen.

Nuttige tip: het wijzigen van de grootte van het tekstvak verandert de tekstgrootte niet.

5. Regelhoogte – stelt je in staat om de verticale afstand tussen de regels tekst aan te passen.

6. Letterafstand – laat je de horizontale afstand tussen letters aanpassen.

7. Paragraafafstand – helpt je de horizontale afstand tussen paragrafen aan te passen.

8. Automatische breedte – dit zorgt ervoor dat de lengte van het tekstvak zich aanpast aan de lengte van de tekst die je typt.

9. Automatische hoogte – het inschakelen van deze optie zorgt ervoor dat je de breedte van het tekstvak kunt controleren, en de hoogte automatisch wordt aangepast.

10. Vaste grootte – deze optie zorgt ervoor dat de grootte van het tekstvak zich aanpast aan de inhoud.

11. Tekst links / midden / rechts uitlijnen – stelt je in staat om de horizontale uitlijning in het tekstvak aan te passen.

12. Boven / midden / onder uitlijnen – laat je de verticale uitlijning in het tekstvak aanpassen.

Taak. 5.1. Voeg teksten toe aan je applicatie. Vergeet niet de lettergrootten passend te houden. Zorg ervoor dat de belangrijkste inhoud opvalt.

• In het geval van een e-commerce-app is het belangrijk dat de prijsinformatie en de productnaam duidelijk zichtbaar zijn. Gebruik het vetgedrukte lettertype om de tekst te benadrukken waar je de aandacht van de gebruiker op wilt vestigen.
• Zorg ervoor dat CTA (call to action) knoppen duidelijk zichtbaar zijn en de gebruiker aanmoedigen om erop te klikken. In dit geval zijn de knoppen: “Inloggen” en “Toevoegen aan winkelwagentje”.
• De kleur van de knop en de kleur van de tekst erop moeten contrasteren zodat de tekst gemakkelijk te lezen is.
• Voeg labels toe aan de placeholders.

Je hebt net geleerd hoe je typografie en tekst in Figma kunt gebruiken. Lees ook: Weet je wat UX-ontwerp betekent?

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