PvCF Nieuwsbrief artikel Figma Online ontwerpen Figma is een online hulpmiddel om ontwerpen te maken voor onder meer apps. In de basis maakt het vectorafbeeldingen, die je dus snel kunt aanpassen, kunt vergroten en verkleinen. Als zodanig kan dit hulpmiddel veel nuttige functies vervullen bij het maken van afbeeldingen. In dit artikel zal ik op basis van de gratis mogelijkheden een aantal voorbeelden geven. [Wim van ’t Einde] V -1eel afbeeldingen zijn eigenlijk gewoon tekeningen met eenvoudige vormen. Figma maakt hier gebruik van door die vormen aan te bieden en daar allerlei bewerkingen mee te doen. De gratis versie heeft natuurlijk de nodige beperkingen ten opzichte van de betaalde versies. Je kunt er maar een project mee aanmaken met drie bestanden. Binnen die bestanden kun je dan wel weer een beperkt aantal pagina’s aanmaken. Ook is worden de versies
PvCF Nieuwsbrief artikel maximaal dertig dagen bewaard. Heb je hieraan niet genoeg, dan heb je dus een betaalde versie van Figma nodig. Wanneer je je hebt aangemeld krijg je direct drie keuzes voorgelegd. Je kunt Figma gebruiken voor het ontwerpen van prototypes, het gebruiken als Whiteboard en je kunt er presentaties mee maken. Het aardige met Figma is dat je online met anderen kunt samen. Je kunt hen uitnodigen voor je ontwerp en ze kunnen er opmerkingen bij maken en wijzigingen in aanbrengen. Als eerste kies ik voor Design en daar kom ik in een eerste bestand terecht, waarin al een aantal pagina’s aanwezig zijn. Deze geven al een eerste beeld wat je zoal kunt maken. In dit scherm zie je een pagina van een bestand. Op deze pagina staan een aantal frames en losse elementen, die je links in beeld onder layers ziet staan. De frames herken je aan het #-teken voor de naam. Deze kun je uitklappen door op het >-teken voor het frame te klikken. Dan zie je de afzonderlijke elementen die in het frame zijn opgenomen. Ook een aantal elementen kun je op deze manier weer openen. In het linkerdeel kun je in de tab naast File klikken op Assets, waar voorbeelden van allerlei elementen staan, die je kunt gebruiken. Onder in beeld zie je een aantal knoppen om zelf frames en elementen aan een pagina toe te voegen. -2
PvCF Nieuwsbrief artikel Rechts zie je een apart onderdeel, waarin de acties van het prototype kunnen worden aangegeven, maar je kunt daar, wanneer je op de tab Design klikt, ook de eigenschappen van de elementen bewerken en het ontwerp aan je eigen smaak aanpassen. In dit artikel ga ik eerst even aan de slag met een van de bestaande bestanden, het frame van de Thumbnail linksboven in het scherm. Wanneer ik met het >teken de elementen van het onderdeel zichtbaar maak in het linkerdeel van het scherm en daar bijvoorbeeld de eerste Illo uitklap, dan die ik dat dit een groep is, die uit zeven ellipsen en twee vectoren bestaat. Van die zeven ellipsen vallen er trouwens twee links van het scherm en zijn dus niet zichtbaar. De Layers zijn eigenlijk afzonderlijke lagen. Wanneer een lagere layer op dezelfde plaats staat als een hogere, dan verdwijnt deze achter die hogere laag, dus daar moet je rekening mee houden wanneer er overlap ontstaat. Sleep bijvoorbeeld ellips 66 maar eens onder de beide vectoren, dan zie je het rechter rondje niet meer, deze staat dan achter de lijn in plaats van ervoor. Wanneer je een groep hebt geselecteerd geeft het rechterpaneel de eigenschappen van de groep weer. Voor de eigenschappen van elk afzonderlijke element moet je het betreffende element zelf selecteren en kun je de eigenschappen daarvan aanpassen. -3
PvCF Nieuwsbrief artikel Ik maak nu even gebruik van ellips 67, een van de elementen, om de eigenschappen uit te leggen. Het lijkt ingewikkeld, maar ik denk dat het wel meevalt, zeker als je er zelf ook even mee gaat experimenteren en waardes verandert. Hierboven staat de ellips als cirkel, want dat is een ellips met een gelijke hoogte en breedte. De positie van het middelpunt van de ellips wordt van linksboven gemeten en staat op 249 punten naar links en 102,5 punten naar beneden. Met de cijfers daaronder kun je de ellips kanteren of horizontaal en verticaal spiegelen. Deze bewerking hebben uiteraard geen zin in een cirkel. De afbeelding blijft gelijk. Daaronder zie je de afmetingen (dimensions) van de cirkel, 16 punten hoog en 16 punten breed. Onder Appearance kun je de doorzichtigheid (Opacity) instellen. 0% is doorzichtig en 100% niet. Met Fill geef je aan met welke kleur de cirkel gevuld moet worden. Je kunt de kleur aanpassen door op het gekleurde vakje te klikken of de letters aan te passen. Het percentage geeft weer aan of deze kleur al dan niet doorzichtig moet worden. Voor Stroke geldt hetzelfde voor de lijn, maar hier moet je de lijndikte opgeven en aangeven waar de lijn moet worden geplaatst, buiten de cirkel, juist erbinnen of gecentreerd. In dit geval is het gecentreerd en bij een breedte van de lijn van vier pixels betekent dat dat twee pixels van de lijn buiten de cirkel vallen en twee pixels erbinnen. Met Effects kun je het element ook nog effecten meegeven, zoals een schaduw. Wanneer je element helemaal naar wens is kun je het ook als PNG, PDF, JPG of SVG exporteren. Dat kun je overigens voor elk niveau doen, dus ook voor een groep, een frame of de hele pagina. In een volgend artikel ga ik dieper in op Figma. -4
1 Online Touch