Hoe maak je interactieve lessen met het Figma gereedschap?

Om een interactieve les te maken gebruiken we de Figma tool. Om vertrouwd te raken met deze tool en deze te gebruiken is het essentieel dat u de Mockup’s cursus op deze website volgt. Hoewel we het volledige potentieel van Figma kunnen gebruiken, zullen we voor de illustratie van deze cursus vooral vertrouwen op het invoegen van tekst en afbeeldingen in de ontwerpinterface. De gebruikersinteracties met de tekst, d.w.z. wat het verhaal interactief maakt door de lezer een hoofdrol te geven, zullen worden ontworpen in de prototyping interface.

Na het voorbereiden van de kaders beginnen we met het invoegen van de elementen (tekst, afbeeldingen, enz.) van het verhaal. Kaders kunnen worden ingevoegd terwijl we het verhaal maken, zodat het kan groeien en zo ingewikkeld kan worden als we willen. Als het verhaal lang is of complex door het aantal interacties, is het raadzaam om een schets op papier te maken voordat we beginnen met het ontwerp met Figma.

In het geval van het voorbeeld heb je slechts 4 frames, zoals we hieronder zien:

In dit voorbeeld nemen we de teksten van het volgende verhaal en passen die aan:

Verhaal: https://learnenglishkids.britishcouncil.org/sites/kids/files/attachment/short-stories-ali-and-the-magic-carpet-transcript.pdf

Vervolgens introduceren we de teksten, afbeeldingen en interactie-elementen (vergeet niet dat we ons in de ontwerpinterface van de Figma-applicatie bevinden).

en we gaan naar de prototyping modus

Eenmaal in de prototyping interface klikken we met de linkermuisknop op de cirkel van het element waarvoor we de interactie tot stand willen brengen.

Sleep de pijl naar het kader waar u de actie wilt uitvoeren en laat los.

Herhaal de actie totdat alle geplande interacties van de les zijn voltooid.

In de volgende video worden alle stappen uitgelegd.