De wereld van grafische ontwerpsoftware is enorm en heeft veel concurrentie. Figma is een ontwerptool die naar de eerste plaats racet voor UX/UI-ontwerpers over de hele wereld. Maar wat weet u over deze intuïtieve tool?
Hoewel het eenvoudig is, is er ook een leercurve als je gewend bent aan andere ontwerptools. Laten we eens kijken naar Figma en hoe het te gebruiken. Welkom bij Figma 101.
Wat is Figma?
Als je de afgelopen jaren als grafisch ontwerper of webdesigner hebt gewerkt, heb je waarschijnlijk wel eens van Figma gehoord. Misschien heb je het zelfs gebruikt.
Figma is een ontwerptool en is gestaag een favoriet geworden voor digitale ontwerpers, met opties als Adobe XD, Adobe Photoshop en Sketch, voor webdesign en meer. Echter sinds Adobe heeft Figma in 2022 overgenomen, kunnen er enkele wijzigingen zijn waardoor het klassement opnieuw wordt ingedeeld.
Er zijn veel toepassingen voor Figma. Het wordt voornamelijk gebruikt voor digitaal ontwerp en u kunt niet in CMYK ontwerpen voor afdrukken. Enkele van de belangrijkste toepassingen van Figma zijn:
- Prototyping
- UX/UI-ontwerp
- App-ontwerp
- Webdesign
- Presentatie ontwerp
Jij kan gebruik Figma-mockup-plug-ins om te helpen pronken met uw ontwerpen, converteer echte webpagina's naar Figma-ontwerpen plug-ins gebruiken en zelfs creëren hoofdsjablonen voor Figma-ontwerpen om u tijd te besparen bij repetitieve ontwerptypen.
Hoeveel kost Figma?
U kunt gratis een Figma-account aanmaken op de Figma-site of door het downloaden van de Figma-app. Een gratis account biedt functionaliteit voor alle ontwerpaspecten van de app. U kunt ontwerpen met Figma en FigJam—Figma's samenwerkingstool.
Als je Figma als hobbyist of als enige freelancer gebruikt, is de Free Forever-versie bijna perfect. Je hebt nog steeds toegang tot alle plug-ins, kunt een onbeperkt aantal medewerkers uitnodigen, onbeperkt persoonlijke bestanden gebruiken en Figma vanaf alle platforms gebruiken.
Hoewel de gratis versie van Figma meer dan genoeg biedt voor elke standaardontwerper, biedt een Figma Professional-abonnement dat ook nodig teamgenoten uit, werk vanuit teambibliotheken, heb toegang tot onbeperkte Figma-bestanden en versiegeschiedenis, en meer, voor $ 12 per maand per editor. Als je een student of docent bent, kun je Figma Professional gratis krijgen.
Figma gebruiken: de basis
Of u nu de Figma-app of de browserversie gebruikt, u kunt eenvoudig meevolgen.
Wanneer u Figma opent, krijgt u opties te zien om een nieuw Figma-bestand of een nieuw FigJam-bestand te starten of een bestand te importeren dat in een ander programma is gemaakt, zoals Sketch of Adobe XD. Als je Figma eerder hebt gebruikt, zie je ook je eerdere Figma-projecten die je kunt openen en waaraan je kunt werken.
Navigeren door de Figma-werkruimte
Het openen van een nieuw bestand ziet er aanvankelijk weinig inspirerend uit. In tegenstelling tot veel andere ontwerpprogramma's, begin je niet met je tekengebied of canvas, maar met een volledig lege ontwerppagina. Maar met een geest vol inspiratie blijft het niet lang leeg.
Het horizontale menu linksboven begint met de Hoofdmenu pictogram - het Figma-logo. Het selecteren van de Hoofdmenu, u kunt navigeren naar uw andere bestanden, snelle acties van Figma, typische bestandsopties en toegang tot plug-ins, widgets en bibliotheken.
Vervolgens vind je de Beweging hulpmiddel (V), met de Schaal hulpmiddel (K) eronder genesteld. Deze tools zijn bedoeld om elementen te verplaatsen of delen van uw ontwerp omhoog of omlaag te schalen. En rechts van deze tools ziet u de Regio-tools, Kader (F), Sectie, En Plak, bij elkaar genesteld.
In Figma is een frame wat andere programma's een tekengebied of canvas kunnen noemen. Selecteer Kader om uw canvas op maat te tekenen. Indien geselecteerd, toont het rechtermenu vooraf gemaakte frame-opties voor gangbare apparaatformaten: smartphones, tablets, desktops, smartwatches, presentaties en opties voor sociale media. U kunt uw frame ook rechtstreeks klikken en slepen om het een aangepast formaat te geven.
Terug naar het menu linksboven, rechts van de Regio-tools staan de Vorm hulpmiddelen, Pen gereedschap, en de Tekst hulpmiddel. Gevolgd door bronnen—Componenten, Plug-ins, En Widgets-en de Hand hulpmiddel om door uw bestand te bewegen. En tot slot, de Opmerkingen tool die geweldig is om aantekeningen te maken en samen te werken met teamgenoten.
Het Figma Design-menu
Als een lijst is opgesteld, activeert u de titel door de lijst te selecteren, klaar voor ontwerp. Het rechtermenu toont titels voor Ontwerp, Prototype, En Inspecteren. Zoals de naam al doet vermoeden, is de Design-optie het menu dat u gebruikt om de elementen op uw frame te ontwerpen.
Hoewel het aanvankelijke ontwerpmenu enigszins simplistisch is, evolueren de menu-opties naarmate u meer elementen aan uw ontwerp toevoegt. In eerste instantie loopt het menu van boven naar beneden met uitlijnhulpmiddelen, formaathulpmiddelen, Automatische lay-out, Lay-out raster, Laag, Vullen, Hartinfarct, Effecten, En Exporteren. Sommige hiervan worden standaard geminimaliseerd, maar door op de + ondertekenen, kunt u elk menu of hit openen – om het te minimaliseren.
Nadat u uw hoofdframe voor het project hebt getekend, kunt u Shape-tools of Pen-tools gebruiken om vormen te tekenen of voeg plaatsaanduidingen voor afbeeldingen toe en u kunt tekst toevoegen met het gereedschap Tekst op manieren die u waarschijnlijk al eerder hebt gedaan software.
Zodra u vormen of tekst op het frame hebt, gebruikt u de verschillende menu-opties aan de rechterkant om die elementen te bewerken en te ontwerpen. De Laag menu biedt dekkings- en overvloeimodi; met Vullen je kunt kleur toevoegen of afbeeldingen invoegen met enkele bewerkingsfuncties zoals Blootstelling, Contrast, Temperatuur, en meer.
Naarmate u meer elementen in uw project opbouwt, zullen de lagen zich aan de linkerkant vormen Lagen menu naast de Activa tabblad. U kunt dubbelklikken op een laagtitel om het element te vinden, en vice versa; u kunt dubbelklikken op een ontwerpelement om de gemarkeerde laag te vinden. Door op titels te dubbelklikken, kunt u ze hernoemen voor een optimale organisatie.
Het Figma-prototypemenu
Rechts van de Ontwerp menu-optie is de Prototype menu. Zodra je de visuele aspecten van je ontwerp hebt voltooid en afbeeldingsvakken en tekst hebt ingesteld waar ze moeten komen, kun je de prototypetools gebruiken om animaties en overgangen aan je ontwerpen toe te voegen.
De Prototype menu kunt u frames of componenten met elkaar verbinden als overgangen. U kunt kiezen in welke volgorde en hoe elk frame overgaat naar een ander.
Dit werkt geweldig als je dat bent een Figma-presentatie maken die van de ene dia naar de andere animeert, maar met de tool kun je ook vakkundig animaties visualiseren voor knoppen of menu's voor app- en webdesign. U kunt voor alle verschillende dingen meerdere overgangen per pagina toevoegen, zodat u kunt zien hoe gebruikers uw website zouden gebruiken wanneer deze live is.
Hoewel het gebruik van Figma om een website te ontwerpen niet hetzelfde is als het maken van een live website, kunt u uw Figma overhandigen ontwerp aan uw ontwikkelteam, dat uw prototype-interacties kan recreëren als real-life animatieontwerpen voor uw website. Dit betekent dat u van pagina naar pagina kunt gaan door klikken, tijd of andere interacties.
Aan de slag met Figma is eenvoudig
Nu weet u hoe u door de Figma-lay-out navigeert en hoe de basisontwerp- en prototypetools werken. Omdat Figma zo gemakkelijk toegankelijk is, is het tijd om aan deze ontwerptool te gaan sleutelen en te kijken wat je kunt maken.
