Nettoyer un import Figma : supprimer le superflu, n'aplatir que ce que vous ne modifierez plus

Pour nettoyer un import dans Figma, suivez un ordre fixe : enregistrez une version, supprimez le superflu, dissociez les conteneurs qui n'apportent rien, protégez les frames qui portent l'auto layout, puis aplatissez en dernier. L'aplatissement passe en dernier parce que c'est la seule étape qu'on ne peut pas défaire calque par calque. Tout ce qui précède se corrige à peu de frais.

Ce tutoriel s'adresse aux designers et aux développeurs qui viennent d'amener une page web dans Figma sous forme de calques. Il vous faut la page importée, ouverte dans un fichier où vous avez les droits de modification. Un import vous donne de vrais frames, du texte et des vecteurs. Une vraie page apporte aussi des éléments masqués, des boîtes vides et des couches de balisage d'enrobage. Les étapes ci-dessous les retirent sans casser la mise en page que vous voulez garder.

Étape 0 : enregistrez une version avant de toucher à quoi que ce soit

L'aplatissement est destructif. L'aide de Figma indique qu'une fois un objet aplati, ses calques individuels ne peuvent plus être séparés, et que le retour en arrière passe par l'annulation ou par la restauration d'une version depuis l'historique des versions.

Commencez donc par nommer une version. Ouvrez l'historique des versions, enregistrez une version et appelez-la « import brut ». Si une passe de nettoyage tourne mal dans une heure, l'annulation ne remontera peut-être plus assez loin. La version nommée, si.

Étape 1 : supprimez le superflu

Le superflu, c'est tout calque qui n'apporte rien au design sur lequel vous allez travailler. Sur une page importée, il tombe en général dans quatre groupes :

• Les calques masqués, comme les menus mobiles, les bandeaux de cookies et les modales qui n'étaient pas visibles lors de la capture de la page.
• Les frames vides, sans enfants ni remplissage, laissés par des éléments espaceurs.
• Les doublons hors écran, par exemple une seconde copie de la navigation prévue pour un autre breakpoint.
• Les pixels de suivi et autres minuscules images sans rôle visuel.

Masquer ou supprimer

Masquer un calque et le supprimer sont deux choses différentes. Un calque masqué reste dans le fichier et continue de compter dans le nombre de calques. Le guide de l'auto layout de Figma précise qu'une liste en auto layout s'adapte quand des éléments sont ajoutés, retirés ou masqués : un enfant masqué ne laissera donc pas de vide dans la mise en page. Masquer est ainsi un moyen pratique de tester si un calque compte. Quand vous êtes sûr que non, supprimez-le. Les calques masqués alourdissent toujours le fichier et encombrent toujours le panneau des calques.

Une limite, en toute honnêteté : dans les pages d'aide de Figma que nous avons consultées, nous n'avons trouvé aucune commande intégrée qui supprime d'un coup tous les calques masqués, ni aucune qui retire tous les frames vides. La page de Figma sur les workflows d'IA ne cite « delete all invisible layers » que comme exemple de prompt. Prévoyez donc de le faire à la main. Déployez le panneau des calques, sélectionnez les calques fautifs avec Shift ou Command, puis appuyez sur Delete. Travaillez de bas en haut de l'arborescence, pour ne pas avoir à chercher le parent devenu vide après avoir supprimé un enfant.

Étape 2 : dissociez les conteneurs qui n'apportent rien

Les pages web sont construites avec des conteneurs imbriqués, et un import reproduit cette imbrication. Vous pouvez vous retrouver avec cinq niveaux de frames autour d'un seul bouton. La plupart de ces conteneurs ne servent à rien dans Figma.

Dissocier retire le conteneur et remonte ses enfants d'un niveau. Le raccourci est le même pour les groupes et les frames : Shift Command G ou Command Delete sur Mac, Shift Control G ou Control Backspace sous Windows, comme l'indique la page de Figma sur la différence entre frames et groupes.

Avant de dissocier, identifiez le type de conteneur, car les deux se comportent différemment :

Un frame sans remplissage, sans contour, sans auto layout et sans rôle peut être retiré sans risque. Un frame qui porte l'un de ces éléments fait un travail, ce qui nous mène à l'étape suivante.

Étape 3 : gardez les calques qui portent la mise en page

Les frames à protéger sont ceux qui ont un auto layout. UnHTML convertit l'espacement, le padding, le wrap et le stretch du CSS flex et grid de la page en auto layout, et quand un frame ne peut pas reproduire la géométrie capturée, il se rabat sur le positionnement absolu. Un fichier importé est donc un mélange : certains frames s'écoulent, d'autres sont épinglés.

Dissocier ou aplatir un frame en auto layout fait disparaître sa direction, son gap et son padding. Les enfants restent, mais les règles qui les organisaient s'en vont. Pour vérifier un frame avant d'agir, sélectionnez-le et regardez la barre latérale droite. Si l'auto layout est activé, laissez-le tranquille, ou ne supprimez que ses enfants terminaux.

Un cas voisin est celui d'un enfant épinglé volontairement. L'option Ignore auto layout de Figma, auparavant appelée absolute position, exclut un objet du flux tout en le gardant dans le frame en auto layout. Un calque de ce type peut ressembler à un intrus alors qu'il est voulu : vérifiez avant de le supprimer. Si vous ne savez pas comment un élément s'est retrouvé épinglé, comment arrivent les éléments absolute et fixed explique chaque valeur de position en CSS.

Vous pouvez aussi ajouter un auto layout là où le repli n'en a laissé aucun. Sélectionnez les calques et appuyez sur Shift A : Figma devine le sens du flux, vertical, horizontal ou grid. Vérifiez cette proposition. Ce n'est qu'une supposition. Pour retirer l'auto layout, le raccourci est Option Shift A sur Mac et Alt Shift A sous Windows.

Étape 4 : n'aplatissez que ce que vous ne modifierez jamais

Aplatir fusionne une sélection en un seul calque vectoriel. Figma indique que cela réduit la taille du fichier et simplifie le design. Cela fonctionne sur des sélections de vecteurs, sur des calques de texte, et sur des frames ou des sections. Aplatir un conteneur fusionne ses enfants et supprime le conteneur lui-même. Le raccourci est Option Shift F sur Mac et Alt Shift F sous Windows, ou clic droit puis Flatten.

Bons candidats :

• Des icônes construites à partir de plusieurs tracés vectoriels superposés, quand vous n'avez besoin que de la forme finale.
• Des illustrations décoratives composées de dizaines de petites formes.
• Des logos ou des logotypes que vous comptez retoucher comme un seul contour.

Mauvais candidats :

• Le texte. Un calque de texte aplati devient des contours : vous ne pouvez plus modifier les mots ni appliquer un style de texte.
• Les boutons, les cartes et tout frame en auto layout. Aplatir l'un d'eux supprime le frame et ses règles de mise en page.
• Tout ce qu'un développeur inspectera plus tard pour l'espacement ou la typographie.

Les SVG d'une page arrivent déjà sous forme de vecteurs natifs : beaucoup d'icônes n'ont donc pas besoin d'être aplaties pour être modifiables. N'aplatissez-les que si vous voulez un seul tracé fusionné. Un SVG aplati est plus simple, mais il perd sa structure interne, et vous ne pouvez pas la récupérer sans l'historique des versions.

Aplatissez de façon sélective, et par petits lots. Sélectionnez une icône, aplatissez-la et regardez le résultat avant de passer à la suivante. Si vous aplatissez une section entière d'un coup et que le résultat est mauvais, vous avez une seule grosse annulation et aucun moyen de savoir quel groupe est en cause.

Vérifiez le résultat

Une fois la passe terminée, comparez le fichier à votre version « import brut ». L'arborescence des calques doit être plus courte et moins profonde. Le texte doit rester modifiable. Les frames qui avaient un auto layout doivent toujours l'afficher dans la barre latérale. Un fichier propre est aussi plus facile à transformer en éléments réutilisables, ce que traite transformer une page importée en composants.

Une remarque sur les chiffres. L'offre gratuite d'UnHTML plafonne un import à 500 layers, et Pro supprime ce plafond. Le plafond s'applique au moment de l'import : supprimer des calques ensuite dans Figma ne change donc pas ce que l'importeur a produit. Si votre page atteint le plafond, le nettoyage ne récupérera pas la partie manquante : réimportez-la avec Pro, ou par sections. Le détail des offres se trouve sur la page d'accueil d'UnHTML.

En octobre 2026, les commandes et raccourcis ci-dessus correspondent aux pages du centre d'aide de Figma citées dans cet article. Les menus changent d'une version à l'autre : si un raccourci ne fait rien, faites un clic droit sur la sélection et cherchez la même commande par son nom.