Coder sa marque pour rendre le marketing plus autonome
Chaque déclinaison qui repasse par le designer mobilise du temps déjà consacré à la campagne d’origine. Coder sa marque permet de confier les adaptations courantes au marketing, avec des règles que les outils peuvent appliquer. Chez Defacto, j’ai traduit l’identité créée par Klimb en un système de production versionné dans GitHub.
Dans cet article
Repérer les décisions que vous prenez déjà à chaque brief
Une annonce est validée. Il faut maintenant la décliner en format carré, en story et pour une présentation commerciale. Le message reste le même ; pourtant, un designer doit reprendre les proportions, les retours à la ligne et la place du visuel. Ce travail récurrent est un bon candidat à l’automatisation.
Figma conserve les choix visuels. Pour les rendre utilisables par une autre équipe, il faut expliciter leurs conditions d’application : longueur de titre admise, variante de logo, contraste attendu, comportement quand une image manque. Tant que ces décisions restent dans la tête du designer, chaque adaptation dépend de sa disponibilité.
Je recommande de partir d’une campagne déjà approuvée. Les arbitrages sont connus et les livrables permettent de vérifier le résultat. Vous obtenez ainsi un premier périmètre assez précis pour être codé et assez fréquent pour justifier son entretien.
Ce que le cas Defacto rend concret
Sur Defacto, mon travail a consisté à traduire l’identité conçue par Klimb en règles et en modèles de production. Typographies, couleurs, proportions et composants deviennent des éléments réutilisables dans un dépôt GitHub. Les instructions de travail accompagnent les fichiers, au lieu de dépendre uniquement d’une transmission orale.
Le rôle du designer se déplace aussi vers l’architecture du système : reconnaître ce qui doit rester stable, ce qui peut varier et ce qui demande une nouvelle décision. Les compositions deviennent une ressource que l’équipe peut reprendre. L’enjeu est de conserver les choix de l’identité dans les adaptations quotidiennes et de rendre leurs évolutions traçables.
Traduire la marque en quatre couches
Je recommande de distinguer quatre couches, car elles ne changent pas au même rythme. Cette séparation sert autant à la maintenance qu’à la création.
| Couche | Ce qu’elle contient | Exemple d’usage |
|---|---|---|
| Fondations | Couleurs, typographies, espacements, rayons | Appliquer les valeurs autorisées |
| Composants | Boutons, titres, cartes, labels, blocs produit | Assembler des éléments déjà dessinés |
| Compositions | Hiérarchies, grilles et modèles de formats | Adapter une annonce à un support |
| Instructions | Ton, sources, limites et critères de relecture | Décider si le résultat est utilisable |
Les tokens portent des valeurs et des rôles. Ils ne portent pas toute la direction artistique. Une couleur correcte ne rend pas automatiquement une composition juste. Il faut aussi des exemples commentés, des limites de densité et des cas où le modèle doit être abandonné.
Organiser un dépôt que l’équipe peut comprendre
Pour votre propre dépôt, je recommande de séparer les fondations, composants, modèles, exemples et exports. Le document d’entrée doit expliquer le parcours : choisir un modèle, renseigner le contenu, générer un aperçu, faire relire, puis exporter.
Chaque modèle mérite un contrat court : entrées attendues, champs obligatoires, formats disponibles et erreurs à signaler. Pour une annonce produit, cela peut inclure une promesse validée, un bénéfice, une preuve et un appel à l’action. Si la preuve manque, le système signale ce manque ; il ne la remplace pas par un chiffre inventé.
Versionner ces éléments permet de relier une production aux règles utilisées. Lorsqu’une typographie évolue, l’équipe peut identifier les modèles concernés et comparer les rendus. Un historique utile explique pourquoi une règle a changé, pas seulement qu’un fichier a été modifié.
Servir la même référence dans plusieurs outils
Le mécanisme d’accès dépend de l’environnement. Un développeur peut importer une bibliothèque ; un outil de composition peut charger des modèles ; un agent peut lire les règles puis appeler une fonction de création. MCP est une possibilité de connexion, sans être une obligation pour coder une marque.
Figma propose une API Variables pour interagir avec des valeurs réutilisables. Ses conditions d’accès doivent être vérifiées avant de bâtir une synchronisation. Exporter des variables ne remplace cependant ni le choix d’une source de référence ni la résolution des écarts entre une bibliothèque et ses usages.
Mesurer l’autonomie sur une campagne réelle
Confiez un brief complet à une personne du marketing qui n’a pas construit les modèles. Elle doit pouvoir choisir une composition, adapter le contenu et retrouver le fichier éditable. Notez chaque intervention encore nécessaire du designer : choix visuel inédit, donnée manquante, problème de mise en page ou difficulté d’utilisation.
Testez ensuite un titre long, une traduction et un format étroit. Modifiez aussi une règle commune, par exemple une taille de titre, pour vérifier sa propagation. Une bibliothèque qu’on ne sait pas mettre à jour devient rapidement une collection de versions concurrentes.
Comparez le temps jusqu’à validation et le temps de reprise aux campagnes précédentes de même nature. Étendez la bibliothèque lorsque l’équipe sait produire et corriger cette première famille de supports. Les nouvelles directions créatives restent confiées au design ; les déclinaisons éprouvées peuvent rejoindre le parcours autonome.
