Comment créer un visuel 3D sur Figma ?

Tutoriel
May 22, 2022
1 min
image d'une cannette 3d dans figma avec le logo digidop sur fond bleu
Points clés de l'article

Figma est outil de webdesign qui offre de nombreuses fonctionnalités pour créer des maquettes web, des visuels, et autres design. Mais l’interface de design Figma est une interface 2D, et bien que certaines fonctionnalités (ombrages, gradient, opacité, etc.) vous permettent de créer des effets de volume et reliefs, l’outil n’est pas conçu pour la 3D.

Mais la puissance de Figma ne repose pas uniquement sur ses propres fonctionnalités. Figma dispose en effet d’une multitude de plugin pour pousser encore plus loin les limites de vos design. Les plugins on l’avantage d’offrir les fonctionnalités d’un autre outil, tout en étant compatible avec votre design Figma.

Ici, c’est le plugjn Vectary 3D Elements qui va nous permettre d’intégrer des visuels 3D dans Figma.

1. Ajouter le plugin Vectory 3D Elements

Depuis la Figma community, allez sur le plugin Vectory 3D Elements.

Cliquez sur "Install" pour ajouter le plugin à votre compte Figma.

image du plugin figma vectory 3d element

2. Ouvrir le plugin dans Figma

Une fois installé, allez sur votre fichier Figma et ouvrez le plugin :

  • Clic droit sur le canva
  • Cliquez sur "Plugin"
  • Cherchez le plugin Vectory 3D element
capture d'écran du plugin vectory 3d element ouvert dans un projet figma

3. Choisir un visuel 3D

Vectory 3D Element vous permet d'accéder à des mockups 3D de différentes manières :

  • Depuis la librairie 3D gratuite du plugin
  • Depuis un lien de téléchargement Vectory 3D Elements
  • Depuis votre compte Vectory 3D Element
capture d'écran des 3 possibilités d'ajout de visuel 3d sur figma

4. Personnaliser le mockup 3D

Une fois avoir choisi votre mockup 3D, vous pourrez directement le personnaliser depuis le plugin. L'outil vous met à disposition de nombreuses fonctionnalités pour :

  • Gérer l'environnement de l'élément 3D
  • Gérer la matière
  • Personaliser la mise en scène du mockup
  • Ajouter des ombrages
  • Utilisez les frame Figma pour personnaliser les surfaces du visuel
  • Modifier les couleurs

5. Intégrer l'illustration 3D dans Figma

Un fois votre visuel 3D personnalisé, vous pourrez cliquer sur "Export Image" pour l'intégrer directement dans votre fichier Figma. Il ne vous reste plus qu'à l'intégrer à votre maquette !

Thomas Labonne
Thomas Labonne
Co-fondateur

Articles qui devraient vous intéresser

A woman speaks on stage at a conference, wearing a headset microphone. Behind her, a large black screen displays the question “What then?” in bold white text.
Evénements
Webflow

Digidop participe à la FLOWconf 2025, le plus grand événement Webflow & marketing d’Europe.

Digidop participe à la FLOWconf 2025, le plus grand événement Webflow & marketing d’Europe.
Aperçu visuel de plusieurs typographies modernes utilisées sur le web en 2025, chacune présentée sur une image de fond inspirante : Editorial New, DM Serif Display, Aeonik, SF Pro Rounded, Rader, Champ, Monument, Canicule, Clash Display, Supply, Agrandir, et d’autres — une composition graphique mettant en avant la diversité typographique.
Documentation
Design

Les 20 meilleures typographies pour un site web moderne et impactant en 2025

Les 20 meilleures typographies pour un site web moderne et impactant en 2025
Mosaic of homepage designs from several Webflow agencies (Digidop, N4, Refokus, Flow Ninja, Tonik, Finsweet, Edgar Allan), showcasing diverse creative approaches and visual identities centered around the Webflow logo.
Storytelling
Webflow

Mon top 7 des meilleures agences Webflow en 2025 (avis d’un fondateur d’agence)

Mon top 7 des meilleures agences Webflow en 2025 (avis d’un fondateur d’agence)

Transformez votre site web en un moteur de croissance.

Nous contacter