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

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

Bekijk hier de oplossing

Password: uiux

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

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 - 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.