C'est quoi ?

Un composant transforme un élément ou une composition de façon à devenir réutilisable à travers nos différents designs. Cela fonctionne via 2 aspects:

• Le composant principale ou parent
• La copie/clone de ce composant, qu'on appelle une instance.

Notre premier composant

Prenons le cas d'un bouton, il peut avoir plusieurs états (celui de base, survolé, actif, etc.), avoir des plusieurs variantes (action primaire, secondaire, etc.) et changer de contenu. Tout cela peut être géré via un composant.

Partons d'une frame bouton. Dans notre panneau des propriétés tout au dessus à côté du nom de notre élément (frame) se trouve ce symbole . Il permet de transformer un élément en un composant.

Notre élément aura un bord de selection violet, le signe que nous avons bien réussi à le transformer en composant. Cela se voit aussi dans le panneau des calques, avec ce même symbole devant notre élément et cette couleur violette.

Propriétés

Un composant permet de définir des propriétés, cela permet de créer des champs pour modifier l'apparence, le contenu, le style de notre composant.

Ajouter une propriété

Une fois le composant sélectionné, on trouve tout en haut du panneau des calques se trouve l'option properties et une action create property .

Types de propriété

Voici les différentes propriétés possibles:

• Text
• Boolean
• Variant
• Instance Swap

Propriété Text

Nous n'allons voir que cette propriété. Cette propriété définit une valeur textuelle qui sera lié à un élément texte de notre composant. Cela facilitera la modification du contenu.

Cette propriété a besoin qu'on lui définisse un nom et une valeur par défaut.

Dans notre cas, nous allons laissé Text comme name et Button comme value.

Assigner une propriété Text

Les éléments textes de notre composant peuvent maintenant utiliser cette propriété comme valeur à la place de leur texte.

Selectionnons l'élément texte dans notre composant et assignons lui la propriété text via le symbole

Utiliser un composant

Visuellement notre composant existe, mais il ne devrait pas être utilisé directement dans notre design. Son but est d'être une référence que nous allons pouvoir utiliser sous forme d'instance dans notre design.

Créer une instance

Depuis notre panneau des calques, c'est dans l'onglet assets created in this files

Il suffit de glisser-déposer le composant que nous souhaitons dupliquer, ou de double cliquer dessus et choisir insert instance.

Une instance aura lui aussi une couleur violette mains un symbole différent que son composant parent:

Synchronisation

Nos instances sont liés au composant parent. Tant que ce lien n'est pas rompu (modification trop important de l'instance), chaque modification sur le composant parent aura un impact direct sur ses instances.

Si on modifie la couleur de fond de notre composant, ses instances se mettront à jour pour matcher ce nouveau style.

Instance et propriété

Si on sélectionne notre instance, elle aura accès aux propriétés définies par le composant parent. Dans notre cas, nous avons la propriété text qui a une valeur par défaut button. En modifiant la valeur de ce champ, le texte de notre instance se mettra à jour sans briser la synchronisation avec son parent.

Les variantes

Un autre avantage est de pouvoir créer des variantes de votre composant. Une variante représente une version alternative de votre de composant en terme de style, que ce soit via une couleur différente, une taille différente, ou une combinaison de plusieurs facteurs.

Créer une variante

Après avoir sélectionné notre composant, tout en haut du panneau des propriétés se trouve cet icone qui permet de créer une variante. Une fois que votre composant à au moins un variant, cet icone va se retrouver dans un menu contextuelle représenté par les 3 points

Modifier notre variante

Nous allons modifier notre variante pour avoir un fond coloré différent. Nous pouvons aussi renommer le nom de chaque variante, pour facilement s'y retrouver.

Instance et variantes

Depuis une instance, nous pouvons maintenant choisir une variante. Après sélection, toute les informations liés aux variantes seront en haut du panneau des propriétés.

Pour le prochain cours et sur base du design suivant :

• À la suite de l'exercice prédent, reproduire le plus fidèlement possible
• Dans une frame desktop > desktop 1440x1024
• Utiliser un composant pour chaque section (titre - paragraphe - bouton - image )
• Mettre en place des propritétés textes pour modifier dynamiquement le contenu des instances
• Aligner ce contenu sur la grille
• Utiliser une variante pour le changement d'alignement

Exercice C

Je vous demande de faire un travail de recherche qui consiste à trouver des exemples de mises en page en ligne pour différents types de section :

• Navigation / Menu (header)
• Hero (bloc d'introduction)
• Cartes
• Slideshow
• Contenu simple (image + texte)
• Footer

Pour chaque type de section, vous trouvez 2 exemples différents que vous indiquerez dans un document excel que je fournirai avec les informations suivantes :

• Nom + Prénom
• Nom du bloc
• Url vers le site