Outils de design

Exporter les assets Figma : préparer une livraison exploitable

Une livraison d’assets doit permettre de retrouver le bon fichier et son usage, sans transformer tous les composants de l’interface en images.

Schéma original du dossier : Outils de design
Repères pour ce dossier, illustration pédagogique originale.

Pour exporter des assets Figma, commencez par identifier ce qui doit devenir un fichier et ce qui doit être construit dans l'interface. Une illustration et un bouton interactif n'ont pas le même rôle. L'export doit accompagner une décision d'intégration, pas remplacer la description du composant.

Définir l'usage de chaque fichier

Relevez le nom de l'élément, l'écran concerné, la taille d'affichage prévue et le besoin de transparence. Vérifiez les droits d'utilisation avant de livrer une photo, une icône ou une police. La présence d'un élément dans la maquette ne prouve pas que sa redistribution est autorisée.

La documentation d'export Figma décrit les formats et réglages disponibles. Choisissez selon l'usage et contrôlez le résultat réellement exporté, notamment pour les effets et les éléments qui se recouvrent.

Fixer une convention de livraison simple

Utilisez des noms descriptifs, stables et sans suffixes ambigus comme « final-final ». Notez la relation entre les variantes et leur usage. Une personne qui n'a pas ouvert la maquette doit pouvoir distinguer une illustration d'en-tête de sa version destinée à une petite carte.

Préparez un inventaire avec le fichier, ses dimensions, son format, l'emplacement prévu et les droits ou crédits nécessaires. Pour les images de contenu, ajoutez une consigne éditoriale sur leur fonction. L'alternative textuelle doit être rédigée dans le contexte final de la page, pas déduite mécaniquement du nom de l'asset.

Exemple fictif : livrer une illustration et une icône

Imaginons une page d'atelier avec une grande illustration de présentation et une petite icône de calendrier. L'illustration porte une ambiance ; l'icône accompagne une date déjà écrite. Documentez ces deux fonctions plutôt que de livrer un dossier de fichiers non commentés.

Exportez, puis ouvrez les fichiers en dehors de Figma. Vérifiez le cadrage, les bords, la transparence et le rendu sur les fonds prévus. Inspectez aussi les dimensions réellement produites. Une image qui paraît correcte sur fond blanc peut révéler un contour indésirable sur le fond du site.

Ce scénario fictif ne décrit pas des fichiers clients. Il propose une séquence de contrôle avant transmission, avec une décision explicite pour chaque asset.

Vérifier l'intégration après réception

Pour les images destinées à plusieurs tailles, préparez les variantes responsives et leurs indications d'affichage. L'export initial et la transformation pour le Web sont deux étapes à documenter : ne supposez pas que le fichier sorti de l'outil est déjà le meilleur fichier à servir partout.

Pour les éléments réutilisés, transmettez aussi les règles des composants et variantes. Un développeur ne devrait pas avoir à deviner un état d'erreur en observant une image statique.

Enfin, contrôlez les pages publiées : fichier présent, proportions correctes, contenu non coupé et absence de ressource distante ajoutée par erreur. Si des SVG proviennent d'un tiers, inspectez leur contenu avant de les intégrer ; l'extension seule ne suffit pas à décrire ce qu'ils contiennent.

Questions fréquentes

Faut-il exporter les boutons comme images ?

Un bouton interactif doit être construit avec une structure adaptée à sa fonction. Une image de bouton ne fournit pas à elle seule son nom, son comportement ni ses états accessibles.

Quel format choisir systématiquement ?

Il n'existe pas de format universel. Le type de visuel, la transparence, la précision attendue et les contraintes d'intégration déterminent le choix, qui doit être vérifié sur le fichier obtenu.

Une livraison est-elle finie une fois le dossier envoyé ?

Il reste à vérifier que les fichiers sont compris et correctement intégrés. Conservez l'inventaire et faites un contrôle de la page développée pour repérer les confusions de version ou de destination.

Sources

Documentation consultée lors de la relecture du 10 septembre 2026.

Poursuivre votre lecture

Revenir au dossier