Ontwerpgereedschappen zijn een essentieel onderdeel van het proces om elk webproduct er beter uit te laten zien. Maar, de meeste ontwerptools zijn zulke zware software dat ze high-end specificaties van het gebruikersapparaat vereisen en het grootste deel van het RAM-geheugen gebruiken tijdens het gebruik. Ook staan deze ontwerptools de gebruikers toe om hun volledige functionaliteiten alleen te gebruiken na aankoop van hun immense dure premium pakketten. Als oplossing voor al deze problemen hebben ontwikkelaars goedkope en lichte software nodig die ze op elk apparaat met gemiddelde specificaties kunnen gebruiken.
Inleiding
Figma is een zeer handige optie die aan alle eisen van ontwikkelaars voldoet. Het is een gratis browser-gebaseerd ontwerpprogramma dat momenteel een populaire optie wordt onder ontwikkelaars. Het biedt een zeer vlotte ervaring aan zijn gebruikers met zijn koele maar gemakkelijke eigenschappen.
Hier bespreken we een complete gids om Figma met al zijn mogelijkheden te gebruiken.
Voorheen moesten ontwerpers en ontwikkelaars alleen via e-mail communiceren. Dat leidt tot een omslachtig proces met verschillende bijlagen en een verschrikkelijke ervaring om die te verwerken. Toen kwamen er veel gemoderniseerde tools in de praktijk. Zij maakten de werkprocedure gemakkelijk voor ontwerpers en ontwikkelaars. Maar een ander groot probleem was om de projectbestanden in verschillende tools synchroon te houden. Vandaar dat er nog steeds een grote behoefte was aan een veel efficiënter proces.
Toen kwam Figma met zijn vlotte werkprocedure. Omdat het een browser-gebaseerde tool is, kan iedereen het gemakkelijk gebruiken met welk besturingssysteem ze ook gebruiken. Gebruikers hoeven geen onnodige programma's te installeren om de ontwerptool te ondersteunen. Omdat Figma ook een cloud-gebaseerde tool is, biedt het altijd de nieuwste versie van het ontwerp aan elke gebruiker. Samenwerkingen en communicatie zijn ook het gemakkelijkst geworden met deze tool.
Figma biedt zijn diensten ook aan als een desktop app voor zowel Windows als macOS. De desktop app is een cross-platform app zoals Slack en Visual Studio Code. Hoewel de desktop app en de browser-gebaseerde app bijna dezelfde functionaliteiten bieden, heeft de desktop app ingebouwde ondersteuning voor het gebruik van lokale lettertypes terwijl je Figma Font Helper moet installeren om lokale lettertypes te gebruiken in de browser versie.
Om een goed georganiseerde werkruimte te bieden, heeft Figma zijn interface opgesplitst in 3 grote delen. Het heeft een groot canvas in het midden, een zijbalk aan de linkerkant, en een werkbalk aan de rechterkant. Het canvas wordt gebruikt om alle ontwerpen op te lokaliseren. De linker zijbalk bevat de assets, lagen en pagina's van een bestand. En, de rechter werkbalk wordt gebruikt om alle informatie over elementen in het bestand te bevatten.
Een bestand bestaat meestal uit meerdere pagina's met elk één canvas. Ontwerpers gebruiken deze meerdere pagina's om verschillende delen van het bestand met verschillende pagina's te organiseren. Elke nieuwe gebruiker van Figma zou dus eerst vertrouwd moeten raken met deze verschillende pagina's om er op een georganiseerde manier mee te kunnen werken.
Navigatie binnen Figma
- Door Ctrl / Cmd ingedrukt te houden en omhoog / omlaag te scrollen of op de + en - toetsen te drukken, kunt u in- of uitzoomen.
- Door de spatiebalk ingedrukt te houden en met de muis te slepen, kun je horizontaal over het canvas scrollen.
Er zijn nog veel meer handige sneltoetsen om u efficiënter te maken op Figma. Maar, u hoeft zich geen zorgen te maken om ze allemaal te onthouden. U kunt deze sneltoetsen altijd bekijken door op Ctrl / Cmd + Shift + ?
Selecteren van projectstijlen
Je kunt alle kleuren, typografie, kleuren, rasters en andere stijlen voor het ontwerp selecteren in de rechter zijbalk. Om je selectie te annuleren, kun je gewoon ergens in het canvas klikken of de Esc-toets indrukken. U kunt alle informatie over de stijl van elk element controleren door eenvoudigweg op het bewerk-icoon naast het stijlelement te klikken.
Selecteer stijlelementen
U kunt een specifieke laag selecteren door Command ingedrukt te houden terwijl u klikt of door met de rechtermuisknop op het element te klikken om het menu van alle geneste lagen te openen en de gewenste laag te selecteren.
Na het selecteren van een element, kan zijn CSS informatie worden afgeleid van het 'Code' tabblad in de rechter zijbalk. Die CSS wordt echter automatisch gegenereerd en moet niet in uw hoofdproject worden gekopieerd.
Nog enkele belangrijke stappen
- Door de 'Alt'-toets ingedrukt te houden en met de muis over een element te gaan, kunt u de ruimte tussen elementen meten en ze op de juiste plaats zetten.
- U moet een onderdeel als exporteerbaar markeren om het te kunnen exporteren. Vervolgens kunt u de sneltoets Shift + Cmd / Ctrl + E gebruiken om alle activa die gemarkeerd zijn voor export te exporteren.
- U kunt het tabblad 'Prototype' in de rechterzijbalk gebruiken om de informatie over een animatie te bekijken.
- Door te klikken op de chatballon in de bovenste werkbalk of op de 'C'-toets komt u in de commentaarinterface en kunt u een commentaar schrijven over elk element door ergens in het ontwerp te klikken.
Dit is een beknopte walkthrough van enkele belangrijke procedures die je kunt volgen om een geweldige ervaring met Figma te hebben. Bij Seahawk Media, geven we altijd ons best om de beste informatie over iets te krijgen om het veel gemakkelijker te gebruiken te maken. Om gebruik te maken van onze verschillende diensten, voel je vrij om contact met ons op te nemen. Bezoek ook onze blog pagina voor meer informatie over verschillende web producten.
