Becraft

Comment Insérer de la 3D dans Figma facilement ?

Découvrez comment intégrer facilement des objets 3D dans Figma en utilisant Spline et le plugin Anima. Créez ou importez vos designs 3D dans Spline, exportez-les en tant que Viewer, puis intégrez-les dans Figma grâce à Anima pour enrichir vos prototypes avec des éléments interactifs et immersifs.
3D Figma
3D Figma

Qu'est-ce que la 3D ?

La 3D (trois dimensions) est une technique qui permet de créer des objets visuels avec de la profondeur, de la hauteur, et de la largeur, imitant la réalité. En design numérique, la 3D permet de concevoir des éléments visuels qui peuvent être manipulés et observés sous différents angles. Les objets 3D sont largement utilisés dans les jeux vidéo, les films, l'architecture, et de plus en plus dans le web design.

Pourquoi ajouter de la 3D à son site ?

L'ajout de la 3D à un site web permet de créer une expérience plus immersive et interactive pour les utilisateurs. La 3D attire l'attention, améliore la présentation des produits et concepts, et peut renforcer l'engagement des visiteurs. Par exemple, des éléments 3D interactifs peuvent être utilisés pour des démonstrations de produits, des visualisations de données ou des expériences utilisateur uniques. De plus, l'intégration de la 3D est désormais plus accessible avec des outils comme Spline, permettant une personnalisation simple et efficace de l'expérience utilisateur.


Étape 1 : Créez / Importez ou sélectionner le design 3D dans Spline que vous voulez

Image du site Spline
Image du site Spline
  1. Allez sur app.spline.design.
  2. Créez un compte ou connectez-vous si vous en avez déjà un.
  3. Une fois connecté, explorez la bibliothèque de modèles 3D disponibles.
  4. Parcourez les modèles 3D et sélectionnez celui qui correspond à vos besoins.
  5. Vous pouvez également créer un modèle personnalisé ou importer le vôtre.

Étape 2 : Préparer votre modèle pour l'export

screenshot dans Spline
screenshot dans Spline
  1. Une fois votre modèle choisi (ex. Molang 3D), modifiez-le si nécessaire dans l'interface.
  2. Ajustez la scène, les couleurs ou les éléments selon vos préférences.
  3. Cliquez sur Export en haut à droite de l'interface.
  4. Dans la fenêtre d’exportation, sélectionnez l'onglet Viewer.
  5. Accédez à l'onglet Overview et copiez le script généré pour l'intégration dans Anima.

Vous pouvez également personnaliser le script (comme retirer le logo Spline, etc.) avant de l'utiliser.

Étape 3 : Intégrer votre 3D dans Figma avec le Plugin Anima

Intégrer votre 3D dans Figma avec le Plugin Anima
Intégrer votre 3D dans Figma avec le Plugin Anima
  1. Installez et activez le plugin Anima sur Figma. Ce plugin permet d'ajouter des éléments interactifs comme des vidéos, du code HTML, et bien sûr des designs 3D dans vos projets Figma.
  2. Dans Figma, créez une nouvelle frame à l'endroit où vous souhaitez insérer l’objet 3D.
Dans Figma, créez une nouvelle frame à l'endroit où vous souhaitez insérer l’objet 3D
Dans Figma, créez une nouvelle frame à l'endroit où vous souhaitez insérer l’objet 3D
  1. Ouvrez le plugin Anima dans Figma, puis choisissez l'option "Embed" pour insérer du code externe.
  2. Collez le script HTML obtenu depuis Spline (via l’option Viewer) dans le champ prévu.
  3. Cliquez sur Synchroniser, puis sur Preview pour lancer la prévisualisation. Vous serez redirigé vers Anima.

Étape 4 : Prévisualisation et Interaction

Prévisualisation dans Anima
  1. Une fois l'intégration effectuée, vous pouvez tester l’interactivité de votre 3D sur Anima.
  2. Interagissez avec l’objet 3D pour vérifier le rendu et les animations.
  3. Si tout est fonctionnel, vous pouvez publier ou partager votre prototype avec votre équipe ou vos clients. Anima permet aussi d’exporter directement des prototypes en HTML ou de les intégrer dans des sites web.

Avec cette méthode, vous pouvez enrichir vos designs dans Figma avec des objets 3D interactifs, créant ainsi des prototypes immersifs et plus réalistes grâce à Spline et Anima.

En bonus voici une vidéo pour vous aider

Vidéo réalisé par Jesse Showalter

Conclusion

Intégrer des éléments 3D dans vos projets Figma grâce à Spline et Anima peut transformer l'apparence et l'interactivité de vos conceptions. En suivant ce tutoriel étape par étape, vous pouvez facilement importer des modèles 3D et les personnaliser selon vos besoins. La 3D ajoute une dimension supplémentaire à vos designs, captivant l’attention des utilisateurs et améliorant l’expérience globale. N’hésitez pas à expérimenter avec différents modèles et ajustements pour créer des présentations vraiment uniques et engageantes.

About the author
Becraft

Deviens un Meilleur Designer

Grâce à la newsletter, améliore tes compétences de designer : découvre des astuces, explore de nouveaux outils et reste à jour sur les dernières tendances du design!

Becraft

Super ! Vous vous êtes inscrit avec succès.

Bienvenue à nouveau! Vous vous êtes connecté avec succès.

Vous vous êtes abonné avec succès à Becraft.

Succès ! Vérifiez dans votre e-mail le lien magique pour vous connecter.

Succès! Vos informations de facturation ont été mises à jour.

Votre facturation n'a pas été mise à jour.