Slim animeren van lagen tussen frames
Voordat je begint
Wie kan deze functie gebruiken?
Gebruikers binnen elk team of abonnement
Gebruikers met toegang bewerken tot een bestand kunnen prototypes maken en bewerken.
Gebruikers met toegang bekijken tot een bestand of prototype kunnen prototypes bekijken.
Slim animeren zoekt naar overeenkomende lagen, herkent verschillen en animeert lagen tussen frames in een prototype.
Je kunt Slim animeren selecteren uit de lijst met overgangen wanneer je een prototype bouwt. Je kunt Slim animeren ook toepassen met andere overgangen om naadloze animaties te maken.
Met Slim animeren kun je snel geavanceerde animaties maken. Gebruik Slim animeren om het volgende te reproduceren:
- Sequenties laden
- Parallax scrollen
- Aanraakgebaren, zoals slepen, swipen, lang indrukken
- Schuifregelaars, schakelaars en wisselaars
- Inhoud uitbreiden (Meer weergeven / Minder weergeven)
- Trekken om te vernieuwen
Lees verder over hoe we Slim animeren hebben ontwikkeld in ons blogbericht: Aankondiging van Slim animeren.
Ondersteunde eigenschappen
Slim animeren zoekt naar overeenkomende lagen die in meerdere frames aanwezig zijn. Figma houdt rekening met zowel de naam van de laag als met de positie binnen de hiërarchie.
Voor lagen die overeenkomen tussen frames, herkent Figma wat er is veranderd en past een overgang toe om tussen ertussen animeren.
Je kunt Slim animeren toepassen op volledige objecten of componenten, evenals op afzonderlijke lagen binnen een component of groep.
Het is waarschijnlijk dat meer dan één eigenschap van een object zal veranderen tussen frames. Alle ondersteunde eigenschappen staan hieronder vermeld, zo weet je precies wat je kunt verwachten.
Scale
Als een object van grootte verandert tussen frames, zal Figma het animeren door het object te laten krimpen of groeien.
Positie
Figma herkent of de locatie van een object, de x- en y-coördinaten, is veranderd. Het zal vervolgens het object animeren dat van de huidige positie naar de positie in het bestemmingsframe beweegt.
Ondoorzichtigheid
Slim animeren kan ook de ondoorzichtigheid van een laag of object herkennen. Je kunt de ondoorzichtigheid aanpassen om een object te laten verschijnen of verdwijnen tussen frames.
Stel de ondoorzichtigheid van de laag in op 0% in plaats van de zichtbaarheid van de laag uit te schakelen. Figma zal een overgang oplossen toepassen om de ondoorzichtigheid van de laag te animeren.
Je kunt de ondoorzichtigheid aanpassen via de vulling-eigenschappen van een laag, evenals via de eigenschap laag. Slim animeren zal op beide van toepassing zijn.
We raden aan de ondoorzichtigheid van de hele laag aan te passen. Pas de instelling Ondoorzichtigheid van de laag aan in het tabblad Design in de rechterzijbalk.
Rotatie
Slim animeren houdt ook rekening met de rotatie en oriëntatie van de laag.
Je kunt een object roteren met behulp van het rotatieveld in de rechterzijbalk of in het canvas zelf. Beweeg je muis over de hoekgrenzen van een object totdat de rotatiecursor verschijnt.
Draai één laag tegelijk, of draai een groep ervan rond één enkel ankerpunt.
Vul
Figma zal elke verandering in de vulling van een object slim animeren. Hiermee kun je veranderingen tussen effen kleuren, gradiënten en zelfs afbeeldingsvullingen animeren.
Waar je op moet letten
- Figma ondersteunt Slim animeren niet voor wijzigingen aan effecten of het verplaatsen tussen vormen. Als een eigenschap niet wordt ondersteund, zal Figma een standaard overgang oplossen toepassen.
- Figma ondersteunt Slim animeren niet voor deklaag-acties. Dit komt omdat Figma deklagen als nieuwe frames behandelt. Je kunt slim animeren gebruiken bij het wisselen tussen deklagen, als die deklagen overeenkomende lagen hebben.
- Als je een nieuwe laag introduceert in het bestemmingsframe, zorgt Slim animeren ervoor dat de laag geleidelijk zichtbaar wordt.
- Als de eigenschappen van een laag tussen twee frames hetzelfde blijven, zal Figma die laag helemaal niet animeren. Dit is geweldig voor statusbalken, menu's en interacties wanneer je niet naar een andere UI wilt gaan.
- Als je het selectievakje Vaste positie bij scrollen voor een van de lagen aanvinkt, voegt Figma deze toe aan de lijst met Vaste lagen. Slim animeren behandelt lagen anders wanneer je Slim animeren combineert met andere overgangen.
Slim animeren toepassen
Er zijn twee manieren waarop je Slim animeren kunt gebruiken in je prototypes. Als een op zichzelf staande overgang, of door Slim animeren te gebruiken met overeenkomende lagen in een andere animatie.
Slim animeren
Selecteer Slim animeren in het overgangsveld om te animeren tussen twee frames.
- Open het tabblad Prototype in de rechter zijbalk.
- Selecteer een laag, groep of frame op het canvas. Er zal een verbindingsknooppunt verschijnen aan de rechter rand.
- Klik op het knooppunt en sleep naar het volgende frame om een verbinding te maken.
- Definieer de interactie in de rechterzijbalk door een trigger en een actie te kiezen. Figma zal het tweede frame als bestemming instellen.
- In het gedeelte Animatie, selecteer je Slim animeren in het overgangsveld.
- Pas Versnelling toe op de overgang, of wijzig de duur (optioneel).
- Herhaal dit voor alle andere frames die je slim wilt animeren.
- Klik op in de werkbalk om het prototype te openen in de presentatieweergave.
In ons voorbeeld hieronder hebben we drie frames met enkele overeenkomende lagen. We willen dat Slim animeren de Abel Tasman Coast Track uit onze lijst met favorieten verwijdert. 
Slim animeren beweegt ons nu soepel tussen elk frame in ons prototype!
Slimme animatie van overeenkomende lagen
Als je sommige lagen in je prototype slim wilt animeren terwijl je een andere hoofdovergang gebruikt, kun je het vakje Overeenkomende lagen slim animeren aanvinken.
Figma behandelt stabiele lagen bij het gebruik van Slim animeren met andere overgangen anders.
- Lagen die niet overeenkomen: Figma gebruikt de hoofdovergang die je selecteert.
- Lagen die overeenkomen: Figma zal verschillen voor ondersteunde eigenschappen Slim animeren.
- Vaste lagen die overeenkomen: Figma past geen overgang toe.
- Vaste lagen die niet overeenkomen: Figma past een overgang oplossen toe in plaats van de overgang die je selecteert.
Om Overeenkomende lagen slim animeren te gebruiken, vink je het vakje in de rechter zijbalk aan wanneer je de animatie aanpast:
In ons voorbeeld hieronder hebben we een statusbalk en navigatie die in alle drie de frames aanwezig zijn. We willen dat deze op hun plaats blijven wanneer we tussen tabbladen wisselen.
We hebben een push-overgang geselecteerd om tussen frames te wisselen. We kiezen ervoor om het vakje naast Overeenkomende lagen slim animeren niet aan te vinken.
Wanneer we ons prototype bekijken, zien we dat alles in ons bestemmingsframe de push-overgang gebruikt. Hierdoor is het vrij duidelijk dat we in een prototype tussen afzonderlijke schermen bewegen.
Als we het vakje naast Overeenkomende lagen slim animeren aanvinken, blijven onze statusbalk en navigatie op hun plaats, terwijl de andere inhoud Push gebruikt.
Tips voor slimme animaties
Vóór Slim animeren, hechtte Figma niet veel belang aan laagnamen. Aangezien Slim animeren afhankelijk is van de laagnaam en hiërarchie, kan het zijn dat je een andere aanpak moet gebruiken.
Lees verder over het maken van overeenkomende objecten met laagnaam en hiërarchie →
Hieronder beschrijven we enkele manieren om onverwachte resultaten van Slim animeren op te lossen.
Tip: We raden aan de duur te verlengen bij het bouwen van je prototype. Zo kun je zien wat er gebeurt en eventuele aanpassingen doen.
Namen van lagen
Een snelle manier om frames te maken voor Slim animeren is door ze te dupliceren. Zo blijft de naamgeving tussen elk frame consistent. Je kunt vervolgens lagen aan elk frame toevoegen en verwijderen, indien nodig.
Figma benoemt frames en lagen op basis van hoe je ze dupliceert of kopieert en plakt.
- Binnen een frame: Figma nummert de lagen opeenvolgend. Bijvoorbeeld: Frame 1, Frame 2, enz.
-
Tussen frames: Figma gebruikt dezelfde naam. Bijvoorbeeld: als je
Rechthoek 1uit het ene frame kopieert, plakt Figma het alsRechthoek 1in het volgende frame.
Je kunt objecten of lagen hebben die over verschillende frames bestaan, maar per frame een andere naam hebben. Of je kunt het tegenovergestelde probleem hebben – lagen die allemaal dezelfde naam hebben en die je niet wilt matchen.
Je kunt je laagnamen bekijken en bijwerken via het lagenpaneel in de linkerzijbalk. Ontdek hoe je lagen in bulk kunt hernoemen.
Overeenkomende lagen bekijken
Figma heeft het ook makkelijker gemaakt om lagen of objecten te identificeren die bestaan – of overeenkomen – tussen frames. Dit geldt voor alle lagen, groepen, frames en componenten.
- Open het tabblad Prototype in de rechter zijbalk.
- Beweeg de muis over een object of laag op het canvas.
- Figma zal die laag markeren in alle andere frames waarin deze bestaat.
Volgorde en hiërarchie van lagen
Slim animeren en Overeenkomende lagen slim animeren houden rekening met de volgorde of hiërarchie van je lagen.
Normaal gesproken zal Scherm schuift in of Inschuiven het hele bestemmingsframe boven het oorspronkelijke frame laten verschuiven. Met Overeenkomende lagen slim animeren zal Figma lagen verplaatsen of inschuiven op basis van hun hiërarchie, wat verwarrende of onverwachte resultaten kan opleveren.
In onze schermafbeelding hieronder hebben we twee overeenkomende objecten tussen onze frames ( Verkenner 1 en Verkenner 2). Dit zijn de Statusbalk en de Navigatie.
Als we lagen boven overeenkomende lagen hebben, zal Figma ze boven het bestemmingsframe animeren. In onze schermafbeelding hieronder zien we lagen van Verkenner 1 boven het bestemmingsframe verschijnen.
Door onze overeenkomende lagen naar de bovenkant van de hiërarchie te verplaatsen, kunnen we ervoor zorgen dat de volledige bestemmingsframes boven het oorspronkelijke frame schuiven.
Lagen groeperen
Om nauwkeuriger te bepalen wat er slim geanimeerd moet worden, koppelt Figma lagen op basis van hun naam en hiërarchie. Dit stelt je ook in staat om snel lagen tussen frames los te koppelen.
Laten we zeggen dat we in elk van onze frames vijf rechthoeken hebben. Deze rechthoeken bevatten per frame andere inhoud. We hebben ze in alle drie de frames gelabeld als Reis 1 tot en met Reis 5.
Wanneer we proberen een push-overgang toe te passen, herkent Slim animeren ze als overeenkomende lagen. In plaats van deze rechthoeken als nieuwe inhoud te behandelen, Past Figma Slim animeren toe op de verandering in hun positie.
Om dit gedrag te veranderen, kunnen we de rechthoekige objecten in elk frame groeperen en ze een unieke naam geven.
Wanneer we een voorbeeld van onze overgang bekijken, herkent Slim animeren deze niet langer als overeenkomende lagen. Onze inhoud zal in elkaar Pushen, waardoor ons prototype er veel realistischer uitziet.
Slim animeren met inschuiven en scherm schuift in
Er zijn enkele dingen om te overwegen bij het gebruik van Overeenkomende lagen slim animeren met dia- of verplaats-overgangen.
Als dit is geselecteerd, zal Figma alle overeenkomende lagen tussen frames animeren. Dit betekent dat Figma het volledige bestemmingsframe (B) niet over het initiële frame (A) kan animeren, zoals het normaal zou doen.
Figma neemt de vulling van een frame ook niet op als onderdeel van de animatie. Dit kan ervoor zorgen dat lagen elkaar overlappen, waardoor de overgang er rommelig uitziet.
Om dit te voorkomen, kunnen we een rechthoek met een effen vulling toevoegen achter onze andere lagen. Als we nu onze prototype bekijken, schuift de inhoud in elk frame samen in.