Rendez votre site interactif avec des calques de code

Il n'y a aucune limite à ce que vous pouvez concevoir sur le web, mais donner vie à ces idées dépend souvent d'un savoir-faire technique. Faire évoluer un site web personnalisé du design à la production (ou au prototype) signifie traduire des designs statiques en expériences dynamiques et réactives – un processus qui nécessite de travailler selon les contraintes des interactions intégrées, de pouvoir modifier le code directement ou de transmettre le travail à un développeur.

Nous avons créé des calques de code (des éléments interactifs soutenus par un code React personnalisé) dans Figma Sites pour vous aider à tester l'interaction et le mouvement sans connaissances techniques supplémentaires ni aide extérieure. Que vous conceviez un élément de A à Z ou que vous vous inspiriez d'un design existant, les calques de code vous permettent d'ajouter des fonctionnalités dynamiques à votre site (des portes dérobées et des menus déroulants aux ombrages et aux cartes) en convertissant les composants en calques de code, en discutant avec l'IA pour les concevoir et les ajuster ou en modifiant directement dans le compositeur de code de Figma. De plus, vous pouvez générer plusieurs variantes de calques de code pour comparer vos idées côte à côte et tester librement – le tout sur le plan de travail de Figma.

Nous avons récemment lancé Figma Sites, un outil qui vous permet de concevoir, de créer et de publier des sites web sans quitter votre workflow Figma. Les calques de code s'appuient sur les éléments préfabriqués et les interactions que Figma Sites propose.

Personnaliser et tester les calques de code

Nous avons lancé Figma Sites avec des éléments web réactifs prédéfinis et des interactions prêtes à l'emploi (par exemple, la possibilité de faire glisser des objets et de mélanger du texte) pour que vous puissiez facilement créer des designs expressifs. Ces fonctionnalités offrent un point de départ, et les calques de code vous permettent de les personnaliser encore plus. En créant un calque de code pour un composant, vous pouvez ajouter un comportement dynamique simplement en envoyant un prompt au chat IA intégré – optimisé par Figma Make.

Par exemple, vous dirigez un magasin de fleurs et souhaitez offrir à vos clients la possibilité de concevoir des arrangements personnalisés directement depuis votre site. Avec les interactions prédéfinies telles que Draggable, vous pourriez concevoir une manière de déplacer librement des fleurs spécifiques en travers de la page. Mais cette fonctionnalité seule ne suffirait pas pour tout ce que vous essayez de créer : un développement personnalisé serait nécessaire pour créer des copies de fleurs à déplacer à l'infini et pour arranger chaque fleur avec précision.

Avec les calques de code, vous pourriez simplement demander à l'IA d'activer la copie et le déplacement de composants floraux dans le vase, puis expérimenter davantage en jouant avec les effets de rotation ou de superposition. Un prompt de départ pour cette interaction pourrait être : Je veux créer moi-même un arrangement floral. Je veux pouvoir faire glisser et déposer une copie de chaque fleur, autant de fois que je veux, n'importe où sur le plan de travail. La copie des fleurs doit être exactement de la même taille que l'image originale.

Comment utiliser les calques de code dans des designs existants

Il existe plusieurs façons de rendre un design en cours d'élaboration plus dynamique avec les calques de code. En voici quelques unes :

• Ajoutez une animation personnalisée telle qu'une rotation ou un rebond à vos cartes de fonctionnalités.
• Créez l'effet de texte parfait, tel qu'un compteur qui met en avant une statistique importante dans votre portfolio.
• Créez des composants utiles tels qu'une calculatrice de prêt fonctionnelle ou un estimateur de prix pour une page produit.
• Ajoutez de l'interactivité à une image statique en ajoutant des animations de survol telles qu'une ondulation ou un changement de couleur.

Quand vous êtes prêt à tester les calques de code dans un design existant :

• Ouvrez votre design dans Figma Sites.
• Sélectionnez l'élément que vous souhaitez modifier et cliquez sur l'icône Figma Make dans l'onglet Design du panneau des propriétés. L'élément est alors transformé en un calque de code.
• Décrivez les animations ou les effets que vous souhaitez dans le chat IA.
• Testez plusieurs idées à la fois en dupliquant un calque de code avec Commande D sur le plan de travail et décrivez les variantes que vous recherchez dans le chat IA.

Comment lancer un calque de code de A à Z

Si vous n'utilisez pas un design existant, vous pouvez rapidement tester une nouvelle idée pour un élément interactif en créant un calque de code autonome à partir d'un plan de travail vierge.

Pour commencer : utilisez l'outil Make (ou le raccourci E) pour dessiner un raccourci de calque de code sur votre plan de travail, comme vous le feriez pour dessiner une frame. Une fenêtre modale s'ouvre alors automatiquement et vous permet de remplir la frame via le chat IA ou en écrivant du code. Vous pouvez même insérer cet exemple de prompt : Créer des confettis floraux qui couvrent la largeur du calque en utilisant des emojis de fleurs.

Si vous cherchez plus de points de départ, des prompts IA suggérés peuvent vous aider à définir l'interaction que vous essayez de concevoir. Vous pouvez également vous appuyer sur des composants de base de l'onglet Make (par exemple, des boutons, des galeries d'images et des menus de navigation, chacun comportant un code pré-écrit), que vous pouvez déposer sur votre site tels quels ou personnaliser selon votre design.

Préparer le terrain pour le travail à venir

En plus de vous aider à expérimenter et à itérer avec des éléments interactifs, les calques de code peuvent faciliter le travail futur en vous permettant de réutiliser la logique et les schémas.

Modifier les propriétés du calque de code

Les calques de code incluent des propriétés personnalisables (chaînes, nombres et références à d'autres composants) qui vous permettent de modifier le comportement et l'apparence du calque sans modifier le code sous-jacent. Ces propriétés permettent d'adapter le calque de code à différents contextes. Le chat IA générera automatiquement des propriétés en fonction de votre prompt, et vous pouvez également demander des propriétés spécifiques selon les besoins.

Transformer un calque de code en composant réutilisable

Tout comme vous pouvez transformer une frame en composant dans Figma, vous pouvez transformer un calque de code en composant réutilisable. Vous pouvez utiliser ces composants sur plusieurs pages, partager des modèles avec votre équipe et les mettre en œuvre dans de futurs designs.

Importer des packages de code pour déverrouiller des interactions plus riches

Avec les calques de code, vous pouvez importer des packages npm tels que motion et @react-three/fiber qui fournissent des fonctionnalités prédéfinies pour l'animation, les éléments 3D et plus encore.

Les calques de code sont disponibles dès aujourd'hui pour tous les utilisateurs dans Figma Sites. Nous espérons qu'en vous permettant de tester et de mettre en œuvre des composants interactifs par vous-même plus facilement, vous pourrez faire avancer vos designs et donner vie à vos idées.