23 August 2023
Door Lisa Van Vlem
Figma biedt een breed scala aan tools en functies om sneller en nauwkeuriger designs te kunnen maken. Ze zijn dan ook een must-know voor elke (beginnende) designer. In dit artikel vertel ik je meer over 10 Figma tools die van jou een pro desiger maken.
Voor het uitlijnen en structureren van de elementen in je design. Dit zijn verticale, horizontale of geruite visuele aanduidingen op een frame. Layout grids zijn een handige hulp om je design consistent te maken (voor meerdere platformen).
Constraints bepalen hoe elementen reageren wanneer je de omvattende frame van grootte verandert. Elementen kunnen vastgezet worden aan de zijden van hun bovenliggende frame. Op deze manier kan je je design responsief maken voor verschillende schermen en toestellen.
Deze tool wordt gebruikt om elementen uit te lijnen. Wanneer slechts 1 element geselecteerd is, wordt dit uitgelijnd tegenover het bovenliggende element. Wanneer meerdere elementen geselecteerd zijn, worden deze ten opzichte van elkaar uitgelijnd.
Wanneer je met de elementen van je design wilt spelen om het tot in de puntjes in orde te krijgen, komt de smart selection tool als geroepen. Deze tool laat je toe om op een snelle manier met spatiëring, volgorde en grootte van elementen te spelen.
Met auto layout kan je responsieve ontwerpen maken die meegroeien om het scherm te vullen, weer krimpen om op het scherm te passen en reflowen als hun inhoud verandert. Bijvoorbeeld voor knoppen die groter of kleiner worden wanneer de tekst verandert, of voor lijsten die zich aanpassen wanneer items worden toegevoegd of verwijderd. Om meer complexe interfaces te bouwen kunnen auto layouts gecombineerd worden.
Componenten helpen je om een consistent design te maken. Het zijn elementen die je kan hergebruiken in je design. In plaats van met kopieën te werken, werk je met instanties. Alle wijzigingen die worden aangebracht op de main component worden meteen doorgetrokken naar de instanties.
In stijlen kunnen kleuren, tekstopmaak, effecten en layout grids opgeslagen worden. Net zoals bij componenten, wanneer deze stijl wordt aangepast, worden de veranderingen doorgevoerd op alle elementen die gebruik maken van deze stijl. Ook stijlen helpen bij het consistent maken van je design door het hergebruiken ervan.
Dit is een aparte file waarin je alle componenten die je in je design nodig hebt verzamelt en die fungeert als een single source of truth. Vervolgens kan je dit design system als library publiceren om het te gebruiken in meerdere design files.
Dit wordt gebruikt om je statisch design dynamisch te maken. Zo kan je ontwerp bijvoorbeeld gebruikt worden voor user tests, om een meer realistisch design voor te stellen aan je stakeholders, om je design duidelijk te maken voor de developers, enzovoort. Daarnaast kan prototyping ook gebruikt worden om animaties te maken.
Figma beschikt over een zeer uitgebreide community. Hier wordt werk gedeeld, waar je vervolgens zelf op kan voortbouwen. Je vindt er iconen, illustraties, templates, UI kits, …
Zo, nu kan je als een pro aan de slag. Veel ontwerpplezier! 😊
