Le bouton de réservation de La Cale fait 44 px de haut et personne n'a saisi 44 nulle part. Il est en auto layout horizontal, écart 8, marges internes 12 et 20, ajuster au contenu : 12 px de marge au-dessus d'une ligne de texte de 20 px et 12 en dessous, et la hauteur tombe de l'addition. Changez le libellé et le bouton s'élargit tout seul. Changez le corps du texte et la hauteur suit. C'est la différence entre dessiner un bouton et le décrire, et c'est l'essentiel de ce sujet.
La Cale est un atelier vélo associatif de Brest, avec douze créneaux de réparation sur un écran fixé près de la porte. Les intitulés vont de Frein, cinq signes, à Réglage de dérailleur arrière, qui en fait vingt-neuf, et trois des douze sont complets avant dix-huit heures. Personne qui dessine cet écran ne choisit son contenu, sa langue ni la largeur à laquelle il sera lu. Ce qui se choisit, c'est son comportement quand les trois arrivent autrement que dans le fichier.
L'écran du fichier n'est qu'un exemplaire de la chose fabriquée
Une interface a une propriété que le reste du pilier n'a pas : elle est redessinée par une machine à chaque ouverture, à partir d'un contenu qui n'était pas dans le fichier, à une largeur que vous n'avez pas choisie. Une affiche est finie. Un écran est un jeu d'instructions qui seront exécutées plus tard par quelque chose qui n'a aucun jugement, et chaque décision laissée implicite devient la décision de cette machine.
D'où six sujets en dessous qui ne sont pas six styles d'écran mais six sortes d'instruction. À quoi la chose ressemble est le design visuel. De quoi elle est faite est les composants. Comment s'appellent les valeurs et qui a le droit de les changer est le design system. Ce qui se produit à une largeur que vous n'avez jamais ouverte est le responsive. Ce qui bouge, et ce que le mouvement prétend, est l'animation d'interface. Et ce qu'il faut écrire parce que la machine ne peut pas le deviner est la remise aux développeurs.
Quatre règles, avec leurs valeurs
Ajuster au contenu pour le bouton, remplir le conteneur pour la carte. Ces deux réglages décident qui gagne une discussion de largeur : le bouton demande exactement la place qu'il faut à son libellé, la carte prend celle que la colonne lui donne. Inversez-les et le bouton s'étire sur toute la carte pendant que la carte se réduit à la largeur de son mot le plus long, ce qui est la chose la plus courante à voir dans un premier fichier en auto layout.
Dessinez les quatre états : normal, survol, focus, désactivé. C'est la règle la plus facile à sauter parce que le fichier a l'air complet sans elle. Le bouton de La Cale est désactivé sur les trois créneaux déjà pris, et si le fichier ne montre jamais cet état, quelqu'un l'invente pendant la construction, en général en baissant l'opacité, ce qui donne un bouton qui échoue au contraste et un adhérent qui tape dessus plusieurs fois. Le survol ne suffit pas non plus, puisque la moitié des gens touchent cet écran du doigt et n'ont pas de survol du tout.
Un anneau de focus de 2 px d'épaisseur, décalé de 2 px. Le décalage est ce qui garde l'anneau lisible sur un bouton plein, et c'est aussi la chose la plus souvent supprimée d'une interface : le navigateur en dessine un gratuitement et on l'enlève parce qu'on le trouve laid, ce qui transforme un clavier fonctionnel en curseur invisible. Puis la taille, qui fait deux nombres et non un : 44 par 44 pour un pouce, 24 par 24 comme plancher. Le bouton de La Cale passe les deux par accident, à cause de ses marges, et c'est la façon habituelle dont une bonne valeur arrive, par une règle appliquée sans exception plutôt que par quelqu'un qui a lu une spécification.
En français, une chaîne est un problème de grammaire
Un libellé français est plus long que sa source anglaise, et ce sujet-là est réglé ailleurs. Ce qui n'est réglé nulle part, c'est que le français oblige une interface à trancher trois questions que l'anglais ne pose jamais, et qu'aucune des trois ne se voit tant que le texte n'est pas dedans.
La première est l'accord. Le message de fin de réservation dit Vous êtes inscrit ou Vous êtes inscrite, et la machine ne sait pas laquelle des deux, parce que le formulaire n'a jamais demandé et n'a aucune raison de demander. La parenthèse, inscrit(e), est ce qu'on écrit quand on n'a pas décidé, et elle se lit mal à voix haute par un lecteur d'écran. La sortie est ailleurs : écrivez la confirmation en nom, pas en participe accordé. Inscription enregistrée ne s'accorde avec personne, tient dans la même largeur, et se traduit dans les deux sens sans rien perdre.
- Le nombre : 0 résultat au singulier, 2 résultats au pluriel, là où l'anglais met un pluriel dès zéro.
- Le tutoiement : le produit en choisit un et ne mélange jamais, y compris dans les messages d'erreur, qui sont presque toujours écrits plus tard et par quelqu'un d'autre.
- L'accord : un participe dans une interface est une question posée à l'usager sur son genre, alors reformulez-le en nom.
La règle du zéro est la moins connue et la plus facile à vérifier : sur l'écran de La Cale, un samedi où tout est pris, le compteur doit afficher 0 créneau disponible et non 0 créneaux. Une chaîne écrite en anglais puis traduite met le pluriel, parce qu'elle a été écrite dans une langue qui le met.
Un bouton
Quatre pièces, et trois manquent à la plupart des bibliothèques
Un composant n'est pas un dessin qu'on a rangé. C'est un dessin plus trois choses qui décident de ce qui arrive quand le fichier est ouvert par une machine.
- 01La règle de dispositionAuto layout horizontal, écart 8, marges internes 12 et 20, ajuster au contenu
- 02Les étatsNormal, survol, focus et désactivé, dessinés en variantes plutôt que décrits
- 03Les valeurs qu'il litDes tokens nommés, pour qu'un thème sombre change ce que veut dire surface-haute et rien d'autre
- 04Le nom sous lequel il est rangéCe qu'il fait, dans les mots que l'équipe emploie déjà pour le demander
Retirez-en une et les trois autres cessent de fonctionner. Un composant sans états est une image ; sans tokens, c'est une copie divergente du système ; sous le mauvais nom, il est refait le mois suivant par quelqu'un qui ne l'a pas trouvé.
Le décrochage est le plan de travail, et il a une seconde moitié
Les gens apprennent le plan de travail et n'apprennent jamais le système. Ici cela s'appelle auto layout et composants, et qui les saute peut dessiner n'importe quel écran sans pouvoir en modifier aucun. La preuve n'arrive pas au premier créneau, elle arrive au douzième : douze cartes faites à la main sont douze modifications chaque fois que le format d'heure change, et deux d'entre elles seront fausses ensuite parce qu'il était tard.
La seconde moitié du décrochage attrape ceux qui ont bien appris les composants, et elle est plus discrète. Un composant qui n'a qu'une apparence est une image rangée proprement. Les variantes sont l'intérêt : le même bouton en normal, survol, focus et désactivé, pour que les états soient des décisions dans le fichier plutôt que des suppositions dans le code. Une bibliothèque de quarante composants dessinés chacun dans un seul état n'a pas résolu le problème, elle l'a classé.
L'ordre, ici, va à rebours de ce qu'il semble devoir être. Dessinez le premier écran à la main, tout en rectangles. Dessinez le deuxième à la main aussi, et remarquez que vous avez fait le même bouton deux fois et légèrement autrement. Revenez seulement alors sur le premier pour remplacer les deux par un composant, moment où le classeur devient une économie. Le troisième écran ne coûte plus rien, et le douzième non plus. Partir d'une bibliothèque faite par quelqu'un d'autre vous enseigne ses décisions sans aucune de ses raisons, et produit un écran entièrement conforme au système qui ne répond à la question de personne, question qui appartient à l'UX design et se règle avant tout ceci. Reste le nommage, dernier de l'ordre et seul garant que le système passe l'année : nommez le token par ce qu'il fait, pas par sa couleur. Une valeur appelée surface-haute peut aller du presque blanc au presque noir quand un thème sombre arrive ; une valeur appelée gris-100 doit être renommée ou mentir, et dans les faits elle ment.
Ce qu'on ouvre en 2026, et le bandeau que la CNIL regarde
Figma tient la place par défaut depuis 2019, quand il l'a prise à Sketch en tournant dans un navigateur et en laissant plusieurs personnes dans le même fichier. L'offre gratuite est réelle et toutes les valeurs de cette page s'y règlent ; Figma traite le programme lui-même, et la part qui vaut d'être apprise est une liste plus courte que ne le laissent croire ses menus. Penpot est l'alternative à nommer plutôt que celle que personne n'emploie : libre, hébergeable chez soi, et la réponse quand les fichiers n'ont pas le droit de vivre sur le serveur d'un autre, ce qui pour une collectivité ou un hôpital est une contrainte et non une préférence.
C'est à la remise que le prix mord. Le Dev Mode de Figma est arrivé en 2023 et a remplacé le panneau Inspect gratuit où les développeurs lisaient les spécifications ; c'est un siège payant et non une part de l'offre gratuite. Les conditions ont bougé plus d'une fois depuis, donc vérifiez le tarif le jour même plutôt que sur la copie d'écran d'un tutoriel, et sachez en montant un projet que la personne qui reçoit votre fichier n'a peut-être pas la vue autour de laquelle vous avez organisé la remise.
Un composant français de plus n'existe sur aucune page anglaise et se dessine faux presque partout : le bandeau de consentement. En 2026 la CNIL demande que refuser un dépôt de cookies soit aussi simple que l'accepter, ce qui est une contrainte de dessin avant d'être une contrainte juridique. Deux boutons de même niveau, au même endroit, dans les mêmes états, avec le même nombre de gestes derrière chacun. Un bandeau où accepter est un bouton plein et refuser un lien gris en bas a répondu à la question par sa mise en page.
Ce qu'aucun de ces outils ne règle, c'est ce que l'écran doit donner à sentir pendant qu'il change, la seule partie d'une interface qui ne se dessine pas à l'arrêt. Une carte qui apparaît n'affirme pas la même chose qu'une carte qui glisse depuis l'endroit où le doigt s'est posé, et aucune des deux n'est décorative dès que quelqu'un se sert de la chose vite. C'est la question suivante, et ses valeurs sont des durées et des courbes plutôt que des pixels. Les règles qui tiennent tout le reste, les écarts et les différences sans lesquels aucun de ces composants n'est lisible, sont les bases du design, et elles ne changent pas quand l'écran se redessine ; elles sont d'ailleurs ce que les sept sujets du design ont en commun.