Ontwerptools zijn essentieel voor het verbeteren van de uitstraling van elk webproduct. De meeste ontwerptools zijn echter zware software die hoge eisen stellen aan het apparaat van de gebruiker en veel RAM-geheugen in beslag nemen. Bovendien kunnen gebruikers de volledige functionaliteit van deze tools pas gebruiken na aanschaf van dure premium-pakketten. Als oplossing voor al deze problemen hebben ontwikkelaars behoefte aan goedkope en lichte software die op apparaten met gemiddelde specificaties te gebruiken is.
Invoering
Figma is een zeer handige optie die aan alle eisen van ontwikkelaars voldoet. Het is een gratis, browsergebaseerde ontwerptool die momenteel steeds populairder wordt onder ontwikkelaars. Het biedt gebruikers een zeer soepele ervaring dankzij de coole, maar gebruiksvriendelijke functies.
Hier bespreken we een complete handleiding voor het gebruik van Figma met al zijn mogelijkheden.
Voorheen moesten ontwerpers en ontwikkelaars uitsluitend via e-mail communiceren. Dat leidde tot een omslachtig proces met talloze bijlagen en een vervelende ervaring bij het verwerken ervan. Vervolgens kwamen er veel moderne tools op de markt. Deze vereenvoudigden de werkprocedure voor ontwerpers en ontwikkelaars. Een ander groot probleem was echter het synchroniseren van de projectbestanden in de verschillende tools. Er was dus nog steeds een grote behoefte aan een efficiënter proces.
Toen kwam Figma met zijn soepele workflow. Omdat het een browsergebaseerd programma is, kan iedereen het gemakkelijk gebruiken, ongeacht het besturingssysteem. Gebruikers hoeven geen onnodige programma's te installeren om het ontwerpprogramma te ondersteunen. Omdat het een cloudgebaseerd programma is, biedt Figma elke gebruiker altijd de nieuwste versie van het ontwerp. Samenwerking en communicatie zijn met dit programma ook veel eenvoudiger geworden.
Figma biedt zijn diensten ook aan als desktop-app voor zowel Windows als macOS. De desktop-app is een platformonafhankelijke app, net als Slack en Visual Studio Code. Hoewel de desktop-app en de browserversie vrijwel dezelfde functionaliteiten bieden, heeft de desktop-app ingebouwde ondersteuning voor het gebruik van lokale lettertypen, terwijl je voor de browserversie Figma Font Helper moet installeren om lokale lettertypen te kunnen gebruiken.
Om een goed georganiseerde werkruimte te bieden, is de interface van Figma opgedeeld in drie belangrijke onderdelen. 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 erop te plaatsen. De linkerzijbalk bevat de assets, lagen en pagina's van een bestand. En de rechterwerkbalk wordt gebruikt om alle informatie over de elementen in het bestand weer te geven.
Een bestand bestaat meestal uit meerdere pagina's, elk met een eigen canvas. Ontwerpers gebruiken deze pagina's om de verschillende onderdelen van het bestand te ordenen. Nieuwe Figma-gebruikers moeten daarom eerst vertrouwd raken met deze verschillende pagina's om er op een gestructureerde 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, kunt u horizontaal over het canvas scrollen.
Er zijn nog veel meer handige sneltoetsen waarmee je efficiënter in Figma kunt werken. Maar je hoeft ze niet allemaal te onthouden. Je kunt ze altijd bekijken door op Ctrl/Cmd + Shift + ? te drukken
Projectstijlen selecteren
In de rechterzijbalk kunt u alle kleuren, typografie, rasters en andere stijlen voor het ontwerp selecteren. Om uw selectie te annuleren, klikt u ergens op het canvas of drukt u op de Esc-toets. U kunt alle informatie over de stijl van een element bekijken door op het bewerkingspictogram naast het stijlelement te klikken.
Lees: Hoe migreer je van Drupal naar WordPress: complete handleiding
Stijlelementen selecteren
Je kunt een specifieke laag selecteren door de Command-toets ingedrukt te houden terwijl je klikt, of door met de rechtermuisknop op het element te klikken om het menu met alle geneste lagen te openen en de gewenste laag te selecteren.
Nadat je een element hebt geselecteerd, kun je de bijbehorende CSS-informatie vinden in het tabblad 'Code' in de rechterzijbalk. Deze CSS wordt echter automatisch gegenereerd en mag niet zomaar in je project worden gekopieerd.
Enkele belangrijke stappen
- Door de 'Alt'-toets ingedrukt te houden en de muis over een element te bewegen, kunt u de afstand tussen elementen meten en ze correct positioneren.
- Je moet een asset als exporteerbaar markeren om het te kunnen exporteren. Vervolgens kun je de sneltoets Shift + Cmd / Ctrl + E gebruiken om alle assets die voor export zijn gemarkeerd te exporteren.
- Via het tabblad 'Prototype' in de rechterzijbalk kunt u informatie over elke animatie bekijken.
- Door op het chatbubbelpictogram in de bovenste werkbalk te klikken of op de 'C'-toets te drukken, ga je naar de commentaarinterface. Daar kun je een opmerking plaatsen over elk element door ergens in het ontwerp te klikken.
Dit is een samenvatting van enkele belangrijke procedures die u kunt volgen voor een optimale ervaring met Figma. Bij Seahawk Media Neem gerust contact met ons om gebruik te maken van onze verschillende diensten . Bezoek ook onze blogpagina voor meer informatie over diverse webproducten.
