Mettez vos designs en ligne avec Figma Sites
Aujourd'hui, nous lançons Figma Sites, un outil tout-en-un qui vous permet de créer et de mettre en ligne des sites web responsive et personnalisés. Dans cet article, nous vous expliquons comment passer du design à la mise en ligne avec autant d'expressivité et d'efficacité que possible.
Depuis des années, notre communauté souhaite pouvoir transformer facilement un design en site web fonctionnel. Nous avons donc créé un outil qui allie la simplicité d'utilisation à de puissantes fonctionnalités. C'est pourquoi nous lançons Figma Sites, un outil qui vous permet de concevoir, de créer et de mettre en ligne des sites web, le tout au sein du workflow Figma. Avec des mises en page responsive, des outils de prototypage intuitifs et des fonctionnalités intégrées telles que des curseurs personnalisés, des effets de défilement continu et de parallaxe, vous pourrez donner vie à vos idées les plus ambitieuses.
Créer et mettre en ligne avec Figma
Le processus classique pour passer du design à la mise en ligne requiert un changement de contexte et des tâches manuelles : créer les designs dans Figma, réaliser des prototypes pour les parcours et les interactions, créer les points de rupture à la main, exporter les designs, puis collaborer avec les développeurs pour passer du design au code, et enfin tester et publier. Figma Sites vous permet de créer vos designs et de les mettre en ligne. Auparavant linéaire, le workflow évolue pour devenir plus itératif et plus fluide. Que vous souhaitiez créer un portfolio, le site d'un événement ou la landing page d'un produit, Figma Sites vous permet de créer et de mettre en ligne des sites web, sans outils supplémentaires, le tout au même endroit.
Trouvez un point de départ
Nous voulions que Figma Sites soit accessible à toutes les équipes, même celles qui disposent de ressources de design et de développement limitées. Pour cela, nous avons inclus des modèles, des éléments web responsive prêts à l'emploi et des interactions prédéfinies pour vous aider à vous lancer. Bientôt, vous pourrez utiliser notre nouvelle fonctionnalité chat-to-code dans Figma Make. Il vous suffira de décrire l'interaction ou l'animation souhaitée pour en générer le code.
Connectez votre design system
Accédez à votre bibliothèque de design et à vos ressources pour accélérer le processus. Vous pouvez ajouter des composants et des styles issus de vos design systems en reliant directement les bibliothèques publiées à votre site via le panneau d'insertion. Vous n'avez pas de design system ? Nous vous fournissons les blocs de base, comme les menus, les hero sections, et même des pages complètes.
Créez en responsive
Pour vous passiez moins de temps à ajuster les proportions et vous concentrer davantage sur l'expressivité de vos créations, nous avons intégré les interactions et le responsive directement dans Figma Sites.
Créez pour tous les supports
Figma Sites adapte automatiquement la mise en page, le texte et les designs selon différents points de rupture. Avec la modification multiple, vous pouvez apporter des modifications rapidement sur tous les formats d'écran à la fois ; lorsque vous créez des styles de texte, vous pouvez définir une taille et un espacement différents pour chaque point de rupture, sans variables. Vos designs s'adapteront parfaitement à tous les appareils. Vous pourrez toujours ajuster à la main les détails que vous souhaitez peaufiner.
Prototypez et affinez rapidement vos designs
Créez un prototype et partagez un site web interactif et en ligne avec vos collaborateurs pour recueillir leurs commentaires. La prévisualisation d'un site ouvre un aperçu web rendu en HTML et CSS, ce qui vous permet de voir un site responsive avant sa publication. C'est comme dans un prototype Figma, mais avec des interactions spécifiques aux sites web. Vous pouvez même redimensionner la fenêtre pour voir comment la mise en page se réagence, et modifier les points de rupture.
Nos interactions prédéfinies vous aident à rendre vos sites plus dynamiques :
- Parallaxe de la souris : déplace les objets en fonction du mouvement du curseur
- Lightbox : met en évidence une image avec un fond plus sombre
- Rotation : fait pivoter un objet à l'infini
- Élément déplaçable : permet de déplacer des éléments librement sur la page
- Machine à écrire : donne l'impression d'un texte dactylographié
- Texte brouillé : mélange et révèle le texte
Donnez vie à vos idées
Le web offre des possibilités de personnalisation sans limites, et nous avons développé Figma Sites pour permettre aux designers de tirer parti de ce potentiel et créer des expériences riches, interactives et capables de répondre aux besoins actuels.
Créez une expérience entièrement personnalisée
Aujourd'hui, nous lançons plusieurs nouvelles interactions uniques dans Figma Sites qui n'existent pas encore dans Figma Design. Nos préférées ? Le Défilement parallaxe (Scroll parallax), la Transformation au défilement (Scroll transform) et la possibilité de créer des états de survol et de clic sans composants interactifs.
Nous ajouterons bientôt des calques de code pour vous aider à transformer vos designs en expériences interactives, sans plugins ni changement d'outils. De plus, le tchat IA vous permettra d'ajouter des éléments interactifs tels que des listes déplaçables et des horloges géographiquement précises en créant une seule frame, puis en décrivant comment cette frame doit devenir interactive. Vous pourrez également transformer des calques de code en composants et instances réutilisables et partageables, comme avec les bibliothèques de design system dans Figma Design.
Découvrez Figma Sites en action
Pour découvrir toute l'ampleur des capacités de l'outil, explorez deux nouveaux sites qui présentent une sélection d'éléments interactifs et de détails surprenants. Nous avons hâte de vous voir comment vous allez les exploiter.
Config.new : un équilibre entre fonctionnalité et interactivité
Chaque année, nous partageons un récapitulatif des nouveautés présentées lors de Config. Cette fois-ci, inspirés par le lancement de Figma Sites, nous avons décidé de créer une expérience plus interactive et axée sur le storytelling. L'équipe du Brand Studio a commencé à travailler sur le projet en recueillant des inspirations et des esquisses préliminaires, tout en réfléchissant au contenu, au ton et à la mise en page. Après un brainstorming, elle a commencé à intégrer directement des composants de design dans Figma Sites pour itérer rapidement.
Bien que l'équipe ait repris les styles de typographie et de boutons issus du site de Config 2025, elle a décidé de ne pas utiliser le système web de Figma afin de rendre la page plus expressive, ce qui n'était pas possible sur figma.com. Au lieu d'utiliser les composants web de Figma, elle a conçu une section sur mesure pour chaque fonctionnalité, créé des boutons et des interactions personnalisés, et intégré des interactions prédéfinies pour vous montrer tout ce que vous pouvez faire sans code.
Éléments interactifs
Le site repose entièrement sur des interactions prédéfinies. Les interactions Révéler (Reveal), Défilement parallaxe (Scroll parallax) et Transformation au défilement (Scroll transform) donnent à la page un aspect plus travaillé à mesure que l'utilisateur se déplace vers le bas. L'interaction Défilement continu (Marquee) apporte un mouvement horizontal à une section qui présente des prompts pour Figma Make.
Animation
Grâce à un bloc d'intégration, l'équipe a ajouté un asset personnalisé Rive issu de la bibliothèque d'animations de Config qui se déclenche au survol. Le texte du bouton s'anime également au survol, apportant un certain dynamisme au call-to-action, et fait le lien avec la charte graphique de Config sur le web.
Curseur personnalisé
Le curseur se transforme en un ensemble de glyphes Config lorsque l'utilisateur survole une citation. En activant le curseur personnalisé sur une partie de la page seulement, l'équipe attire l'attention sur cette zone.
Ces détails ont abouti à la publication d'un site responsive qui utilise des animations, des micro-interactions et exploite toute la fenêtre de visualisation, quelle que soit sa taille, pour accompagner les propositions de valeur des fonctionnalités, sans toutefois les éclipser.
Spécimen de caractères : encore plus d'expressivité
En collaboration avec l'agence créative Other Means, nous avons conçu Practice, un livre sur le savoir-faire et le design que les participants à Config ont reçu dans leur lot de cadeaux. Pour la publication, l'équipe Other Means a collaboré avec Kia Tasbihgou sur le design de lettrines pour chaque article. Pour présenter l'ensemble des caractères, Other Means a conçu un site de spécimens ludique et expressif où vous pouvez découvrir tous les caractères et télécharger la police Open Type Font (OTF). L'équipe a d'abord importé les lettres de A à Z dans un fichier Figma Design, puis a cherché à raconter une histoire avec chaque lettrine. Elle a décidé de mettre en valeur chaque lettre dessinée à la main d'une façon surprenante, à même d'exploiter la puissance de Figma Sites en termes d'interactivité.
Effets de défilement
L'équipe voulait que la majeure partie du site interagisse au défilement, elle a donc créé un motif de fond différent pour chaque section qui se révèle lorsque les calques spécifiés sont visibles, et des titres qui apparaissent progressivement, à mesure que l'utilisateur fait défiler la page vers le bas.
Interactions prédéfinies
Les états de survol intégrés, la parallaxe et les variantes ont permis à l'équipe de créer un clavier personnalisé unique qui affiche des glyphes au survol. Grâce aux éléments déplaçables, les utilisateurs peuvent attraper et déplacer des galets placés au-dessus d'un bloc de texte.
Composants interactifs
Avec des composants interactifs, l'équipe a construit un carrousel de noms de célébrités qui met en valeur chaque lettrine, ainsi qu'un parchemin qui se déroule au fur et à mesure que l'utilisateur fait défiler la page vers le bas.
Ces effets ont métamorphosé la forme des lettres, transformant un spécimen typographique statique en une expérience dynamique et interactive, grâce à Figma Sites.
Nous avons développé Figma dans le navigateur, car nous attachons une grande importance à la collaboration, à la transparence et à l'accessibilité que seuls les outils web peuvent offrir. Que vous souhaitiez créer un portfolio, réaliser rapidement un prototype pour obtenir des retours ou repousser les limites de l'expressivité, Figma Sites peut simplifier la manière dont vous créez, développez et mettez en ligne vos sites, d'un bout à l'autre du processus. Nous avons hâte de découvrir vos créations.
Nous avons mis en place un serveur Discord pour recueillir les retours de la communauté sur Figma Sites. Participez à la conversation ici.
