Finsweet : Attributes, Client first, Components

Finsweet est en train de devenir le kit d’outils incontournable pour pousser Webflow bien plus loin que ce que propose la plateforme en natif, sans transformer ton site en usine à gaz ni t’obliger à devenir développeur front.

Finsweet, concrètement, qu’est-ce que ça change pour un site Webflow ?

Finsweet, ce n’est pas “un” outil, mais un ensemble d’extensions pensées pour Webflow et pour le web moderne. L’objectif est simple : faire gagner du temps, rendre les projets plus propres côté code CSS et HTML, et offrir une meilleure expérience à l’utilisateur final.

En pratique, Finsweet repose surtout sur trois briques principales qui vont vivre dans ton projet Webflow :

• Finsweet Attributes
  
  
• Client-First
  
  
• Finsweet Components
  
  

Finsweet Attributes est une bibliothèque open source qui permet d’ajouter des fonctionnalités avancées à un site Webflow, comme le filtrage, le tri, la recherche ou des sliders CMS, en ajoutant de simples attributs HTML spécifiques (fs-...) sur les bons éléments dans le Designer. Tu profites d’extensions puissantes sans écrire de JavaScript compliqué. 

Client-First est un système de classes CSS et un guide de structure pour Webflow. Il définit une méthode claire pour nommer tes classes, organiser chaque section de chaque page, documenter tes styles et garder un projet lisible pour n’importe quel developpeur ou marketeur qui arrive dessus, même sans niveau avancé en code. 

Finsweet Components est une bibliothèque de composants JavaScript prêt à l’emploi, intégrée dans Webflow via une application officielle. Tu y trouves des sliders, des carrousels, des marquees, des feeds de réseaux sociaux et d’autres éléments interactifs, configurables visuellement et stylables avec le panneau de styles comme n’importe quel autre élément. 

Ces trois outils adressent trois besoins différents dans un projet Webflow : la structure (classes et pages), les fonctionnalités (attributes, scripts, logique) et la création rapide de composants réutilisables.

Dans quels cas Finsweet a un vrai impact sur un projet Webflow ?

Tu n’as pas besoin d’un énorme site pour que Finsweet soit utile. Dès que ton projet dépasse le simple “one page”, l’utilisation d’un système comme Client-First et d’extensions comme Attributes peut faire la différence sur la durée.

Finsweet est particulièrement intéressant dès que tu as :

• Une collection CMS importante, avec une liste d’articles, de ressources, de produits ou d’offres à filtrer et trier.
  
  
• Plusieurs pages avec des sections réutilisées, des éléments répétés, des styles personnalisés que tu veux garder cohérents.
  
  
• Une équipe qui collabore sur le même projet Webflow, ou la perspective de changer d’agence ou de développeur.
  
  
• Un besoin d’interfaces un peu avancées pour l’utilisateur, par exemple des formulaires plus intelligents ou des listes filtrables côté front sans rechargement de page.
  
  

Plus ton site grandit, plus un système de classes clair, des components bien structurés et des attributes bien configurés t’évitent de perdre du temps à “chercher la bonne class” ou à corriger des bugs de styles sur une section que tu as copiée dix fois.

Finsweet Attributes : des fonctionnalités avancées sans écrire de JavaScript

Ce que Finsweet Attributes apporte sur une page Webflow

Finsweet Attributes est pensé comme une extension no-code de Webflow. Tu ajoutes quelques attributs HTML spécifiques sur les bons éléments, et tu débloques des comportements que Webflow ne propose pas en natif ou seulement en partie. 

Quelques exemples typiques dans un projet :

• Filtrer une liste ou une collection d’articles de blog par catégorie, type de contenu, color, tag ou autre champ CMS.
  
  
• Ajouter un bouton “charger plus” pour afficher progressivement les éléments d’une collection, plutôt que tout afficher en une seule fois.
  
  
• Créer un slider alimenté par une collection CMS, avec des éléments dynamiques, sans écrire une ligne de code.
  
  
• Gérer des formulaires plus avancés pour l’utilisateur, par exemple avec des champs conditionnels, des messages d’erreur plus clairs ou un affichage amélioré après soumission.
  
  

Tu restes dans le Designer Webflow, tu manipules des div, des classes, des sections et des listes comme d’habitude, mais tu ajoutes une couche de logique via des attributes.

Comment fonctionne Attributes dans Webflow côté HTML, classes et script

Le fonctionnement reste assez simple pour un développeur Webflow ou un intégrateur qui a les bases du HTML et du CSS.

L’idée générale est la suivante :

1. Tu ajoutes le script Finsweet Attributes à ton projet Webflow, via le custom code du site ou de la page, comme n’importe quelle bibliothèque externe.
   
   
2. Tu identifies les éléments qui doivent réagir : une collection list, un bouton, un champ de form ou un wrapper d’élément.
   
   
3. Tu ajoutes sur ces éléments des attributes spécifiques, par exemple fs-cmsfilter-element="list" ou fs-formsubmit-element="success-message" selon la solution choisie.
   
   

Le script lit ensuite ces attributes dans le HTML publié et applique le bon comportement côté JavaScript. Pour toi, le processus se résume donc à : choix de la solution, ajout des attributes, test sur la page publiée.

L’intérêt est que tu gardes le contrôle sur tes classes, le système de styles CSS et la structure des div. Tu peux même combiner l’utilisation d’Attributes avec Client-First pour que ton code reste propre, organisé et documenté.

Exemples d’utilisation d’Attributes dans un projet client

Imagine un site de ressources ou de formation en ligne dans Webflow. Tu as une collection de contenus avec des catégories, des niveaux et des formats (article, vidéo, checklist). Tu crées une list CMS sur ta page, configurée selon Client-First, puis tu ajoutes des attributes de filtre sur les boutons et sur la liste. Résultat : l’utilisateur clique, le contenu s’actualise, sans rechargement de page.

Autre exemple : une page d’offres ou de cas clients. Tu veux afficher les projets par secteur, taille d’entreprise ou type de service. Tu relies une collection à une liste, tu ajoutes les bons attributes de tri et de filtre, tu gardes ton design, tes styles personnalisés, ta color palette, et tu ajoutes un vrai niveau de personnalisation dans l’expérience utilisateur.

Tu peux aussi jouer sur les formulaires. Par exemple, un formulaire de demande de devis qui affiche des champs différents selon le type de projet, ou qui gère une confirmation plus claire. L’accessibilité est meilleure, le formulaire est plus adapté à chaque utilisateur et tu peux connecter tout ça à tes outils de CRM.

Client-First : un système de classes pour garder le contrôle sur chaque page

Pourquoi un système de classes change tout dans Webflow

Webflow permet déjà de créer des classes et des styles CSS très poussés. Le problème, c’est qu’un projet peut vite devenir illisible dès que plusieurs personnes interviennent, ou que le site se développe sur vingt, trente, cinquante pages.

Client-First, développé par Finsweet, répond à ce problème en proposant un système de nommage et d’organisation de classes pensé pour la durée de vie du projet. L’objectif est de rendre le code compréhensible pour un utilisateur non technique, tout en donnant un cadre clair aux développeurs Webflow.

Avec Client-First, tu ne te demandes plus “comment je vais appeler cette class”. Tu appliques une logique claire, basée sur la structure de la section, le rôle de l’élément et l’objectif du style. Tu peux rechercher facilement une class dans le panneau Styles, tu comprends immédiatement ce qu’elle fait, même si tu n’es pas la personne qui l’a créée.

Le rôle des rem et de la taille dans le système Client-First

Client-First encourage l’utilisation de rem pour gérer la taille des textes et parfois la taille d’autres éléments. Ce choix n’est pas un détail technique. Il permet de lier la cohérence visuelle à un système simple : changer la taille de base dans le CSS influence tous les éléments qui utilisent cette unité.

Concrètement, tu gardes une grille de styles personnalisée mais cohérente. Tu peux définir une hiérarchie de titres, de paragraphes, de boutons, avec des tailles en rem adaptées à la moyenne de ton audience, tout en laissant une marge de manœuvre pour des styles plus personnalisés sur quelques éléments spécifiques.

Pour une PME ou une TPE, cela se traduit par des changements plus rapides. Quand tu ajustes la taille des textes dans ton projet, tu ne dois pas passer en revue chaque page. Tu modifies la class de base et l’ensemble de ton système suit.

Intégrer Client-First dans un projet Webflow existant

Tu peux adopter Client-First sur un projet déjà en production. Il est inutile de tout renommer en une fois.

Tu peux commencer par une seule page, souvent la page de style ou une page clé comme “Accueil” ou “Ressources”. Tu structures les sections avec les classes Client-First, tu ajustes les styles CSS, tu alignes les listes, les formulaires, les principaux éléments interactifs.

Progressivement, tu crées une documentation interne de ton projet. Une page “style guide” centralise les classes importantes, la palette de color, les composants utilisés partout. Tu sais quelles classes de layout appliquer à une nouvelle section, quelles classes de texte utiliser pour garder un design homogène.

Finsweet Components : des éléments interactifs prêts à l’emploi

Ce que Finsweet Components ajoute à Webflow

Finsweet Components est une application officielle disponible dans l’écosystème Webflow. Elle permet de construire des composants JavaScript complexes, directement dans l’interface visuelle, sans que tu aies à gérer le code ou les scripts en détail.

La library de Components propose des sliders, des carrousels, des marquees, des feeds Instagram ou YouTube, des sections dynamiques alimentées par des collections CMS. Tu choisis un component dans la bibliothèque, tu le génères, puis tu le styles avec le panneau Styles de Webflow comme n’importe quelle div.

L’intégration est pensée pour rester “native” : tu gardes tes classes, ton style system, tes couleurs, ton design personnalisé. Les scripts et la logique JavaScript restent gérés par Finsweet.

Comment intégrer Components dans ton processus de création

Dans un projet Webflow structuré avec Client-First, Finsweet Components devient une couche de productivité en plus. Tu commences par définir la structure de la page, les sections, les classes, le système de styles CSS. Ensuite, tu ajoutes des Components là où il faut de l’interaction avancée.

Tu peux combiner les Components avec Finsweet Attributes pour aller encore plus loin. Par exemple, une collection list filtrable qui est elle-même affichée dans un slider composant. Ou un component interactif que tu enrichis avec des attributes pour la recherche, le tri ou la personnalisation.

L’important est de garder le contrôle sur le système global. Le component ne doit pas être une “boîte noire”. Tu dois comprendre son objectif, les classes principales, les éléments clés, pour pouvoir l’adapter aux besoins de ton projet.

Quand ça se complique avec Finsweet : ce qu’il faut garder en tête

Finsweet ne résout pas tout. Si la base de ton projet Webflow est bancale, Finsweet peut même rendre les choses plus floues.

Les difficultés arrivent souvent quand :

• Tu mélanges plusieurs logiques de classes. Par exemple une partie du site en Client-First, une autre avec des classes improvisées, et encore une autre avec les classes d’un template. Le système CSS devient confus, la documentation interne ne suit plus.
  
  
• Tu ajoutes des attributes Finsweet un peu partout sans scénario clair. Au bout d’un moment, tu ne sais plus pourquoi telle list a tel attribute, ni ce qui se passe si tu dupliques la section sur une autre page.
  
  
• Tu empiles des Components avec des scripts externes, des code embeds personnalisés et des animations complexes sans vérifier l’impact sur la performance et l’accessibilité.
  
  

Une autre zone sensible concerne l’accessibilité. Finsweet propose aussi des ressources orientées “accessible components” qui rappellent que le but est de rendre le web utilisable par tous, avec de bonnes pratiques sur les forms, les modales et les interactions clavier.

Même avec des Components et des Attributes, il faut garder cette dimension à l’esprit. Un slider qui bouge trop vite, un formulaire compliqué, une color de texte peu lisible, et tu perds une partie de ton audience.

La clé reste toujours la même : partir de l’objectif business et de l’utilisateur. Qu’est-ce que la personne doit faire sur cette page ? Quel est le parcours le plus simple pour elle ? Les outils Finsweet sont là pour servir ce parcours, pas pour “rajouter des effets” juste parce que c’est possible.

Finsweet et vos projets Webflow : comment passer de l’outil à la stratégie

Finsweet, avec Attributes, Client-First et Components, n’est pas seulement une série d’extensions techniques pour Webflow. C’est un système complet qui touche à la structure des pages, au code CSS, à la manière dont tu crées tes listes et tes collections, et à la qualité de l’expérience utilisateur.

Utilisé avec méthode, Finsweet permet de :

• Gagner du temps sur la création des pages et des éléments interactifs.
  
  
• Garder un projet lisible dans la durée, même si plusieurs développeurs Webflow interviennent.
  
  
• Documenter ton projet et accélérer la formation des personnes qui rejoignent l’équipe.
  
  

Mais comme toujours sur le web, la différence se joue sur la manière dont tu conçois le système. Finsweet ne remplace pas une stratégie digitale, un positionnement, un bon contenu, une réflexion sur la structure des pages et sur les objectifs de chaque section.

Si tu veux aller plus loin et mettre en place Finsweet de manière sérieuse dans ton projet Webflow, c’est typiquement le genre de sujet sur lequel l’agence Scroll peut t’accompagner. On peut auditer ton projet existant, clarifier le système de classes, structurer les collections, définir les bons Components et Attributes à utiliser, puis construire un site qui reste performant et évolutif, sans te perdre dans la technique.