# Version 2.1 de Client-First. What's new ? Documentation3 minPublié le Jan 10, 2024Dernière mise à jour le ![Client-First version 2.1](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67110384256144b62d7bb601_659e335edd291ac2e602042d_og-cf-2-1.jpeg)Sommaire [ Copied](#)[ ](#)[ ](#)[ ](#) - [H2 Example](#) Résumez cet article avec une IA[ ChatGPT](#)[ Claude](#)[ Grok](#)[ Perplexity](#)[ Google AI](#)Points clés de l'articleHier soir, les équipes de Finsweet ont annoncé la sortie d'une **nouvelle version du framework de développement **[**Webflow**](https://try.webflow.com/webflow)** Client-First**: la version 2.1. Ambassadeur historique de cette méthodologie de développement, nous vous partageons dans cet article les **nouveautés**, notre **avis** et nos **suppositions pour la suite de Client-First**. ## 1. Nouvelles guidelines & ressources ![Update Client-First du 9 Janvier 2023](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67110385256144b62d7bb612_659e34b97e872a74bbae4775_update-client-first.webp) Pour commencer, à première vue, nous sommes enthousiastes quant aux nouvelles annoncées : le **système intègre bien les dernières fonctionnalités de Webflow**, afin de minimiser l'utilisation de combo classes et de CSS personnalisés. Et des nouvelles guidelines visent à réduire la (sur)utilisation des divs dans le Navigator, sujet parfois critiqué sur le système. ### 1.1 Intégration des variables ![Tableau de variable Webflow avec Client-First](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67110385256144b62d7bb60e_659e34d82b31b7d74cdf5a3d_variable-client-first.webp) Les variables sont au cœur de la nouvelle version Client-First. Elles viennent complémenter de nombreuses classes CSS telles que les .text-color, ou bien .background-color. ### 1.2 Réduction de l'utilisation des Divs et MaJ de classes CSS - Ajout du padding-section directement en combo classe du padding globale - Recommandation de l'utilisation des Grid et Flex Size pour créer des gaps (vs Spacer) - Suppression du custom code Pointer-Event (remplacer par le CSS Webflow) - Ajout de classes Aspect Ratio ### 1.3 Nouveau Cloneable sur le Made in Webflow ![Nouveau Cloneable Client-First Made in Webflow (version 2.1)](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67110385256144b62d7bb618_659e35031269f42141b49820_client-first-v2-1-cloneable.webp) L'ensemble de ces nouveautés à été intégré dans le cloneable Client-First disponible gratuitement depuis la [page Made in Webflow ↗](https://webflow.partnerlinks.io/client-first-cloneable) ### 1.4 MaJ des visuels avec la nouvelle interface Webflow Travail remarquable à noter, les équipes de [Finsweet](https://finsweet.com/) ont mises à jour l'ensemble des visuels de leurs contenus avec la nouvelle interface (UI) de Webflow. Mais ce n'est pas tout... car les équipes de Finsweet en ont profité pour faire peau neuve sur Client-First avec un nouveau branding et un nouveau logo ! ## 2. Rebranding de Client-First ! ![Nouveau Logo Client-First (Finsweet)](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67110385256144b62d7bb60b_659e34911f2eedca560c235f_logo-client-first.svg)![Nouveau Website Client-First ](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67110385256144b62d7bb615_659e346cff755cf625ada113_cf-new-ui.webp) Certainement pour s'aligner avec le repositionnement de Webflow du 5 octobre 2023, Client-First fait peau neuve ! - Nouveau site - Nouvelle DA - Nouveau logo ! Et sans oublier de mettre à jour l'ensemble de leurs visuels au passage. Bravo ! (À nous de jouer et faire aussi bien avec l'update de quelques ressources... 😅) ## Notre avis sur Client-First 2.1 Nous sommes heureux de voir le framework s'adapter rapidement[ aux évolutions de Webflow.](https://www.youtube.com/watch?v=3MyXgZsAWjc) Aussi bien d'un point de vue UI - en mettant à jour son univers après le rebranding de Webflow - que d'un point de vue technique - en tirant profit des nouvelles fonctionnalités de l'outil pour faire évoluer son système. Cette nouvelle version souligne les efforts des équipes de Finsweet sur l'amélioration continue de Client-First, pour une approche de développement toujours plus propre et plus facile à maintenir. Mais, peut-être, de plus en plus tech' ? Notamment avec le besoin, nouveau, d'expliquer aux clients le [fonctionnement des variables.](/fr/blog/guide-variables-webflow) ### Et... What's next Client-First V3? ![Tweet de Sergey anticipant une V3 de Client-First](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67110385256144b62d7bb61f_659e33d4dbcbcf86d1486f5d_what%2527s%2520next.webp) 2.1 ? Seulement ? D'après[ le dernier tweet de Sergey](https://x.com/stanchev14/status/1744778909709672690?s=12&t=4RzXMz9nCWwhx6olBHGZgw), cet update n'est qu'une infime partie des nouveautés attendu sur Client-First prochainement. L'ensemble du système devrait encore évoluer, une fois l'arrivée des différents breakpoints sur les variables Webflow. Puis, une fois la sortie des "variables responsives", je pense, que l'on peut déjà s'attendre à une refonte des systèmes d'espacements ? 😉 Suivez l'ensemble des mises à jour de Client-First directement depuis le [Changelog Client-First ↗](https://finsweet.com/client-first/docs/changelog) ## Ressources complémentaires : - [Vidéo d'annonce de Finsweet sur YouTube ↗](https://www.youtube.com/watch?v=5e01JxwrRCs) - [Documentation Client-First ↗](https://finsweet.com/client-first) - [Documentation Client-First (Traduction française by Digidop) ↗](https://finsweet.com/client-first/fr/intro) - [Découvrir une démo de comment utiliser Client-First avec Webflow ↗](https://www.youtube.com/watch?v=5t9biIaLsaA) [ ](#)![Florian Bodelot](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/678a725470105160732b0a8a_florian-website-vf.webp)Florian BodelotCo-fondateur[ ](/fr/team/florian-bodelot)[ ](https://fr.linkedin.com/in/florian-bodelot-digidop)[ ](https://twitter.com/florian_bodelot)+1200 lecteurs ## Restez informé(e) Abonnez-vous à notre newsletter pour des conseils et actus exclusives. [S'inscrire ](https://digidopfr.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Prévisualiser la Newsletter ](https://digidopfr.substack.com/) ## Articles qui devraient vous intéresser ![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab92cc629d6018592f49d92_Best%20B2B%20SaaS%20Agencies%20in%202026_FR.webp)DocumentationTout voir ### Top 20 meilleures agences web et digitales pour SaaS B2B en 2026 [Top 20 meilleures agences web et digitales pour SaaS B2B en 2026](/fr/blog/top-agences-b2b-saas)Top 20 meilleures agences web et digitales pour SaaS B2B en 2026![Interface Webflow Source montrant les agents IA, l’édition de site et les Views par métier dans un espace de travail unifié.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDéveloppementTout voir ### Webflow lance Source. Notre avis sur ce shift. [Webflow lance Source. Notre avis sur ce shift.](/fr/blog/webflow-lance-source)Webflow lance Source. Notre avis sur ce shift.![Taux de citation par plateforme IA : ChatGPT 100 %, Perplexity 100 %, Gemini 67 % et Claude 0 %.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationIATout voir ### Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA [Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA](/fr/blog/comment-rendre-son-site-visible-chatgpt-perplexity-et-moteurs-ia)Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA[Voir tous les articles ](/fr/blog)Les meilleurs projets web commencent par une conversation[Discuter avec un expert ](/fr/contact)[Réserver un appel ](/fr/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)