Figma Essentials

Omschrijving

Je begint in Figma met de schetsmatige fase van grove wireframes en eenvoudige navigaties, en gaat dan meestal verder met het uitvoeren naar een fraaie mock-up en een werkend prototype met interactie en animaties. Daarmee test je het gebruik en verfijn je het ontwerp, totdat iedereen het er over eens is wat door de developers gemaakt moet worden. Figma laat je de ontwerpen makkelijk testen, delen en bespreken met anderen.

De Figma training laat je kennis maken met al deze fasen en aspecten. Bijna spelenderwijs rol je in dit nieuwe vakgebied en leer je de ontwerp-stadia van een website of app in wording én de dynamiek van teamwork. Want een website of app bedenk, ontwerp en maak je niet in je eentje. Omdat je nauw samenwerkt met anderen, is het snel kunnen delen, bespreken en aanpassen van je ontwerpen essentieel. Sterker nog: Figma biedt uitstekende mogelijkheden om zelfs tegelijk met anderen in een ontwerp te werken.

Uiteindelijk leer je hoe je van je ontwerp de materialen en specificaties overdraagt aan developers, zodat deze kunnen worden verwerkt tot een technisch werkende website of app.​

Onderwerpen:

Inleiding

• Kennismaking met de werkomgeving (online en desktop)
• Starten bestand, begrijpen hiërarchie (Pages, Frames, Layers)
• Samenwerken aan een eenvoudig wireframe (rapid prototype)

Vormgeving en interactie

• Indeling a.h.v. een Layout Grid (kolommen en marges), Guides
• Invoegen van vormen (lijnen en vlakken) en beelden (maskers)
• Kleuren (vulling en lijn), pipet, verlopen, effects (Shadow, Blur)
• Vormen tekenen met het bijzondere Vector Network (path/paint)
• Gebruiken van populaire UI-elementen (iOS, Android, Windows)
• Tekst toevoegen (auto-width/height, fixen), typografie instellen
• Objecten uitlijnen en groeperen, Auto layout, Constraints, Resize
• Slimmer werken d.m.v. Styles en Assets (Components, Variants)‍
• Meer formaten makkelijker aanmaken m.b.v. Responsive Resize
• Navigaties, scrolls, overlays, hovers, transities, (micro)animaties
• Speciale features zoals Font Agent, Plugins, Thumbnails, etc.

Presenteren, delen en samenwerken

• Integratie met andere populaire software en bestandstypen
• Anderen uitnodigen voor samenwerken, tekst en audio-chat
• Delen van Libraries, Templates, instellen/gebruiken van versies
• Voorbereiden en maken van Style Guide en/of Design System
• Presenteren, in een browser of de mobile app, met hotspot-hints
• Commentaren, feedback verzamelen, ook via andere platformen
• Exporteer frames, materialen, en design-specs voor developer

Doelgroep

Grafisch ontwerper, UI of Interaction Designer, digital of visual designers – het maakt niet uit hoe je jezelf noemt. Maar als je (mee)werkt aan het ontwerp van websites en apps of andere interfaces, dan helpt deze Figma training je snel op weg.

Doel

Je leert snel en doordacht een web- of app-interface te ontwerpen, te variëren, te delen en te testen, en daarbij je taken als ontwerper (solo of binnen een team) uit te voeren. De vorm waarin je dat doet reikt van het opzetten en aanleveren van visuele ideeën zoals wireframes, mock-ups en prototypes, tot een design-system met alle technische specificaties en materialen voor developers.

Benodigde voorkennis

• Basis computer kennis, ervaring met design-software zoals Adobe CC is een pré

Lesmateriaal

Je ontvangt een hand-out van de getoonde slides (voor je aantekeningen), en er wordt veelvuldig verwezen naar allerlei publicaties, diverse artikelen en blogs.

Verder worden o.a. Adobe-tutorials en andere (ook Nederlandstalige) online hulpbronnen gebruikt, waaronder de officiële Adobe Help-website, zodat je later veel onderwerpen online kunt nalazen en herhalen.

Na afloop van de training ontvang je een certificaat van deelname.