Figma, the ultimate tool

20 mei 2020
Door Emiel Kuipers
Leestijd: 4 minuten

Een website, webshop of webapplicatie vormgeven: waarmee wordt dit gedaan? Er zijn voor designers verschillende programma’s te gebruiken zoals Sketch, Photoshop of Adobe XD, waarbij iedere designer waarschijnlijk zijn of haar eigen favoriet heeft. Bij Skeps maken we voor meerdere doeleinden gebruik van het programma Figma. Waarom juist dit programma? Dat leggen we je graag uit!

Gebruik van Figma 

Voordat we je alle voordelen van Figma geven, willen we je eerst laten weten waar wij dit handige online design programma zowel voor gebruiken.

Wij gebruiken Figma om logo’s, websites, landingspagina’s, webshops, applicaties en social mediaposts vorm te geven. Het programma biedt genoeg mogelijkheden om al deze middelen razendsnel en tot in de puntjes uit te werken. Mis je nog iets in de standaard functionaliteiten? Dan kun je ook nog gebruik maken van verschillende plugins, zoals bijvoorbeeld “Lorem Ipsum” of “Unsplash”. Bij de eerste koppeling zorg je ervoor dat je snel standaard “Lorem ipsum” teksten kunt neerzetten. De tweede “Unsplash” koppeling heeft hetzelfde idee, maar dan met afbeeldingen. Hierdoor wordt het aanzicht van je design duidelijk en kun je doorgaan zonder content van je klant benodigd te hebben.

Naast dat onze designers hier veel mee werken, plukken ook onze marketeers hier de vruchten van. Het ontwerpen van alle social media uitingen wordt namelijk ook met behulp van Figma gedaan. 

Figma is ook erg handig voor onze developer d.m.v. snippets (code). Dit betekent dat onze developers codes kunnen overnemen vanuit Figma, waardoor het stukken eenvoudiger en sneller is om bijvoorbeeld een website technisch uit te werken.

De voordelen

Eigenlijk stonden hierboven al enkele korte voordelen van Figma, maar hier gaan we er nog iets dieper op in. Figma komt namelijk met een aantal handige voordelen waarover de eerder genoemde programma’s zoals Sketch, photoshop en Adobe XD niet over beschikken. Daarmee komt ook dat Figma bijna iedere week met nieuwe features komt, wat het gebruiksgemak nog groter maakt!

1. Browser based

Figma is een browser based programma dat dus werkt op alle systemen die een webbrowser ondersteunen. “Is dat nou zo bijzonder?”, zul je je misschien wel afvragen. Nou, een programma zoals Sketch lijkt in de basis wel erg op Figma, maar Sketch is enkel te gebruiken voor Mac (Apple). Super onhandig wanneer jouw designteam deels met Windows en deels op Apple werkt dus! Figma is de koploper als het gaat om ondersteuning op meerdere systemen. Dit houdt in dat je altijd en overal bezig kunt met jouw design, zolang je het maar via de browser kunt openen. Zo hoef je dus niet langer op kantoor te blijven en thuis je overheerlijke maaltijd te missen, aangezien je toch nog net even dat ene puntje wilde afmaken.

2. Realtime werken

Er zit nog een toffe feature bij dit browser based werken! Misschien maak je wel eens gebruik van Google Docs? Hierin kun je gezamenlijk werken in hetzelfde bestand. Bij Figma werkt dit in principe op dezelfde manier, waardoor je gezamenlijk designs kunt maken én de klant op afstand realtime mee kunt laten kijken naar de vorderingen. Dit maakt het bijvoorbeeld mogelijk om (klant)feedback tijdens een call direct te verwerken en de klant deze aanpassingen direct te laten zien zien. 

Heb je toch liever dat er niemand met je meekijkt? Dan kun je ook in je eigen ‘drafts’ aan het werk.

3. Offline werken 

Naast de browser based functie is de Figma widget ook gewoon te downloaden. Hierdoor is het mogelijk om offline te werken aan jouw designs! Wanneer je weer internet ter beschikking hebt, worden al je wijzigingen automatisch gesynchroniseerd. Super handig!

4. Auto layout

Met auto layout zorg je ervoor dat je een design nog eenvoudiger kunt realiseren. Buttons, teksten, afbeeldingen en complete geavanceerde secties kunnen worden opgebouwd door middel van auto-layout… Wat houdt dit in? Hiermee blijft de layout altijd in proportie, waardoor er consistent en sneller te werk kan worden gegaan. 

5. Prototype

Met Figma kun je een volledig klikbaar prototype in elkaar zetten. Dit prototype kun je eenvoudig delen met de klant en bijvoorbeeld met een testpanel. Zo kun je een concept dus al testen voordat er veel tijd in de technische uitwerking gaat zitten.

6. Componenten 

Stel: je ontwikkelt een webdesign met acht verschillende pagina’s. Op de ‘over-ons’, ‘omgeving’ en ‘contact’-pagina, maak je gebruik van een kaartje waarop de locatie aangegeven wordt. Hiervoor maak je gebruik van het onderstaande icoon.

Figma maakt het mogelijk om van dit icoon een component te maken. Deze kun je op al deze pagina’s gebruiken. Wil je dit icoon aanpassen? Dan hoef je alleen het component aan te passen. Vervolgens wordt de wijziging op alle pagina’s doorgevoerd. Ook voor bijvoorbeeld een menu of een footer (die op iedere pagina terugkomen) werkt dit perfect. Dit scheelt veel tijd en voorkomt inconsistentie.

Afbeelding: Mooore

Wij geloven als internetbureau in digital first en Figma is een perfect voorbeeld van online software die ons werk een stuk sneller, flexibeler en effectiever maakt. Geen gehannes meer met het mailen van grote bestanden en afbeeldingen. Gewoon lekker online!

chevron-down