Rendre une page importée responsive avec les variables Figma

Réponse courte

Pour rendre une page importée responsive dans Figma, vous créez une collection de variables numériques avec un mode par taille d'appareil, vous liez ces variables au gap, au padding, à la largeur et à la hauteur de vos frames en auto layout, puis vous réglez le mode sur chaque frame. Les variables contiennent les nombres. Le mode décide quel jeu de valeurs un frame utilise. Un import vous donne des nombres fixes : ce travail se fait donc après.

Ce tutoriel parcourt cette mise en place dans l'ordre. Il s'appuie sur les pages du centre d'aide de Figma, consultées le 21 octobre 2026, et les étapes reprennent les noms que Figma affiche dans son interface à cette date.

Ce qu'il vous faut d'abord

Il vous faut une page déjà présente dans Figma sous forme de calques, idéalement avec de l'auto layout sur les frames qui doivent s'adapter. Les pages publiques d'UnHTML décrivent l'auto layout comme dérivé du CSS réel de la page, et précisent que les frames qui ne peuvent pas reproduire la géométrie capturée se rabattent sur le positionnement absolu. Le positionnement absolu n'a ni gap ni padding à lier : commencez donc par les frames arrivés en auto layout. L'article sur la correspondance entre CSS Flexbox et l'auto layout de Figma montre lesquels attendre.

Il vous faut aussi une offre qui prend en charge les modes. Figma indique que la création et l'utilisation des modes sont disponibles avec les offres Education, Professional, Organization et Enterprise, et que le nombre de modes par collection dépend de l'offre. Vérifiez la vôtre avant de prévoir trois breakpoints.

Un dernier point. Les pages publiques d'UnHTML ne disent pas si des variables Figma sont créées ou liées pendant un import ; ce tutoriel suppose donc qu'il n'y en a aucune et les construit à la main. Si votre import en contient déjà, adaptez l'étape 1 plutôt que de les dupliquer.

Étape 1 : créer une collection avec un mode par taille d'appareil

Figma définit un mode comme « a list of values for a variable in a collection, storing one value per variable » et cite les tailles d'appareil parmi les contextes qu'un mode peut représenter (Overview of variables, collections, and modes). C'est exactement la forme dont a besoin une configuration de breakpoints.

1. Ouvrez la vue Variables depuis la barre de navigation de gauche et créez une collection. Donnez-lui un nom simple, par exemple Layout.
2. Renommez le premier mode en Desktop. C'est dans ce mode que chaque nouvelle variable reçoit sa première valeur.
3. Cliquez sur New variable mode, à droite des en-têtes de colonnes, et nommez-le Tablet. Figma copie les valeurs de la première colonne dans le nouveau mode : les deux démarrent donc identiques.
4. Ajoutez de la même façon un troisième mode appelé Mobile. Vous pouvez aussi faire un clic droit sur l'en-tête d'un mode et choisir Duplicate mode.

La source de ces étapes est la page de Figma sur les modes pour les variables. Une seule collection peut contenir jusqu'à 5 000 variables, bien plus que la mise en page d'une page n'en demande.

Étape 2 : créer les variables numériques

Figma affirme que les variables numériques « are great at handling responsive designs » et cite la largeur, la hauteur (minimum et maximum compris), le padding et le gap parmi les propriétés qu'elles peuvent piloter. Créez une variable pour chaque valeur qui doit changer selon la taille. Une courte liste suffit :

Les nombres sont des exemples, pas des recommandations. Relevez les vraies valeurs sur votre propre page : sélectionnez une section, notez son padding et le gap entre ses enfants, et utilisez-les comme colonne Desktop. Remplissez Tablet et Mobile avec ce que vous voulez à ces tailles.

Nommez les variables d'après leur rôle, pas d'après leur valeur. Un nom comme card-gap survit à une refonte. Un nom comme gap-32, non.

Étape 3 : lier les variables à vos frames

Il faut maintenant relier les variables aux propriétés. Figma documente un geste différent pour chaque type de champ (Apply variables to designs) :

1. Pour le gap, la largeur et la hauteur, cliquez dans le champ de la propriété et appuyez sur = pour ouvrir le sélecteur, puis choisissez la variable.
2. Pour le padding, ouvrez la liste déroulante du champ et sélectionnez Apply variable.
3. Pour les autres propriétés, maintenez Shift et cliquez dans le champ, ou faites un clic droit et choisissez Apply variable.

Les variables numériques sont signalées par une icône de nombre dans le sélecteur. Si vous n'en voyez aucune, il n'y a peut-être pas encore de variable compatible dans le fichier.

Pour la largeur maximale, utilisez les champs min et max que proposent les frames en auto layout. La page auto layout de Figma indique que vous pouvez saisir une valeur dans ces champs ou « use the dropdown to apply a number variable » (Explore auto layout properties). Associez une variable de largeur maximale à Fill container sur l'enfant, qui étire le calque pour occuper l'espace disponible dans son parent, et le contenu reste centré et borné.

Travaillez de l'extérieur vers l'intérieur. Liez d'abord le padding de la section, puis le gap à l'intérieur de chaque section, enfin les largeurs des cartes. Moins il y a de propriétés liées, moins il y a d'endroits où se tromper.

Étape 4 : régler le mode sur un frame

Une fois les variables liées, changer de mode change les nombres. Sélectionnez un frame, repérez la section Appearance dans la barre latérale droite, cliquez sur Apply variable mode et survolez la collection Layout pour choisir Tablet ou Mobile.

Deux règles de la documentation de Figma décident si cela fonctionne :

• L'option n'apparaît que si les calques imbriqués du frame utilisent au moins une variable ayant plus d'un mode. Si le menu manque, liez d'abord une variable.
• Les calques sont sur Auto par défaut, ce qui signifie qu'ils prennent le mode de leur conteneur parent. Si le parent est aussi sur Auto, le calque regarde plus haut dans la hiérarchie jusqu'à trouver un conteneur dont le mode est défini. Si aucun n'en a, le mode par défaut de la collection s'applique.

Vérifiez le résultat en sélectionnant la même carte dans les trois frames et en comparant son padding et son gap dans le panneau de droite. Les champs doivent afficher le nom de la variable et le nombre de la colonne correspondante. Si un champ n'affiche qu'un nombre brut, aucune variable n'y est liée, et vous reprenez l'étape 3 pour cette propriété.

Le schéma pratique consiste à construire trois frames de premier niveau, un par taille d'appareil, et à régler Desktop, Tablet et Mobile sur chacun. Tout ce qu'ils contiennent hérite. Vous modifiez un réglage par frame, pas un par calque, et vous pouvez comparer les trois tailles côte à côte.

Pièges à vérifier

• Les modifications sur le canevas détachent les variables. Figma précise que modifier le padding ou le gap d'un frame en auto layout avec les commandes du canevas détache toute variable numérique appliquée. Modifiez plutôt la valeur dans la vue Variables.
• Le positionnement absolu ne réagit pas. Un frame retombé en positionnement absolu n'a ni gap ni padding à piloter. Convertissez-le d'abord en auto layout, ou laissez-le fixe.
• Hug et Fill sont deux choses distinctes. Hug contents ne s'applique qu'aux frames en auto layout, et Fill container qu'aux enfants de frames en auto layout. Une variable ne répare pas un frame dont le redimensionnement est mauvais.
• Les variables ne sont pas des styles. La couleur et le texte sont une autre question. Pour cela, voyez comment extraire des styles de couleur d'une page importée.

Où cela mène

Quand les nombres vivent dans des variables, la page cesse d'être un instantané. Vous pouvez ajuster un breakpoint en modifiant une seule cellule, et chaque frame qui y est lié suit. C'est aussi la base du chantier plus vaste qui consiste à construire un design system à partir d'un site importé, où la même collection peut contenir espacements, rayons et largeurs pour chaque page que vous importez.

Conclusion

La méthode est courte. Une collection, un mode par taille d'appareil, des variables numériques pour les valeurs qui changent, des liens sur le gap, le padding et la largeur, et un mode réglé sur chaque frame de premier niveau. L'import fournit les calques et leurs nombres mesurés. Les variables de Figma fournissent la logique qui permet à ces nombres de changer selon la taille. Commencez par une seule section, faites-la basculer proprement entre les trois modes, puis répétez le schéma sur le reste de la page.