Cours 9 | Composantes et Figma Sites¶
Annonces¶
Exposition¶
Concours d'essais audiovisuels¶
Le fameux concours d'essais audiovisuels aura encore lieu cette année ! Ce concours est une belle occasion d'obtenir une bourse en argent (jusqu'à 175$) et de bonifier votre portfolio !
Date limite de remise : 10 mai 2026
Vous trouverez ici les détails de l'appel à candidatures: Appel a candidature 2026.pdf
Des questions? Adressez-les à Lora Boisvert ou Thomas O Fredericks sur Teams.
Retour sur le Devoir 03¶
Retour sur l'exercice du gâteau¶
- L'importance de comprendre les contraintes : les alignements et la mise à l'échelle
- Largeur et hauteur configurées dynamiquement : l'ajustement au contenu ou remplir le contenant
Composantes (Components)¶
Une composante Figma est un élément réutilisable.
On le crée une fois et on peut l'utiliser partout ensuite. Si on modifie la composante source, toutes les copies se mettent à jour automatiquement.
Voici des exemples :
Créer une composante
Pour créer une composante, sélectionner un ou plusieurs éléments puis Ctrl+Alt+K (Windows) ou Cmd+Option+K (Mac).
Instances¶
Une instance c'est juste le nom donné à une copie d'une composante. Quand on fait un copier/coller d'une composante, ça crée une instance.
Modifications
On peut modifier les instances dans une certaine mesure. On ne peut pas toutefois déplacer des éléments. Le positionnement est géré par la composante de base.
Aussi, il n'est pas possible de supprimer des éléments. Si on le fait, vous verrez que ce dernier est simplement caché dans la liste des calques.
Réinitialiser une instance
Pour réinitialiser une instance : Clic droit puis Réinitialiser l'instance. Ça va retirer les modifications effectuées à l'instance.
Détacher une instance
Pour détacher une instance : Clic droit puis Detach instance (à éviter sauf cas exceptionnel). Ainsi, il n'y aura plus de lien avec la composante source.
Variantes¶
Les variantes permettent de regrouper plusieurs états d'un même composant. Par exemple, un bouton avec ses 5 états (Default, Hover, Active, Focused, Disabled) est un seul composant avec 5 variantes.
IMPORTANT : Pour que cela fonctionne, il faut sélectionner l'ensemble de composantes et configurer les paramètres afin de spécifier chaque valeur associée à chaque état.
Créer des variantes
Méthode 1
Pour créer des variantes, sélectionner plusieurs composants du même type, puis dans la colonne de droite, cliquer sur le bouton « Combiner en tant que variantes » :
Méthode 2
Si aucune composante n'est encore créée, sélectionner les éléments, puis dans la colonne de droite, cliquez sur les trois petits points et sélectionnez « Créer un ensemble de composants » :
Créer un instance
Dans l'onglet des ressources, vous pouvez simplement prendre votre nouvelle composante et la glisser dans votre composition.
Bonne pratique
Nommez vos composants avec une structure claire : Catégorie/Nom/Variante
Ex. : Bouton/Primaire/Default, Bouton/Primaire/Hover
Propriétés de composant¶
Les propriétés permettent de rendre certains aspects d'un composant modifiables par l'instance sans briser le lien au composant de base.
| Propriété | Exemple d'usage |
|---|---|
| Texte | Changer le label d'un bouton |
| Boolean | Afficher/masquer une icône |
| Instance swap | Remplacer une icône par une autre |
| Variant | Changer l'état (Default → Hover) |
Les propriétés sont configurables sur les éléments d'une composante et quand on sélectionne la composante, on voit toutes les propriétés dans la colonne de droite.
Exemple concret
Organisation des composants¶
La bonne pratique est de créer une page dédiée aux composants (ex. : « Components ») :
Ils seront disponibles dans le panneau Ressources (Assets).
Pour rendre ces composantes accessibles dans d'autres projets, vous devez publier la bibliothèque :
Introduction à Figma Sites¶
Figma Sites est une fonctionnalité qui permet de publier un design directement en site Web réel, avec une gestion des breakpoints intégrée.
Blocs¶
Les blocs sont les éléments de base d'une page Figma Sites. Chaque section de votre site est un bloc distinct qui s'empile verticalement.
Chaque bloc se comporte comme un frame avec Auto Layout vertical. On peut :
- Ajouter un bloc via le panneau de gauche ou le bouton
+entre les sections - Réorganiser les blocs par glisser-déposer
- Configurer les blocs pour chaque breakpoints (desktop, tablette, mobile)
Bibliothèques de composantes¶
Figma Sites donne accès aux composantes créées dans d'autres fichiers Figma à condition d'avoir publié la bibliothèque de celles-ci.
Paramètres du site¶
Avant de publier, configurez les paramètres globaux de votre site via l'icône ⚙️ :
| Paramètre | Description |
|---|---|
| Titre du site | Apparaît dans l'onglet du navigateur (balise <title>) |
| Description | Texte affiché dans les résultats de recherche (balise <meta>) |
| Favicon | Petite icône affichée dans l'onglet du navigateur |
| Domaine | URL personnalisée ou sous-domaine Figma par défaut |
| Image de partage | Image affichée lors du partage sur les réseaux sociaux (Open Graph) |
Publication¶
Une fois votre design prêt et vos paramètres configurés :
- Cliquez sur Publish en haut à gauche de l'éditeur
- Ajuster le titre du site au besoin
- Confirmez la publication
Votre site est maintenant en ligne avec une URL Figma (ex. : identifiant.figma.site).
À chaque modification, il faut republier pour mettre à jour le site en ligne.
Attention
Avec le forfait éducationnel, vous n'avez droit qu'à un seul site publié à la fois.
Exercices¶
Exercice - Figma
Angine de poitrine
Exercice - Figma
Avatar
Exercice - Figma
Un site et que ça saute !