Les 9 plus grosses annonces de Webflow
Et quelques autres news canons
Hello,
Comment vas-tu ?
Je récupère du No Code Summit ce matin qui fut un évènement très chargé pour moi. L’évènement fût très dense et riche en rencontres !
Avant de démarrer cette newsletter, je voulais remercier Benoît de Montecler, le CEO de ncScale qui m’a invité et qui a activement oeuvré à la mise en place de ce type d’évènement au sein du SFPN. Un grand bravo également à tous les organisateurs·trices qui ont travaillé d’arrache pied pour qu’il ait lieu !
Rendez-vous l’année prochaine en octobre à Station F pour de nouvelles rencontres avec l’écosystème !
Si ce n’est pas déjà fait, tu peux aussi :
💪 Suivre la formation Product Builder d’Uncode School pour gagner en compétences sur les outils no code
✅ Sponsoriser cette newsletter pour acquérir de la visibilité auprès d’un public ciblé
👋 Rejoindre la communauté sur Discord No Code d’Uncode School (+400 passionnés)
☎️ Booker 30min de conseil/coaching avec moi quand tu veux (pour savoir quels outils no code tu peux utiliser pour ton projet, besoin d’une prestation no code, coaching ou progresser).
⭐️ Me suivre sur Linkedin, Instagram, Twitter ou Youtube.
👉 Lire toutes les éditions précédentes.
On démarre 👇
Au programme
Les annonces les plus marquantes de la Keynote Webflow
Les mises à jour WeWeb sont vraiment… canons !
Zapier ajoute le volet documentation (pour ses automatisations)
n8n ajoute un module IA (et ça déchire)
Rejoins la 1ère formation Product Builder d’Uncode School !
C’est parti ! La formation a démarré !
Pour l’heure, j’ai des super retours de celles et ceux qui ont démarré la formation !
Pour rappel, la formation a pour objectif :
de te rendre autonome sur des projets no code en te donner des bases et une culture tech solide,
de te donner de bonnes notions de Product,
d’avoir bien entendu un panorama et une pratique concrète des meilleurs outils no code modulaires du marché (Airtable, Make, Webflow, Notion…)
Et bien sûr des projets issus de prestations afin que tu puisses commencer à te constituer un portfolio !
Si tu veux en savoir plus, tu peux te rendre sur le site d’Uncode School.
J’ai hâte de t’avoir en formation et qu’on construise cette belle communauté de Product Builders ! 😍
P.S. : si tu as la moindre question, tu peux répondre à ce mail ou bien m’écrire sur LinkedIn.
Les annonces les plus marquantes de la Keynote Webflow
C’est un des évènements que j’attends le plus chaque année : la Keynote Webflow dans laquelle ils nous dévoilent les dernières nouveautés de la plateforme.
Voici les points à retenir :
Nouveau branding et changement d’interface.
C’es’est pas la nouvelle la plus dingue, mais effectivement, il y a un nouveau logo et surtout une nouvelle interface. Je travaille actuellement sur Webflow pour améliorer la formation Product Builder d’Uncode School, donc je suis en plein test de cette nouvelle interface. Malgré une interface très moderne et assez canon, je trouve que la police est vraiment trop petite et que ça réduit un peu l’accessibilité. A la longue, c’est un peu pesant… J’ai juste galéré à retrouver mes classes qui passent donc du panneau de droite au panneau de gauche (touche G pour y accéder).
Possibilité d’intégrer de la 3D et des intégrations avec Spline.
Très belle possibilité pour les designers qui veulent s’amuser à pousser encore plus loin leurs design avec de la 3D. Spline est maintenant nativement intégrée à Webflow. C’était déjà possible d’intégrer Spline sur Webflow via l’embed, mais ici, tu peux directement intégrer Spline dans le volet Interactions. Je ne maîtrise pas assez bien la 3D, mais je prends la feature !
Un système multilingue est enfin disponible nativement !
Tu vas maintenant pouvoir intégrer directement des nouvelles langues sur Webflow sans passer par un outil externe. Très attendu par beaucoup de passionnés sur Webflow, Je trouve que c’était une feature qui manquait. Par contre, le CEO s’est bien gardé de nous dire que c’était une feature payante lors de la Keynote (et qui est même un peu cher, je trouve…). Voici les prix :
Je ne l’ai pas testé, mais de ce que j’ai pu voir, elle m’a l’air bien réalisée et il y a des options SEO pour gérer son SEO par pays.
Possibilité d’intégrer des design tokens avec des variables
Nouvelle possibilité : créer des variables comme celles que tu fais sur Figma. J’adore cette fonctionnalité qui est très intéressante. Concrètement, qu’est-ce que cela signifie ? Tu crées un design token / variable pour une couleur par exemple sur un bouton. Et bien tous les boutons qui possèdent le token vont hériter de la couleur que tu auras déterminée. L’intérêt, c’est que tu vas pouvoir faire évoluer très rapidement ton site via ce système.
Ma petite question que je suis en train de regarder de plus près, c’est de savoir comment finaliser bien gérer le Style-Guide (Client-First pour ma part) ET les design tokens pour éviter la redondance et une meilleure viabilité sur le long terme. De même pour le naming des tokens, il va falloir choisir une notation. Ce sont les sujets que je vais regarder dans les prochaines semaines. Intéressé pour avoir tes retours et tes conseils / bonnes pratiques sur le sujet !
Pour l’heure, les variables se trouvent dans le panneau de gauche et tu ne peux en gérer que 3 : color, size et font-family. D’autres arrivent bien évidemment par la suite. La démonstration du CEO se base sur une version non publiée de l’éditeur (on voit par exemple “border”, “spacing”…).
Tu vas pouvoir ajouter des propriétés customs (et du code) directement dans le panneau de droite.
Petite nouveauté, la possibilité de “coder” des propriétés CSS custom directement dans le panneau de droite. On voit ici que Webflow devient de plus en plus un éditeur “technique” qui s’éloigne de plus en plus du “no code” (mais ce n’est pas pour me déplaire parce que cela augmente les capacités de l’outil).
À garder en tête par contre : il faut toujours vérifier que tes propriétés custom seront bien accessibles sur tous les navigateurs. C’est bien de faire des design originaux, mais si on ne peut les voir que sur la dernière version de Chrome c’est un peu dommage. Pour savoir si ta propriété custom est compatible avec tel ou tel navigateur, il y a un site que je peux te conseille : Can I Use.
Un nouvel élément fait son apparition : Slot.
A quoi sert-il ? L’élément Slot va permettre d’ajouter n’importe quel contenu à ton composant. Cela va donner beaucoup plus de flexibilité dans la création design (parce que les component étaient un peu rigides…). Par exemple, on va avoir un composant qui doit posséder à chaque fois du texte et une image, mais on va pouvoir lui rajouter tantôt un slider, tantôt remplacer ce slider par une vidéo… J’adore cette feature et j’ai hâte de la tester (parce que ce n’est pas encore disponible).
Figma et Webflow deviennent de plus en plus imbriqués
Si tu es sur Webflow, il y a de forte chance que tu sois également utilisateur de Figma. L’idée de Webflow est donc de rendre les 2 applications les plus imbriqués pour faire en sorte que le process de création soit le plus smooth possible. On a pu voir l’année dernière un plugin Figma to Webflow apparaître. Le principe étant de pouvoir “transférer” un design de Figma vers Webflow. On avait d’ailleurs fait une vidéo de démo avec Uncode School sur ce sujet.
Le plugin a continué d’évoluer et tu peux maintenant faire des changements dans Figma qui seront ensuite répercutés directement dans Webflow. Je trouve ce process génial, mais je pense que c’est encore un peu tôt pour pouvoir l’utiliser en production sur des projets importants. Si tu es tout seul sur un projet à gérer le Figma + Webflow, cela peut être intéressant de le tester, mais dès que les fonctions sont bien définies avec des Product Designers et Product Builders de leur côté, je pense que ça va coincer en termes de responsabilité. C’est un plugin intéressant qui permet plus de rapidité dans l’intégration d’un site, mais qui peut faire repenser les rôles de chacun et les responsabilités.
P.S. : même le co-fondateur a créé un class Body 🥲 Pour info, je déconseille plutôt cette pratique et je conseille plutôt d’utiliser le Tag.
DevLink permet maintenant de pouvoir importer un composant React dans Webflow.
DevLink dévoilé l’année dernière permettait de créer des composants visuels sur Webflow pour ensuite les importer dans une app React. Ils vont également permettrent l’inverse. : importer un composant React…dans Webflow ! Ce point-là peut-être intéressant et montre à quel point la différence no code / code n’a pas lieu d’être et à quels points les outils vont être imbriqués.
Par exemple, on peut imaginer que vous fassiez une landing page pour présenter votre produit, mais que vous aimeriez bien intégrer un composant React de votre site principal. Pour quelle(s) raison(s) ?
Garder une cohérence entre votre site principal et votre LP ;
Utiliser un composant complexe qui ne serait pas possible à créer en pratique sur Webflow.
Ave DevLink tu seras capable de faire cela !
Amélioration de collaboration
Avec la possibilité de créer des petites bulles de notation sur le site. Très utile pour que tes clients te fassent un retour. Et très utile pour moi quand je vais corriger les sites de mes étudiants sur Uncode School !
CONCLUSION
Une belle Keynote avec plein de nouveautés qui ne sont pas gadgets qui vont nous permettrent d’améliorer nos sites sur Webflow. Il est intéressant de voir que les sujets de Membership, Logic, E-commerce et IA ne sont pas du tout évoqués. En sens que la vision de Webflow est finalement de devenir le meilleur éditeur de programmation visuelle du marché capable de s’interfacer avec Figma et du code. Le reste des fonctionnalités plus “webapps” sont donc laissés à des acteurs qui se chargeront de l’implémenter via la Marketplace.
Je trouve ce move assez intéressant et plutôt bien vu. Plutôt que de faire la course aux fonctionnalités et du coup de rester assez moyen, l’idée est plutôt de créer le meilleur éditeur visuel du marché. J’adhère à la vision en tout cas !
N’hésite pas à me faire un retour si tu partages cette vision !
Les mises à jour WeWeb sont vraiment… canons !
Notamment "3 mises à jour que je trouve intéressantes :
Les logs s’affichent maintenant pour pouvoir savoir ce qui se charge et donc mieux débugger.
Une meilleure gestion des commits et rollbacks. Quesako ? tu vas mieux pouvoir gérer tes versions et être capable de revenir sur des versions précédentes. C’est hyper important quand tu ship de nouvelles features d’être capable d’avoir cela.
Et surtout… le plugin NPM qui fait son arrivée ! Et là c’est cannonissisme parce que cela veut dire que l’on va pouvoir utiliser les packages NPM directement dans WeWeb. Alors la bonne nouvelle c’est que ça va donner une nouvelle dimension à WeWeb parce que cela va permettre d’ajouter des features à WeWeb sans devoir les recoder. Par contre, la difficulté, c’est que dans les packages NPM il y a boire et à manger et donc le choix n’est pas toujours évident à faire… donc il va y avoir de la recherche et de l’essai / erreur pour trouver ce qui va te convenir pour ta webapp !
WeWeb n’en finit plus de m’impressionner et s’annonce effectivement comme un outil phare de 2024 qu’il va fallloir maîtriser pour créer des webapps professionnelles.
Zapier annonce Canva pour mieux documenter… ses apps
“Ses apps”, “Ses Zaps”. Méga vanne… Merci 😝
Petite nouveauté sur Zapier : la possibilité de documenter ses automatisations directement dans un document type Whimsical. L’intérêt, c’est que tu vas pouvoir d’une part documenter ton process et surtout pouvoir déclencher les Zaps depuis ce document.
Je n’utilise pas au quotidien Zapier chez Uncode School, donc difficile pour moi de te donner un véritable avis. C’est plus de la new et à toi d’aller tester.
J’avoue que par rapport à Make ou n8n, cette feature ets intéressante parce que la documentation sur Make est horrible et très peu efficace je trouve sur des automatisations plus complexes ou en équipe.
Pour accéder à l’alpha, ça se passe ici.
n8n ajoute un module IA (et ça déchire)
Depuis, peu l’outil d’automatisation n8n a intégré Langchain dans un module dédié.
Qu’est-ce que ça signifie ?
Cela signifie que tu vas pouvoir construire des bots avec IA depuis n8n qui utilise des modèles de données différents.
Comme une vidéo vaut mieux qu’un long discours, je te laisse regarder le vidéo ci-dessus qui explique vraiment très bien les cas d’applications !
(Attention, ce module n’est pas disponible sur la version cloud malheureusement, tu dois devoir l’intégrer en self-hosting).
Tu veux soutenir cette newsletter ?
Lorsque tu vas créer des sites web ou applications, je te propose d’utiliser mes liens d’affiliation. Pour toi, cela ne coûte rien, mais pour moi cela me rapportera un petit pourcentage et me permettra de continuer mon travail sur cette newsletter et de la garder gratuite aussi longtemps que possible 🤗
→ Automatiser toutes ses tâches avec Make
→ Créer des outils internes et de belles bases de données avec Airtable
Ou sinon un petit like, un email ou un MP sur LinkedIn ça me fait toujours plaisir aussi !
Si cela t’a plu, n’hésite pas à m’ajouter sur Linkedin, m’écrire un petit message en répondant à cette newsletter ou encore partager pour m’encourager à continuer 😎
Si, à l’inverse, un ami vous a transféré cette newsletter et que vous l’avez apprécié, vous pouvez vous abonner. 👇
Un petit article d'un influenceur (que je recommande) design et figma sur le naming des tokens.
https://www.linkedin.com/feed/update/urn:li:activity:7089169330373816320?updateEntityUrn=urn%3Ali%3Afs_feedUpdate%3A%28V2%2Curn%3Ali%3Aactivity%3A7089169330373816320%29
Merci pour cette newsletter. Petite précision pour n8n, le module Langchain est dispo sur le cloud payant et en image docker seulement. Pas dispo en run npm pour l’instant.