Exporter de Figma vers Adobe After Effects

Exportez vos designs Figma vers Adobe XD pour vos workflows After Effects et configurez les options d’export.

Tutoriel vidéo : convertir de Figma vers Adobe After Effects

Cette vidéo montre comment convertir automatiquement vos designs de Figma vers After Effects (en un clic), directement depuis Figma, avec le plugin Convertify.

Pour exporter vos designs Figma vers Adobe After Effects, suivez les étapes pour convertir, télécharger et ouvrir votre fichier .xd, qui peut ensuite être exporté depuis Adobe XD vers Adobe After Effects.

Sélectionner une page Figma à convertir pour Adobe After Effects ​

Une fois le plugin Convertify lancé, cliquez sur l’onglet Export from Figma, choisissez Export Figma to Adobe After Effects dans le sélecteur de workflow, puis sélectionnez la page Figma à convertir pour Adobe After Effects.

Le plugin exporte automatiquement la page Figma que vous êtes en train de consulter. Pour exporter une autre page, cliquez sur n’importe quelle page de votre fichier dans la colonne de gauche de Figma, sous l’en-tête Pages.

Une fois votre page Figma sélectionnée, vous pouvez convertir votre design en fichier Adobe XD (à exporter ensuite vers After Effects) en cliquant sur le bouton Export This Page dans le plugin Convertify. Le processus de conversion automatique démarre alors.

Estimations de durée. L’estimation de durée (par exemple, ~14 seconds to convert 555 layers) est calculée à partir du nombre de calques de votre page Figma pour vous donner une idée du temps que prendra la conversion. Les pages Figma qui contiennent des images volumineuses allongeront probablement le temps nécessaire pour convertir votre page Figma en fichier Adobe XD.

Adobe XD ne prend pas en charge plusieurs pages dans un même document. La sélection de plusieurs pages ne s’applique qu’aux exports Sketch, car l’application Adobe XD ne prend en charge pour l’instant que les fichiers d’une seule page.

Exporter vers XD les frames Figma sélectionnés sur votre page ​

Si vous ne voulez pas convertir toute la page Figma en fichier Adobe XD (à exporter ensuite vers After Effects), vous pouvez aussi convertir uniquement certains calques de frame de votre design Figma vers Adobe XD : sélectionnez le ou les frames Figma à convertir, puis cliquez sur le bouton Export Selected Frames dans le plugin Convertify. Le processus de conversion automatique démarre alors.

Adobe XD ne prend pas en charge plusieurs pages dans un même document. La sélection de plusieurs pages ne s’applique qu’aux exports Sketch, car l’application Adobe XD ne prend en charge pour l’instant que les fichiers d’une seule page.

Télécharger votre fichier .xd pour l’exporter vers After Effects ​

Une fois que Convertify a terminé le traitement de votre page Figma, un message de confirmation s’affiche : vous pouvez télécharger votre fichier .xd en cliquant sur le bouton Download .xd (for exporting to AE).

Après avoir téléchargé votre fichier .xd depuis Figma sur votre ordinateur, ouvrez votre explorateur de fichiers dans le dossier où il a été enregistré. Un double-clic sur le fichier .xd exporté l’ouvre dans la version d’Adobe XD installée sur votre ordinateur.

Enregistrer les fichiers téléchargés depuis Figma. Si vous utilisez l’application de bureau Figma, une fenêtre vous invite à télécharger votre fichier. En revanche, si vous utilisez Figma dans un navigateur web, votre fichier est téléchargé automatiquement sur votre ordinateur par défaut (en général dans le dossier Téléchargements de votre ordinateur).

Exporter votre plan de travail d’Adobe XD vers After Effects ​

Installer Adobe XD. Si vous êtes sur Mac ou Windows et si vous avez un compte Adobe CC payant, vous pouvez installer Adobe XD depuis Creative Cloud (ou télécharger l’installateur .dmg directement ici), ce qui devrait vous permettre de l’exécuter sur votre ordinateur. Vous pouvez aussi trouver en ligne l’installateur autonome pour Windows.

Une fois votre fichier .xd ouvert dans Adobe XD, vous pouvez exporter des plans de travail nativement vers After Effects : cliquez sur le plan de travail de votre page à utiliser dans After Effects, puis cliquez sur File → Export → After Effects.

Si XD n’exporte pas votre plan de travail vers After Effects, essayez d’abord de cocher la case Mark for Export dans le panneau de droite.

Afficher vos calques exportés dans After Effects ​

Après avoir cliqué sur File → Export → After Effects pour le plan de travail sélectionné dans Adobe XD, l’application Adobe After Effects (vérifiez qu’elle est installée) s’ouvre automatiquement sur votre ordinateur et importe nativement le plan de travail sélectionné et tous ses calques d’Adobe XD dans votre timeline After Effects.

Une fois l’export terminé, vous pouvez enregistrer votre nouveau fichier After Effects et fermer Adobe XD pour poursuivre votre motion design avec les calques issus de votre fichier Figma, désormais tous prêts à être animés dans After Effects.

Configurer vos options d’export Adobe After Effects ​

Avant d’exporter vos designs de Figma vers Adobe After Effects (via l’import d’un fichier .xd), vous pouvez configurer quelques réglages facultatifs qui peuvent vous être utiles.

Rendre en images les calques préfixés par * ​

Activez l’option Render layers with * prefix (eg. "* Frame") as images pour exporter automatiquement sous forme de calques image, et non dans leur type de calque habituel, tous les calques Figma dont le nom commence par « * » (par exemple, « *Frame 1 »).

Inclure des images de référence en superposition sur les plans de travail ​

Activez l’option Include reference image overlays for artboards pour inclure automatiquement, par-dessus chaque plan de travail de votre fichier exporté, une image de référence de celui-ci avec une opacité de calque de 50 % ; c’est pratique pour effectuer des retouches manuelles ou ajuster la position des calques.

Dissocier tous les calques enfants des plans de travail Figma ​

Activez l’option Ungroup all Figma artboard child layers pour dissocier automatiquement tous les calques « Group » de votre fichier Figma.

Mettre à l’échelle les compositions After Effects ​

Choisissez une option Scale Comps pour mettre automatiquement vos plans de travail Figma à une échelle comprise dans la plage @0.25x - @4x (la valeur par défaut, @1x, ne modifie pas du tout l’échelle de vos designs). Vos compositions seront ainsi agrandies ou réduites lorsque vous exporterez le fichier .xd converti vers After Effects.

Positionnement plus précis pour les polices installées ​

Adobe XD ne prend pas en charge certaines propriétés de texte comme l’alignement vertical et calcule les hauteurs de ligne différemment de Figma.

Activez l’option More accurate positioning for installed fonts (slower) pour exporter vos valeurs de texte Figma de façon plus précise pour XD (pour toutes les polices du design installées sur votre machine).

Conversion plus lente. L’activation de l’option More accurate positioning for installed fonts (slower) peut rendre la conversion beaucoup plus lente que d’habitude (selon le nombre de calques de texte).

Comprendre les différences entre Figma et After Effects ​

Convertify fait de son mieux pour convertir tous vos calques et attributs de Figma vers Adobe XD en vue de leur export vers After Effects. Il existe toutefois des limites naturelles, car Adobe XD prend en charge moins de fonctionnalités natives que Figma.

Fonctionnalités Figma absentes d’Adobe XD (qui ne seront pas exportées de XD vers After Effects) ​

Ces fonctionnalités sont disponibles dans Figma, mais pas nativement dans Adobe XD : elles ne seront donc pas reprises dans After Effects lorsque vous y exporterez votre fichier.

  • Masquage des plans de travail parents
  • Plans de travail parents pivotés
  • Ellipses avec des propriétés « arc »
  • Plusieurs remplissages ou contours sur un même calque
  • Calques vectoriels avec un rayon d’angle
  • Contours et remplissages appliqués à des groupes
  • Alignement vertical des calques de texte
  • Masques de calque imbriqués