Figma Sites : le guide pour faire un site web

Figma Sites, ce qui change par rapport à un fichier design

Annoncée à la Figma Config du 9 mai 2025, la fonctionnalité permet de concevoir, prototyper et publier un site depuis Figma, sans code. Le fichier ne ressemble pas à un fichier de design classique.

• Les pages vivent sur le canvas. Chaque page a ses breakpoints (desktop, tablette, mobile, plus des breakpoints personnalisés) et ajouter une page ne t’envoie pas ailleurs.
• Un panneau d’insertion propose des sections et des pages complètes préremplies, un élément HTML pour du code personnalisé, une vidéo YouTube, une carte Google Maps.
• Le panneau de style s’enrichit d’un champ de lien, des positions CSS (relative, absolute, sticky, fixed) et d’une grille encore en beta.
• Les tags d’accessibilité déclarent la nature de chaque élément aux moteurs de recherche : section, nav, main, H1, paragraphe.
• Un onglet interaction remplace le prototypage : textes défilants, apparitions, transformations au scroll. Les animations sont préfaites et peu personnalisables, mais elles font le travail.

Les paramètres regroupent le SEO du site (meta title, meta description, code ISO de langue, favicon, image de partage), le code personnalisé pour les outils de suivi, des réglages page par page et la connexion du nom de domaine. Le CMS est annoncé mais pas encore disponible.

Préparer son fichier avant de designer

Un nouveau fichier se crée depuis Create, en choisissant Site plutôt que Design, puis un site vierge ou un template.

Le desktop est le breakpoint de référence, celui qui se répercute sur les autres : c’est là que tu designes et que tu nommes tes calques. Un clic droit sur un autre breakpoint le définit comme référence, si tu préfères le mobile first.

Structurer une section dans Figma Sites

Le même schéma se répète à chaque section.

1. Une frame section en auto layout. C’est le contenant, il prend toute la largeur.
2. Un conteneur en fill container. Sa largeur maximale de 1280 pixels garde le contenu centré sur les grands écrans.
3. Le contenu dedans. Le même padding latéral partout, 32 pixels, aligne tout le reste.

Les réglages de texte

Pour les textes, la hauteur de ligne se travaille en pourcentage. Un très grand titre a besoin d’une valeur descendue bien en dessous de 100 %, autour de 74 %, pour s’aligner sur le paragraphe voisin. Un label se met en majuscules avec l’option all caps, son icône se colle en SVG depuis une bibliothèque d’icônes.

Le fond en position absolute et les contraintes

Une image de fond ne se met pas dans le conteneur, sinon elle hérite de sa largeur maximale. Elle se place directement dans la section, en position absolute, étirée au maximum.

En absolute, tu perds le fill container mais tu gagnes les contraintes, et ce sont elles qui gèrent le responsive : left and right plus top and bottom pour que l’image suive l’étirement de la page dans les deux axes.

Deux limites à connaître :

• Pas d’unité de hauteur relative à la fenêtre. Une section pleine hauteur s’étire à l’œil.
• Une image posée sur le breakpoint de référence n’apparaît pas toujours sur les autres. Un clic droit puis reset all changes la remet en place.

La navigation fixe et le responsive

Avant la navigation, englobe le contenu dans une frame avec le tag d’accessibilité main. Dedans, le même conteneur que dans les sections, largeur maximale et padding identiques. Un double clic sur l’espace entre les éléments passe la distribution en auto, l’équivalent Figma du space between, qui écarte le logo des liens. Chaque lien est entouré d’une frame avec du padding, pour que la zone cliquable ne se limite pas aux lettres.

Le menu burger

Le menu burger se construit sur le breakpoint de référence, puis se gère à la visibilité : masqué en desktop et en tablette, affiché en mobile, où les liens disparaissent. Le padding latéral y descend à 16 pixels.

Deux points à surveiller :

• Ce que tu règles en tablette ne descend pas au mobile, contrairement à Webflow : chaque breakpoint se traite entièrement.
• Les tailles de titre ne sont pas relatives à la largeur. Il faut en fixer une par breakpoint et vérifier à 320 pixels, la largeur des plus petits téléphones, quitte à retirer le clip content pour éviter le rognage.

Conclusion

Figma Sites tient la promesse d’une maquette publiée en ligne, à condition d’accepter ses limites de version beta. La méthode reste celle du web : sections, conteneurs, contraintes, un breakpoint à la fois.