Structuur in je bestanden: tips om te organiseren

Er zijn twee soorten designers: zij die hun project opslaan als ‘naam-project’ en het naar de juiste map uploaden en zij die hun laatste creatie opslaan als ‘project-finale-versie-2-echtfinaal-v3’. Als je tot die laatste groep behoort en op zoek bent naar een manier om je workflow te organiseren, dan ben je hier aan het juiste adres. Figma biedt alles wat je hebt heeft om je files te structureren.

Waarom het belangrijk is om je files te organiseren

Organiseren betekent in dit geval optimaliseren. Je bespaart jezelf, en zelfs je klanten, veel kostbare tijd door je werk te organiseren.

En laten we eerlijk zijn: tijd is alles. Het betekent dat je meer tijd zult hebben om aan je designs te werken en minder tijd zult spenderen aan de zoektocht naar dat ene bestand ‘dat je toch zeker op je bureaublad had opgeslagen’.

Gebruik Figma om je workflow te verbeteren

Mijn collega's en ik gebruiken Figma voor al onze ontwerpen. Figma is niet state-of-the-art. Het is meer dan dat. Heb je Figma nog niet geprobeerd? Breng er dan vandaag nog verandering in om je designs naar nieuwe hoogtes te tillen.

Omdat Figma een cloud-based tool is, heb je geen nood aan externe opslagservers zoals een Drive of Dropbox. Je kunt gemakkelijk toegang krijgen tot alles wat je nodig hebt via de browser en desktop app.

Dit elimineert natuurlijk een hoop organisatorisch werk: je hoeft niet langer bestanden door te sturen of te wachten op enorme WeTransfer links die een eeuwigheid duren om te maken (en nog langer om te downloaden).

Structuur aanbrengen met levels

Binnenin Figma heb je verschillende niveaus. In het voorbeeld hieronder heb je verschillende bestanden (files) die allemaal in hun eigen project zijn opgeslagen. Deze projecten zijn onderdeel van een Team, wat het hoogste niveau is in Figma.

figma-installeren

Het is aan te raden om verschillende bestanden per onderwerp te maken. Bijvoorbeeld, één bestand is gewijd aan wireframes, een ander aan ontwerpen en een derde aan prototypes.

Breng je structuur naar the next level

Door emoji's te gebruiken, kun je nog meer structuur aanbrengen in je bestanden. In het voorbeeld hieronder heb ik een speld gebruikt om de thumbnail aan te duiden, vlaggetjes om de taal van de pagina weer te geven, een verfpalet voor de designs, enz.

structuur met emoji's

Ik heb ook afstandhouders toegevoegd (de lijntjes '----' die je ziet) om nog meer structuur in het bestand aan te brengen.

Figma hack: de thumbnail

In Figma worden je bestanden getoond als een overzicht van alle pagina's die je in dat bestand hebt. Daar is niets mis mee, maar ik vind het gemakkelijker om een thumbnail aan het bestand toe te voegen zodat het gemakkelijker navigeert. Figma maakt standaard geen thumbnail, dus dit zal je zelf moeten doen.

thumbnail figma

Geef je lagen (layers) altijd een naam.

Of je nu in Figma werkt (wat je echt zou moeten doen) of niet, je moet altijd je lagen een naam geven. En noem ze niet gewoon 'layer 1' 'layer 2',... Geef ze een naam die zinvol is, zodat andere designers die in hetzelfde bestand moeten werken, gemakkelijk een laag kunnen vinden wanneer ze wijzigingen moeten aanbrengen.

Het benoemen van je lagen maakt het werken aan een ontwerp in team een stuk eenvoudiger. Je hebt niet echt vaste afspraken nodig rond deze benamingen. Geef het gewoon een naam die logisch is. Het voorbeeld hieronder is hoe ons team de verschillende layers benoemde voor onze website ontworpen in Figma:

layers benaming

Hoe de communicatie tussen designer en developers te verbeteren

We hebben allemaal wel eens te maken gehad met de botsing tussen al te creatieve designers en praktische developers. Het gebeurt, en het is volkomen normaal.

Er zijn echter een heleboel manieren om de samenwerking tussen deze twee branches in je studio te verbeteren.

Wanneer we aan een project werken, maken we twee verschillende bestanden aan: een 'Discovery'-bestand en een 'Final'-bestand.

In het Discovery-bestand kunnen ontwerpers van alles uitproberen. Zodra het ontwerp is goedgekeurd, getest en gevalideerd, voegen we het toe aan het Final bestand. Dat is het bestand dat we delen met onze developers.

Developers hebben alleen toegang tot het Final bestand. Dat betekent dat ze alleen werken aan ontwerpen die zijn goedgekeurd, waardoor situaties worden voorkomen waarin een developer begint te werken aan een ontwerp dat, eenmaal technisch geïmplementeerd, er heel anders uitziet omdat de designers enkele wijzigingen hebben aangebracht.

Houd je workflow en feedback bij

Ons team gebruikt Notion om onze workflow verder te documenteren. Door deze handige tool te gebruiken, kan je context geven aan je ontwerpen en kan je gemakkelijk bijhouden waar je bent in het ontwerpproces en wie waar aan werkt.

Verbluf je klanten met je organisatorische vaardigheden

Zodra een project klaar is, bundelen we het in een klikbaar prototype dat wordt gedeeld met de klant. De klant ontvangt een link en kan volledig zien hoe het eindproduct eruit zal zien.

Onze klant kan opmerkingen toevoegen en vragen stellen. Aan onze kant kunnen we eenvoudig zien waar opmerkingen zijn toegevoegd en kunnen we direct aan de slag. Dit neemt een hoop heen en weer gemail weg dat het geval zou zijn geweest als we het project met een WeTransfer-link hadden verzonden.

Figma is gebruiksvriendelijk

Tot nu toe zijn we nog niet tegen een opslagruimte-limiet aangelopen, ook al hebben we aan een heleboel projecten gewerkt. Weer een groot voordeel van Figma.

Als je je werk in Figma naar een klant stuurt en ze zitten in de 'view-only mode', dan hoeven ze er niet voor te betalen. Alleen wanneer je dingen direct in Figma wilt bewerken, heb je een betaald account nodig. Nog een voordeel.

In conclusie:

Het organiseren van je design files en workflow in Figma is eenvoudig:

  • Gebruik de verschillende niveaus (team, project, bestanden,...) in uw voordeel

  • Gebruik emoji's en afstandhouders om meer structuur aan te brengen

  • Geef je lagen altijd een naam

  • Maak een thumbnail in Figma

  • Gebruik een 'Discovery' bestand voor je designers en een 'Final' bestand voor je developers

  • Documenteer je workflow. Dit kan gedaan worden met tools zoals Notion.

Volg deze handige richtlijnen en je zult je hele workflow in een handomdraai optimaliseren.

Blijf op de hoogte

Schrijf je in voor de nieuwsbrief & ontvang alle nieuwste updates.

E-mailadres