Créer un design system

Dans ce tutoriel, vous mettez en place les briques qui gardent un site cohérent : des jetons pour les couleurs, les polices et les espacements de votre marque, des classes qui réutilisent un style, et un composant qui réutilise une structure. À la fin, modifier un jeton ou un composant met à jour tout le site. Partez de n’importe quelle page avec quelques boutons, par exemple la page du tutoriel Créer une landing page.

Configurer les jetons

1. Ouvrir l’onglet Tokens

   L’inspecteur, à droite, a trois onglets : Design, Interactions et Tokens. Ouvrez Tokens. Il contient trois sections : Colors, Spacing et Fonts. Les jetons appartiennent au site : toutes les pages les partagent.

2. Ajouter les couleurs de votre marque

   Dans Colors, cliquez sur + (Add color token). Un jeton nommé color apparaît. Renommez-le brand et choisissez votre couleur principale dans le champ de couleur à côté du nom. Ajoutez-en deux autres : ink pour le texte et surface pour les fonds.

3. Ajouter une échelle d’espacements

   Dans Spacing, cliquez sur + (Add spacing token) et ajoutez quelques paliers, par exemple sm à 8, md à 16 et lg à 32.

4. Ajouter vos polices

   Dans Fonts, ouvrez Add font… et choisissez une police Google pour les titres, par exemple Google · Inter. Pour les polices Google, le jeton affiche les graisses que vous pouvez activer ou désactiver. Ajoutez une seconde police pour le corps du texte si vous le souhaitez.

Utiliser les jetons dans les styles

1. Appliquer un jeton de couleur

   Revenez sur Design et sélectionnez le bouton de la page. Dans Fill, cliquez sur la pastille de couleur et choisissez brand dans la palette de jetons. Le champ affiche maintenant le nom du jeton au lieu d’une valeur hexadécimale.

2. Appliquer un jeton d’espacement

   Dans Layout → Padding, cliquez sur l’icône de variable (Use a spacing token) et choisissez md. Padding, Margin et Gap acceptent tous des jetons d’espacement.

3. Appliquer un jeton de police

   Sélectionnez un titre. Dans Typography → Font, les jetons de police apparaissent en premier. Choisissez celui que vous avez ajouté.

4. Modifier un jeton

   Ouvrez Tokens et changez la couleur de brand. Tous les éléments qui l’utilisent se mettent à jour d’un coup. Pour rompre le lien sur un élément, cliquez sur Detach token à côté du nom du jeton ; l’élément garde la valeur actuelle.

Créer une classe bouton

1. Ajouter une classe

   Sélectionnez le bouton. Dans la barre de classes en haut de l’onglet Design, tapez btn dans Add class… et appuyez sur ↵. Une pastille .btn apparaît.

2. Styliser la classe, pas le calque

   Sous les pastilles, réglez Style sur Class .btn (ou cliquez sur la pastille). Définissez maintenant le remplissage, le padding, un Radius dans Border et la police. Ces styles appartiennent à la classe : tout élément portant .btn les reçoit.

3. Ajouter un état de survol

   La classe toujours ciblée, choisissez Hover dans la barre d’états au-dessus des sections et modifiez légèrement le remplissage. Choisissez Default pour revenir.

4. Réutiliser la classe

   Sélectionnez un autre bouton, tapez btn dans Add class… et appuyez sur ↵. Le nom de la classe est suggéré pendant la saisie. Le bouton prend tout le style d’un coup.

Ajouter une classe combinée

1. Créer la combinaison

   Sélectionnez le second bouton. Tapez is-secondary dans Add class… et appuyez sur ⇧↵. Maj+Entrée crée une classe combinée par-dessus la dernière classe : .is-secondary ne s’applique donc qu’avec .btn.

2. Styliser la différence

   Réglez Style sur Class .is-secondary. Ne changez que ce qui diffère : un remplissage transparent, une bordure en brand et un texte en brand. Tout le reste vient toujours de .btn.

3. Voir la propagation

   Modifiez l’arrondi de .btn. Les deux boutons suivent, et le secondaire garde son propre remplissage et sa bordure.

Créer un composant bouton

1. Créer le composant

   Sélectionnez le bouton principal et appuyez sur ⌘⌥K, ou faites un clic droit dessus et choisissez Create component. Le bouton passe dans un nouveau composant, et une instance prend sa place sur la page.

2. Le nommer

   Ouvrez l’onglet Components dans la barre latérale gauche. Faites un clic droit sur le nouveau composant, choisissez Rename et appelez-le Button.

3. Placer des instances

   Faites glisser Button depuis l’onglet Components sur la page, ou cliquez sur le + de sa ligne (Insert Button). Placez deux ou trois instances.

4. Remplacer le texte

   Sélectionnez une instance et double-cliquez sur son texte. Tapez un nouveau libellé, par exemple Book a call. Le nouveau texte est un remplacement : il ne s’applique qu’à cette instance.

5. Lire et réinitialiser les remplacements

   L’instance sélectionnée, la section Instance liste ses remplacements. Cliquez sur la flèche de réinitialisation à côté d’un remplacement pour revenir à la valeur du composant.

6. Modifier le composant

   Cliquez sur Edit component dans la section Instance et modifiez le bouton, par exemple son padding. Toutes les instances se mettent à jour, et les textes remplacés restent tels quels.

Ce que vous avez appris

• Les jetons regroupent les couleurs, les espacements et les polices de votre marque ; modifier un jeton met à jour tous les éléments qui l’utilisent.
• Les classes partagent un style, les classes combinées ajoutent une variante par-dessus une classe de base, et les états comme Hover fonctionnent aussi sur les classes.
• Les composants partagent une structure ; chaque instance peut remplacer son texte et recevoir quand même toutes les autres modifications.

Continuez avec les tutoriels suivants, ou lisez les guides sur lesquels celui-ci s’appuie :