Travailler avec les Composants et les Instances

Les composants peuvent aider à réduire les erreurs, assurer la cohérence et gagner du temps – en libérant votre équipe du fastidieux travail de synchronisation et de mise à jour.

Une fois que vous transformez un objet ou un groupe en Composant, il agit comme un maître pour toutes les copies – ou Instances – créées à partir de ce composant.

Cela signifie que tout formatage que vous appliquez au Composant est immédiatement reflété par chaque Instance dans le projet.

Cependant, les instances restent indépendantes du composant dans leurs Coordonnées (y compris Retourner et Pivoter) et leur Visibilité. Cela signifie que vous pouvez déplacer ou masquer des composants sans affecter la position ou la visibilité de leurs instances.

Dans cet article, nous vous montrerons comment transformer n'importe quel objet ou groupe en composant, créer des instances de ce composant, et démontrerons comment modifier vos composants en ajoutant ou en supprimant des éléments.

Créer des composants et des instances

Créer un Composant

Pour créer un Composant :

1. Sélectionnez n'importe quel objet ou groupe sur la page.
2. Depuis le bouton Composant dans la Barre d'outils supérieure, ou la section Composant du Menu Contextuel du clic droit, choisissez Créer un élément.
3. Une fois créés et sélectionnés, les Composants sont identifiables par leur étiquette, badge et cadre 'Composant' en violet ; dans le Panneau de contour, ils sont identifiés par un surlignage violet.

Créer une Instance

Pour créer une Instance :

1. Faites une copie du Composant en utilisant Ctrl/Cmd + D, l'option Copier dans le Menu Contextuel, ou maintenez simplement Alt/Option et faites glisser.
2. Vous pouvez coller l'Instance sur n'importe quelle page du projet
3. Modifiez maintenant la taille, le texte, la couleur ou d'autres attributs de formatage du Composant
4. Une fois les modifications terminées, cliquez en dehors du cadre d'objet du Composant – et regardez les modifications se propager à toutes les Instances du projet.

Modifier et ajouter des objets à un composant

Les Composants et les Instances – même ceux créés à partir d'objets uniques – se comportent comme des groupes.

Pour modifier n'importe quel composant ou instance :

1. Sélectionnez-le pour voir le Cadre d'objet violet.
2. Ensuite, double-cliquez pour que la Bordure d'édition du Composant plus épaisse apparaisse en violet.
3. Maintenant, vous pouvez...

• Cliquer pour modifier
• Ajouter un nouvel élément depuis la barre latérale gauche
• Copier et coller un objet depuis la page elle-même

Remplacer les instances

Parfois, vous pouvez vouloir personnaliser un aspect d'une instance individuelle – tout en la laissant connectée et réactive à son composant pour d'autres modifications et mises à jour. Par exemple, vous pourriez vouloir changer la couleur d'un CTA sur une page spécifique, mais vouloir quand même que ce bouton se synchronise avec son maître pour tout changement futur de taille et de texte.

C'est pourquoi une modification effectuée localement sur n'importe quelle instance individuelle remplace la capacité du composant à modifier cet attribut de formatage spécifique (texte, couleur, flou, coins arrondis) à l'avenir.

Les remplacements appliqués localement n'ont aucun effet sur les autres instances, ni sur le Composant original. Cela permet à votre équipe d'être cohérente dans le design, tout en restant réactive au contexte de design particulier de chaque instance.

Réinitialiser et détacher les instances

Réinitialiser une Instance

Si vous avez effectué des modifications locales et des remplacements sur une instance individuelle, mais que vous décidez ensuite de supprimer ces remplacements et de réappliquer le style et les propriétés complets du composant, sélectionnez Réinitialiser l'instance.

Détacher une Instance

Si vous souhaitez reconvertir une instance en objet ou groupe normal, sélectionnez simplement Séparer l'instance.

Localiser et restaurer les composants

Pour organiser vos Composants, vous pouvez les laisser dans le contexte d'un design – ou créer une page séparée où tous vos composants peuvent résider, et épingler cette page en haut du Panneau des pages.

Mais, de temps en temps, vous pourriez vouloir accéder directement à votre composant depuis un autre endroit de votre projet – par exemple, en travaillant sur l'une de ses instances.

Et, au cas où vous supprimeriez accidentellement un composant, vous pourriez avoir besoin de le restaurer depuis l'une de ses instances.

Localiser un Composant

Si vous travaillez avec une instance et que vous avez besoin de vérifier – ou d'ajuster – le composant lui-même, cliquez simplement sur l'instance et sélectionnez Aller à l'élément dans le menu. Peu importe où se trouve l'instance, vous serez directement redirigé vers l'emplacement de son Composant dans le projet.

Restaurer un Composant

Si, pour une raison quelconque, vous supprimez un Composant et laissez des instances orphelines, sélectionnez simplement l'une de ses instances et choisissez l'option Restaurer l'élément. Le composant réapparaîtra comme par magie ! Notez que cela fonctionne même pour les instances avec des remplacements – vous récupérerez quand même le composant original.