Basisprojectinstellingen | Figma voor beginners #3

In dit artikel bespreken we de basisprojectinstellingen in Figma, dat is alles wat je moet weten voordat je begint met ontwerpen. We leggen uit wat Frames, Layout grid en Linialen zijn. Lees verder om meer te ontdekken.

Basisprojectinstellingen in Figma – inhoudsopgave:

1. Frames
2. Layout grid
3. Linialen

Basisprojectinstellingen in Figma

Eerst moet je een gebied van het Canvas kiezen om je ontwerpen in te maken. Dat is waar de Frame-tool voor is. Je vindt het in de Werkbalk. Na het activeren van de Frame-tool heb je een paar opties om een frame te maken.

• klik op het Canvas om een standaard frame met afmetingen van 100×100 te maken

• klik en sleep in het Canvas om een frame met aangepaste afmetingen te maken

• gebruik de dropdown in de rechterzijbalk om een framepreset te selecteren

Na het toevoegen en selecteren van een frame heb je toegang tot het in het Eigenschappenpaneel.

a) Positie van het Canvas (X en Y) – hier kun je de positie van het frame in het Canvas op de horizontale (X) en verticale (Y) as specificeren.

b) Afmetingen van het Object (Breedte en Hoogte) – hier kun je de grootte van het frame wijzigen

c) Beperk verhoudingen – Hiermee kun je de verhoudingen van het frame behouden bij het wijzigen van de grootte. Op deze manier kun je de hoogte of breedte van het frame wijzigen, en de tweede parameter past zich automatisch aan.

d) Grootte aanpassen aan inhoud – deze functie laat je het frame aanpassen aan de inhoud.

Nuttige tip: Je kunt ook de grootte van het frame handmatig wijzigen: pak de rand of hoek van het frame (de cursor verandert in een zwarte dubbele pijl), en sleep om de gewenste grootte te krijgen.

e) Portret en Landschap – hier kun je de oriëntatie van je frame wijzigen naar verticaal of horizontaal

f) Rotatie – hiermee kun je de hoek van een frame aanpassen

g) Hoekradius – dankzij deze functie kun je de hoek van een frame afronden om zachtere randen te creëren

h) Onafhankelijke hoeken – de instelling voor onafhankelijke hoeken laat je de hoekradius voor elke hoek aanpassen.

i) Inhoud afknippen – hiermee kun je objecten verbergen die buiten de grenzen van het frame uitsteken

j) Auto Layout – hiermee kun je responsieve frames maken

k) Layout Grids – deze functie helpt bij het creëren van een gestructureerde gebruikersinterface

l) Vulling – met deze optie kun je je frame vullen met kleur, verloop of foto

m) Omlijning – het helpt om omlijningen aan een frame toe te voegen. Je kunt ook Geavanceerde omlijninstellingen gebruiken die onder het ellips-icoon te vinden zijn.

n) Effecten – hier kun je een schaduw of vervaging aan een Frame toevoegen. Klik op het Effectinstellingen-icoon om de instellingen van de schaduw aan te passen.

o) Exporteren – hier kun je je frame exporteren naar de volgende formaten: PNG, JPG, SVG en PDF.

Boven elk frame in het Canvas wordt de naam weergegeven. Om deze te wijzigen, klik je er twee keer op. Je kunt frames samen met hun inhoud kopiëren en zoveel als je wilt in het Canvas plakken.

Taak.3.1

Begin met het project door de juiste grootte van een frame te kiezen. Nuttige tip: Als je niet weet welke grootte je frame moet hebben, is een goede keuze om een van de meest populaire schermformaten te gebruiken. Ga naar https://gs.statcounter.com/screen-resolution-stats voor meer informatie.

In deze tutorial ontwerpen we een e-commerce mobiele app, dus laten we een van de meest gebruikte resoluties voor smartphones selecteren – 360×640 px.

We zullen samen 3 projecten voorbereiden

• inlogscherm (Login)
• startpagina (Home)
• productlandingspagina (Product)

Na het toevoegen van een frame, dupliceer het meteen en geef elke scherm een juiste naam, zodat je het bestand georganiseerd houdt.

Layout grid

Layout grid is een systeem van horizontale en verticale lijnen (kolommen of rijen) die je helpen om elementen precies uitgelijnd in je frames te houden. Een goed ingestelde grid zal je werk zeker gemakkelijker maken en het hele ontwerpproces versnellen. Er zijn twee manieren om de layout grid in je ontwerp in te stellen:

1. je kunt de gridweergave inschakelen zelfs voordat je begint met ontwerpen en gebruik maken van kant-en-klare gridlay-outs (als die er zijn in je bibliotheek) of je eigen maken,
2. je kunt ook eerst beginnen met het maken van het ontwerp en later de grid instellen op basis van de ontworpen elementen.

Nuttige tip: Als je een beginnende ontwerper bent, raden we aan om een layout grid toe te passen op elk project. Er is niets erger dan een volledig lege werkruimte.

Je kunt een Layout grid toevoegen aan een actief frame in het Eigenschappenpaneel. Je hebt 3 opties: grid, kolommen, rij. Je kunt een paar opties tegelijk kiezen.

Je kunt de instellingen van elke grid aanpassen in het instellingenpaneel van de Layout grid. Je kunt de zichtbaarheid van de grid op elk moment in- of uitschakelen door op het Oog-icoon te klikken.

Nuttige tip: Als je niet weet welke layout grid je in je project moet kiezen, kun je de Grid System-plugin gebruiken, die het voor je zal doen.

Taak 3.2. Stel de layout grid in je project in. Voor de doeleinden van dit project hebben we Kolommen geselecteerd en de volgende waarden ingesteld:

• Aantal 2 (aantal kolommen)
• Marges 20 (afstand van kolommen tot de rand van het scherm)
• Gutter 30 (afstand tussen kolommen)

Linialen

Linialen zijn een andere nuttige functie die je helpt om de elementen in het bestand uit te lijnen en het op orde te houden. Om de weergave van de Linialen in te schakelen, klik je op het Hoofdmenu, vervolgens op Weergave en Linialen.

Linialen zijn te zien aan de boven- en linkerkant van het Canvas. Met deze functie kun je verticale en horizontale lijnen (gidsen) maken – klik en houd de gekozen liniaal vast, en verplaats de cursor naar het Canvasgebied. Er verschijnt een dunne, rode lijn die je kunt verplaatsen. Je kunt zoveel gidsen maken als je wilt. Je kunt onnodige lijnen gemakkelijk verwijderen – selecteer gewoon de lijn (de gekozen lijn wordt blauw), en klik vervolgens op Verwijderen.

Taak 3.3. Experimenteer met het toevoegen van linialen. Ze zullen nuttig zijn bij het uitlijnen van de elementen.

Je hebt net geleerd over de basis projectinstellingen in Figma. Lees ook: AI-ondersteunde chatbots.

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