Hoe een GIF van Figma te exporteren

Apparaatkoppelingen

• Android
• iPhone
• Mac
• ramen
• Toestel ontbreekt?

Ben je op zoek naar een manier om je ontwikkelaars- en ontwerpspel naar een hoger niveau te tillen? Figma is een ongelooflijke tool waarmee gebruikers rijke prototypen kunnen maken gevuld met audio-, video- en animatie-effecten. Om het gevoel en de functies van het prototype echter goed te testen, zou je het als een GIF moeten kunnen exporteren en het in actie kunnen zien.

In deze gids wordt uitgelegd hoe u uw Figma-prototypes als GIF's kunt exporteren met uw pc of mobiele apparaat.

Hoe te exporteren naar GIF in Figma op een pc

De eenvoudigste manier om geanimeerde GIF's uit Figma te exporteren, is met de TinyImage-plug-in. Voordat u de plug-in kunt starten en gebruiken, moet u inloggen op uw Figma-account en naar het gedeelte "Community" gaan.

Om de plug-in te downloaden:

1. Voer "TinyImage" in het zoekvak in.
   
2. Zoek onder het gedeelte "Plug-ins" het pictogram "TinyImage Compressor".
   
3. Klik op de knop Installeren naast het pictogram.
   

Wanneer je de plug-in hebt geïnstalleerd, open je het ontwerpproject dat je als GIF wilt opslaan. Klik ergens op het scherm om het vervolgkeuzemenu te openen. Kies "Plug-ins" en tik op "TinyImage Compressor" om het te starten.

Zo maak je een GIF met de plug-in:

1. Druk bovenaan het plug-invenster op de knop "Een GIF maken".
   
2. Selecteer de lagen op je Figma-canvas. Ze fungeren als de frames van je GIF.
   
3. Tik onderaan het TinyImage-venster op de optie "Gebruik geselecteerde lagen". U ziet een diavoorstelling van uw lagen in het midden van het venster in de volgorde waarin u ze hebt geselecteerd.
   
4. Klik onder het voorbeeld op de laagpictogrammen en sleep ze naar links of rechts om hun volgorde te veranderen.
   
5. Tik op de kleine knop "Afspelen" onder de diavoorstelling om de afspeelsnelheid aan te passen.
   
6. Selecteer naast de bedieningselementen voor tijdvertraging hoeveel keer de GIF moet worden herhaald. De standaardinstelling is 'Oneindig'. Klik op de optie "Oneindig" om deze uit te schakelen en voer het gewenste aantal lussen in het vak ernaast in.
   
7. Pas de grootte van de GIF aan in de velden onder de opties voor tijdvertraging en lus.
   
8. Als uw lagen transparante randen hebben, drukt u op de knop "Transparante achtergrond" onder aan het venster om ze zichtbaar te maken in de GIF.
   
9. Selecteer de beeldkwaliteit van de GIF in de linkerbenedenhoek. Het is het beste om de snelheid in te stellen op ongeveer 80 of 90 om alle kenmerken van uw lagen te behouden.
   
10. Laat de besturingselementen "Dithering" ingesteld op "Geen dithering".
    
11. Tik op de knop "GIF exporteren" bovenaan het TinyImage-venster.
    
12. De frames worden samengevoegd en vormen een GIF en deze wordt automatisch gedownload en opgeslagen in uw downloadbestanden.

Een opmerking over gelaagdheid

Met het vervolgkeuzemenu boven de laagminiaturen kunt u de lagen ook van links naar rechts of van rechts naar links afspelen. Voor meer controle over het uiteindelijke uiterlijk van de GIF is het echter het beste om de frames handmatig te bestellen.

Een opmerking over afspelen

Stel de standaard afspeelsnelheid in door de knop op de tijdmeetlijn te bewegen. Als u echter wilt dat specifieke frames verschillende afspeelsnelheden hebben, kunt u dit doen door op een miniatuur te klikken en de snelheid in te stellen in het vak eronder.

Hoe te exporteren naar GIF in Figma op een mobiel apparaat

Figma-prototypes worden vaak geleverd met geavanceerde animaties zoals schuiftabs, veegopties en vervolgkeuzemenu's. Door ze als een GIF op te slaan, kunt u het ontwerp gemakkelijk in actie laten zien. Met de mobiele app kunnen gebruikers echter alleen een voorbeeld van hun prototypen bekijken. Hoewel er geen ingebouwde exportondersteuning is, kun je het probleem omzeilen door de app op het scherm op te nemen en de video in een GIF te veranderen.

Hoe te exporteren naar GIF in Figma op een iPhone

Om uw project als een GIF op een iPhone op te slaan, neemt u eerst de Figma-app op en maakt u een GIF met de Shortcuts-app.

Om Figma op een iPhone te screenen:

1. Start de mobiele Figma-app en open het project waarvan u een GIF wilt maken.
2. Voer "Instellingen" in en selecteer "Controlecentrum".
3. Kies "Besturing aanpassen" en tik op de groene knop naast "Schermopname" om de functie in te schakelen.
4. Keer terug naar het "Controlecentrum".
5. Druk op de knop "Schermopname".
6. Klik op de rode knop om de opname te beëindigen.

De opname wordt meestal opgeslagen in uw Foto's-app.

Controleer of op je iPhone de Shortcuts-tool vooraf is geïnstalleerd om je video in een GIF te veranderen. U kunt de tool ook downloaden in de App Store .

Zo verander je de video in een GIF-bestand op een iPhone:

1. Open de app, ga naar de onderkant van de interface en selecteer de kaart "Galerij".
   
2. Tik op het tabblad "Snelkoppelingen voor starters" onder het zoekmenu.
3. Scrol naar de onderkant van het scherm en klik op het gedeelte "GIF maken".
   
4. Druk op de knop "Snelkoppeling toevoegen" om de GIF-snelkoppeling in te schakelen.
   
5. Wanneer de snelkoppeling is geïnstalleerd, keert u terug naar "Mijn snelkoppelingen".
   
6. Tik op "GIF maken" en kies "OK" om de app en uw fotogalerij te verbinden.
   
7. Blader door je video's en selecteer de video waarvan je een GIF wilt maken.
   
8. Gebruik de schuifregelaars om te selecteren welke frames in de GIF worden opgenomen.
   
9. Tik op "Opslaan" om de wijzigingen vast te leggen. Uw nieuwe GIF-bestand wordt opgeslagen in de foto-app van de tablet.
   
10. Klik op "Gereed" om de Shortcuts-app af te sluiten.
    

Hoe te exporteren naar GIF in Figma op een Android-apparaat

Omdat gebruikers met de Figma-app voorbeelden van prototypes kunnen bekijken, maar ze niet kunnen exporteren, neemt u het voorbeeld op uw Android-apparaat op en transformeert u de video later in een GIF.

Hier leest u hoe u Figma op een Android kunt screenen:

1. Start de app en open een voorbeeld van uw project.
2. Dubbel veeg vanaf de bovenkant van het scherm en selecteer 'Schermopname'. Als het er niet is, veeg dan naar rechts. Soms moet u op het pictogram 'Bewerken' boven aan het scherm tikken om een ​​verborgen menu weer te geven. De functie "Schermopname" kan er ook zijn.
3. Tik op het prototypevoorbeeld om aan te geven dat u het wilt opnemen.
4. Klik op de knop "Starten". Zodra het aftellen voorbij is, wordt het scherm opgenomen.
5. Veeg omlaag en tik op de kaart "Schermrecorder" om de opname te stoppen.

De video van de Figma-preview wordt opgeslagen in uw Android-foto-app. Je kunt er een GIF van maken met de GIPHY-app .

Een video converteren naar een GIF op een Android-apparaat:

1. Installeer en start de GIPHY-app op uw apparaat.
   
2. Meld u aan en maak een GIPHY-account aan.
   
3. Druk op de knop "Maken" in de rechterbovenhoek van de interface.
   
4. Schakel de app in om toegang te krijgen tot uw camera.
   
5. Selecteer een video uit je Android-galerij.
   
6. Pas de lengte van de video aan. Met de GIPHY-app kunnen gebruikers elementen zoals tekst en stickers in hun bestanden invoegen.
   
7. Klik op het pictogram "Pijl" onderaan de app.
   
8. Kies "Share GIF" en selecteer "Save GIF".
   

Exporteer GIF's zonder beperkingen

Of je nu een ervaren ontwikkelaar bent of een amateurontwerper, je verdient het om een ​​handige manier te hebben om je werk in GIF-vorm aan anderen te laten zien. U kunt een voorbeeld van uw creaties bekijken in de Figma-app, maar toegang krijgen tot uw ontwerpen kan een uitdagende taak worden zodra de internetverbinding uitvalt. Totdat Figma met een gebruiksvriendelijke exportoplossing komt, kunt u vertrouwen op de methoden die we in het artikel hebben uiteengezet.

We hopen dat deze gids je heeft geholpen beter te begrijpen hoe je een GIF van hoge kwaliteit kunt krijgen van je Figma-creaties, ongeacht welk apparaat je gebruikt.

Gebruik je de web- of mobiele versie van Figma? Wat is uw favoriete manier om GIF's te exporteren? Laat het ons weten in de commentaarsectie hieronder.