Figma’s NEW Site Builder: The Good, The Bad & the HYPE

Summary

Figma Sites, un nouvel outil de Figma, pourrait remplacer des plateformes comme Framer, Lovable et Webflow. Contrairement à avant, où Figma servait uniquement à concevoir, cet outil permet désormais de concevoir et de publier des sites en utilisant du code, directement depuis Figma. Bien qu'il y ait des limitations, comme des animations préfabriquées et une sortie de code encore imparfaite, la possibilité de créer, tester et collaborer au sein d'un même environnement est prometteuse. Le CMS et l'intégration de 'vibe coding' ouvrent de nouvelles perspectives pour la création rapide de sites dynamiques, même si l'outil est encore en phase bêta.

Takeaways

• 😀 Figma Sites a été annoncé comme un outil pouvant remplacer Framer, Lovable et potentiellement même Webflow.
• 😀 Figma Sites permet de concevoir et de publier un site directement dans Figma, sans avoir besoin de passer par un développeur extérieur.
• 😀 L'outil permet de copier les conceptions de Figma et de les importer dans Figma Sites, en ajustant la mise en page pour différentes tailles d'écran comme tablette et mobile.
• 😀 Le système de cascades pour les modifications de contenu semble être un élément clé, bien qu'il y ait des doutes sur la gestion des modifications d'images pour les différentes tailles d'écran.
• 😀 Les animations et les interactions préfaites sont disponibles, avec des options intéressantes comme les animations conditionnelles et des effets comme le défilement et le survol.
• 😀 Les outils d'animation sont assez nombreux mais manquent de flexibilité pour des créations personnalisées complexes.
• 😀 Après avoir testé et ajouté les animations, les utilisateurs peuvent publier leur site en ligne sur leur propre domaine, bien que les détails sur les prix et l'hébergement soient encore inconnus.
• 😀 Un CMS dynamique est prévu pour plus tard dans l'année, ce qui permettra aux utilisateurs de créer facilement du contenu dynamique comme des blogs dans Figma Sites.
• 😀 Figma propose également un outil de « vibe coding » pour générer du code à partir de conceptions et importer ces composants dans Figma Sites.
• 😀 La qualité du code généré est un point de critique majeur, avec des problèmes de structure HTML et de référencement (absence de balises de titre importantes pour le SEO).

Q & A

Qu'est-ce que Figma Sites et en quoi cela pourrait-il remplacer d'autres outils comme Framer, Lovable ou Webflow ?

Figma Sites est un nouvel outil de Figma qui permet de concevoir, coder et publier des sites Web directement à partir de Figma, sans avoir besoin de passer par un développeur. Cela pourrait remplacer des outils comme Framer, Lovable, et Webflow en permettant aux utilisateurs de tout faire dans un même environnement de conception.

Comment Figma Sites améliore-t-il le processus de conception de sites Web ?

Figma Sites permet aux utilisateurs de concevoir un site Web dans Figma, puis de le coder et de le publier directement, sans avoir besoin de transférer les fichiers vers un autre outil de développement. Cela simplifie le flux de travail et élimine l'étape de transfert entre la conception et le développement.

Est-ce que Figma Sites permet de créer des versions responsive d'un site ?

Oui, Figma Sites permet de créer des versions pour différents points de rupture (desktop, tablette, mobile). Les utilisateurs peuvent ajuster le contenu pour chaque version, et il existe des options pour personnaliser ces points de rupture.

Comment les interactions fonctionnent-elles dans Figma Sites ?

Figma Sites permet d'ajouter plusieurs types d'interactions comme des animations au défilement, des animations de survol, et des animations conditionnelles. Cependant, les animations sont principalement préfabriquées, ce qui limite la personnalisation avancée.

Les animations ajoutées dans Figma Sites sont-elles entièrement personnalisables ?

Non, les animations dans Figma Sites sont principalement des modèles préconçus, ce qui peut être décevant pour ceux qui souhaitent créer des animations totalement personnalisées. Les options comme les effets de défilement et les animations de survol sont disponibles, mais la flexibilité reste limitée.

Quelles sont les limitations de la version actuelle de Figma Sites ?

La version actuelle de Figma Sites est encore en bêta et présente des problèmes de qualité du code, comme des balises manquantes pour l'accessibilité (par exemple, pas de balises H1-H6 pour les titres) et une structure de code peu optimisée. De plus, certaines fonctionnalités comme la gestion des CMS et la publication de sites sont encore en développement.

Quels sont les avantages de la fonctionnalité CMS de Figma Sites ?

La fonctionnalité CMS de Figma Sites, bien qu'encore en développement, permet de créer du contenu dynamique de manière plus simple que sur des plateformes comme Webflow. Elle est conçue pour être facile à utiliser, avec une configuration automatique, ce qui est un atout pour les utilisateurs cherchant à éviter des processus complexes.

Figma Sites permet-il d'ajouter des fonctionnalités personnalisées via le 'vibe code' ?

Oui, Figma Sites propose une fonctionnalité appelée 'vibe code' qui permet de coder des composants personnalisés. Une fois créés, ces composants peuvent être intégrés directement dans votre site Figma, ce qui facilite l'ajout de fonctionnalités spécifiques tout en restant dans l'écosystème Figma.

Le code généré par Figma Sites est-il optimisé pour le référencement (SEO) ?

Non, le code généré par Figma Sites n'est pas encore optimisé pour le référencement. Par exemple, les titres (H1-H6) sont absents, ce qui nuit à la structure du site pour le SEO. C'est un aspect que Figma devra probablement améliorer pour que les sites créés soient plus efficaces sur les moteurs de recherche.

Quels sont les défis potentiels pour les utilisateurs professionnels qui souhaitent adopter Figma Sites ?

Les défis incluent la qualité actuelle du code, qui n'est pas adaptée pour des sites web complexes ou optimisés pour le SEO, ainsi que les limitations dans la personnalisation des animations. De plus, bien que la possibilité de créer un site tout-en-un soit séduisante, il manque encore de la fluidité et de la cohérence dans l'intégration des différentes fonctionnalités.