Découvrir Figma Sites
Figma Sites a été lancé en version bêta ouverte à l'occasion de Config 2025. Il est actuellement disponible sur tous les forfaits payants, avec une expérience limitée du forfait de base qui sera bientôt disponible. En savoir plus sur ce qui est inclus dans la version bêta.
Qu'est-ce que Figma Sites ?
Figma Sites vous permet de créer des designs, des prototypes et de publier des sites Web de haute qualité, le tout au même endroit.
- Créez de magnifiques mises en page réactives pour toutes les tailles d'écran
- Utilisez les outils de design que vous maîtrisez dans Figma Design, tels que les frames, la mise en page automatique, les formes, les composants réactifs et bien plus encore
- Copiez et collez facilement entre Figma Design et Figma Sites
- Donnez vie à votre site avec des interactions et des animations faciles à utiliser telles que des zones d'affichage de texte défilant, des curseurs personnalisés et des effets de survol
- Partagez des sites Web en direct avec des collaborateurs pour explorer vos idées, tester la convivialité et faire avancer votre projet
Astuce: Ajoutez https://figma.com/site/new à vos favoris pour toujours avoir un nouveau fichier Figma Sites à portée de main à chaque fois que l'inspiration frappe !
Familiarisation
Barre de navigation à gauche et barre latérale
La barre de navigation de gauche vous permet de passer rapidement d'une tâche à l'autre dans Figma Sites :
- Fichier : cette vue est celle où a lieu la création. Vous pouvez voir une liste complète des pages Web et des calques dans votre fichier, et publier votre site lorsque vous êtes prêt.
- Insérer: ajoutez des éléments prédéfinis comme des barres de navigation, des pieds de page, des modèles de pages Web et des éléments intégrés, et accédez à vos bibliothèques de designs.
- Recherche : localisez rapidement des éléments dans vos designs.
- Make: utilisez des calques de code pour concrétiser vos idées et vos designs. (Bientôt disponible !)
- CMS : créez et gérez le contenu de votre site. (Bientôt disponible !)
- Paramètres : mettez à jour les paramètres de votre site Web pour aider les moteurs de recherche à comprendre votre contenu, améliorer l'accessibilité et faciliter la recherche des utilisateurs.
Barre d'outils
La barre d'outils contient tous les outils dont vous avez besoin pour créer votre site :
- Ajoutez des objets tels que des pages Web, des cadres, des images, du texte et des formes
- Accédez aux outils Figma AI dans le menu Actions.
Astuce : si vous avez passé du temps à réaliser des designs dans Figma Design, Figma Sites vous paraîtra très familier. Consultez cette liste d'outils de design disponibles dans Figma Sites.
Barre latérale droite
Depuis la barre latérale sur la droite, vous pouvez contrôler l'apparence des éléments de design sur le plan de travail ou les pages web.
Lorsque vous sélectionnez un objet sur le plan de travail, ses propriétés sont affichées dans l'onglet Design.
Vos autorisations sur le fichier, en édition ou en lecture seule, déterminent ce que vous pouvez voir et faire dans la barre latérale de droite.
Ajoutez des animations, des transitions et des effets visuels pour donner vie à votre site.
Qu'il s'agisse d'une animation discrète lors du survol des boutons, d'ajouter de la profondeur et du mouvement grâce à la parallaxe, ou d'effets captivants déclenchés par les actions de l'utilisateur, les interactions peuvent vous permettre de créer des pages Web plus réactives et dynamiques.
Créer un site Web
Commencer à partir d'un design existant
Il existe plusieurs manières de gagner du temps avec Figma Sites si vous ne souhaitez pas commencer de zéro :
Commencer avec un template
Chaque nouveau fichier s'ouvre avec le sélecteur de template.
Ces templates, et bien d’autres, sont également disponibles dans Modèles et outils dans le navigateur de fichiers.
Copier-coller à partir de Figma Design
Récupérez vos designs et copiez-collez-les directement dans une page Web, ou accédez-y via vos bibliothèques de design existantes.
Découvrez comment copier-coller entre Figma Design et Figma Sites.
Assembler un site en utilisant des blocs
Faites glisser et déposez des blocs prédéfinis, comme des pages d'accueil, des en-têtes, des pieds de page et des sections personnalisables, pour assembler un site en un rien de temps.
Concevoir de façon réactive
Figma Sites vous offre un contrôle considérable lors de la création de mises en page pour différentes tailles d'écran, au pixel près.
Ajouter des pages Web
Lorsque vous créez un nouveau site, vous verrez un conteneur gris. Il s'agit d'une page web. Chaque page web possède un nom, un bouton de prévisualisation et une option pour ajouter de nouveaux points d'arrêt.
Cliquez sur l’icône Page Web dans la barre d’outils pour ajouter une nouvelle page Web.
Ajouter des points de rupture
Les points de rupture définissent des largeurs d'écran spécifiques où la mise en page de votre site Web change pour répondre aux besoins des différentes tailles d'écran.
L'ajout de points de rupture supplémentaires vous permet d'affiner l'apparence et l'ergonomie de la page Web et d'optimiser l'expérience utilisateur sur tous les appareils.
Modifier avec plusieurs points de rupture
Si votre page Web contient plus d'un point de rupture, vous pouvez ajouter, sélectionner et modifier des objets sur tous les points de rupture simultanément.
En savoir plus sur la modification de plusieurs points de rupture dans une page Web.
Prévisualiser votre travail
Lorsque vous êtes prêt, prévisualisez votre site pour le voir tel que vos utilisateurs le verront. C’est un excellent moyen de vérifier rapidement les animations, les interactions et la réactivité, avant de publier le site. Il suffit d'appuyer sur l'icône Aperçu sur n'importe quelle page Web, ou d'utiliser sur le raccourci clavier Shift Espace pour ouvrir l'aperçu en ligne.
Partagez-le avec le public
La publication de votre site est l'étape finale avant de le livrer à votre audience.
Après la publication, vous pouvez modifier votre site, ajouter ou supprimer des pages Web ou connecter votre propre domaine personnalisé.