Exporter le code d'une image vectorisée SVG avec Figma

Tutoriel
July 18, 2022
3 min
Digidop blog
Points clés de l'article

Dans un précédent tutoriel, nous vous avions montré comment récupérer le code HTML de n'importe quel fichier SVG. Aujourd'hui, nous allons vous présenter une autre manière de le faire (plus rapide) directement dans Figma en 2 clics.

Étape 1 : Importer votre SVG dans Figma

La première étape de ce tutoriel consiste à insérer votre fichier SVG dans Figma ou créer un vecteur dans l'outil de design.

Étape 2 : Sélectionnez votre SVG

Après l'avoir importé, vous allez sélectionner votre fichier dans Figma en cliquant dessus.

Étape 3 : Copier comme SVG

Une fois sélectionné, vous allez faire un clic droit, survolé "Copy/Paste as", puis cliquer sur "Copy as SVG". Cette manipulation va vous permettre, si vous collez (cmd ou ctrl + V) dans un éditeur de texte, d'avoir le code HTML de votre image vectorielle.

copier comme svg figma

Étape 4 : Coller le code SVG

Vous n'avez plus qu'à coller ce que vous avez copié dans un éditeur de texte. Par exemple dans un embed Webflow, dans un bloc note, dans un tableur, bref là où vous le souhaitez.

coller code svg fichier figma

Voilà, vous pouvez maintenant récupérer le code d'une image vectorielle très rapidement grâce à Figma. Vous pouvez maintenant découvrir comment convertir en PNG en SVG depuis Figma.

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

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