Figma - oefening
Prototype bekijken
Design Tools: Figma
Prototype
Bekijk je design : klik op het play-button
De instellingen kan je / page kiezen. Daarom splitsen we mobile en desktop af.
Klik op prototype (rechts boven) > klik naast een frame (geen selectie) of klik op show prototype settings
Kies het juiste device
Prototype - mirror
Bekijk je design in de browser of op je gsm
- Surf naar https://www.figma.com/mirror
- Maak dat je ingelogd bent in je browser in figma
- In Figma selecteer je het frame dat je wenst te mirroren ( -> is dit een woord 🧐😏 ? )
Praktijk Design Mode
Design Tools: Figma
Praktijk
Maak het volgende design zo goed mogelijk na, werk vanuit je styles. Download de assets
Praktijk
shape met pentool
Praktijk
Ellipse
Praktijk
Rectangle + border radius
Text op btn: Montserrat - semiBold - 16
3x een line met als stroke rounded
Praktijk - oplossing
Password: uiux
Demo prototyping
Design Tools: Figma
Prototype - mode
Click or Tap Triggers
Overlayers
Drag Triggers
Time trigger
Time trigger
Smart Animation
Automatisch animeren tussen twee frames
Horizontal scrolling
Demo time
Download https://tinyurl.com/yhrh8t7s
Demo Auto layout
Design Tools: Figma
Auto layout en paddings
- Shift + A
- Rechter klik > Auto layout
- In de Design panel > Auto layout
Met auto-layout structureren
Met auto-layout structureren
Met auto-layout resizen
Praktijk Prototype mode
Design Tools: Figma
Praktijk - InstaBAM!
Download https://tinyurl.com/5d5r54ud
Maak van het ontwerp een prototype.
- Zorg ervoor dat de filterbutton de filter opent, maak gebruik van een overlay.
- Als je buiten de filter klikt dient hij weer te sluiten.
- Wanneer je op de foto van het gewichtheffen klikt opent de foto in een grote weergave.
- De 'contact us' zone wordt geactiveerd door een swipe gesture (drag).
- Wanneer de filter open staat moet er telkens één optie per filteronderdeel naar de desbetreffende weergave/galerij verwijzen.
- Voor details bekijk de demo-video die bij het bronbestand bijgesloten zit.