Un composant est un bloc de mise en page que vous concevez une fois et placez de nombreuses fois : une barre de navigation, une carte, une formule tarifaire, un pied de page. Chaque placement est une instance. Modifiez le composant et toutes les instances de toutes les pages se mettent à jour.
Créer un composant
Sélectionnez ce qui doit devenir réutilisable
Sélectionnez un cadre et son contenu sur le canevas ou dans Layers.
Créez le composant
Appuyez sur ⌥⌘K ou choisissez Create component dans le menu contextuel. La sélection est déplacée dans un nouveau composant et remplacée par une instance.
Modifiez-le sur son plan de travail
Le composant reçoit son propre plan de travail sur le canevas. Les modifications faites là se propagent à chaque instance en direct.
Placer des instances
Faites glisser un composant depuis l’onglet Components sur un plan de travail, ou utilisez Insert instance. La section instance de l’inspecteur choisit sa variante, liste ses remplacements et permet d’aller au composant principal.
Variantes
Les variantes sont des versions nommées d’un composant, comme light et dark ou small et large. Les styles peuvent être définis par variante, et chaque instance en choisit une. Le plan de travail du composant affiche toutes les variantes côte à côte.
Remplacements
Double-cliquez dans une instance pour modifier son texte sur place. Cette modification est enregistrée comme remplacement sur cette instance uniquement ; le composant garde sa valeur par défaut. Un remplacement peut changer les props d’un enfant (texte, lien, image), ses styles, ou le masquer. Les instances ne copient jamais l’arbre du composant : les mises à jour de tout ce que vous n’avez pas remplacé leur parviennent toujours.
"n_nav": {
"type": "instance",
"props": {
"componentId": "c_navbar",
"variant": "dark",
"overrides": {
"cn_cta": { "props": { "text": "Sign up free" } },
"cn_promo": { "hidden": true }
}
}
}
Classes ou composants ?
Utilisez une classe quand de nombreux éléments partagent une apparence. Utilisez un composant quand ils partagent une structure : les mêmes enfants dans le même ordre, avec quelques textes ou images qui changent.