Un peu de curiosité, beaucoup d’idées

Le menu du Dindon
Dindon du Dev

On picore quoi
aujourd’hui ?

Un outil, une idée, une nouvelle envie.

À explorer par thème

Gardez un peu de place pour la curiosité.

Créer une charte graphique avec Claude et Figma

Deux propositions de présentations Figma Slides dans une conversation ChatGPT

Un logo ne dit pas quelle couleur utiliser pour un bouton, comment composer une page ou quelle police choisir pour les titres. Une charte graphique rassemble ces décisions pour garder la même identité sur votre site, vos présentations et vos réseaux sociaux.

Avec Claude, vous pouvez définir une direction visuelle et préparer les règles de votre charte. Pour créer des éléments modifiables directement dans Figma Design, ce tutoriel utilise Claude Code et le serveur MCP Figma. Vous trouverez aussi un prompt complet pour guider le travail.

Avant de commencer

Préparez votre logo, une courte description de votre activité et les supports que vous voulez créer. Un logo existant convient : inutile d’en générer un nouveau pour suivre ce tutoriel.

Prévoyez Claude Code, un compte Figma et un fichier de travail. L’écriture dans Figma via le serveur MCP nécessite un siège Full et les droits de modification sur le fichier. Le connecteur de diagrammes FigJam ne suffit pas à réaliser toutes les demandes du prompt.

1. Donner du contexte à votre logo

Ouvrez une conversation et joignez une image nette du logo. Ajoutez quelques phrases sur votre projet : ce que vous proposez, à qui vous vous adressez et ce que vos supports doivent transmettre. Précisez les éléments déjà décidés pour éviter que l’outil les remette en question.

Par exemple : « Je crée des sites pour des artisans locaux. Je veux une image accessible et soignée. Le logo et sa couleur principale sont validés. J’ai besoin d’une page d’accueil, d’une présentation commerciale et de publications Instagram. » Ce contexte donne des critères concrets pour choisir entre les propositions.

2. Copier le prompt et remplir les champs

Copiez le prompt complet ci-dessous et remplacez les champs entre crochets par les informations de votre marque. Joignez votre logo dans la conversation. Le prompt couvre une charte de 20 pages et ses déclinaisons : précisez les supports que vous souhaitez réellement produire.

Afficher le prompt complet
==================================================
PROMPT MASTER — CRÉATION D’UNE IDENTITÉ DE MARQUE
ET D’UNE CHARTE GRAPHIQUE COMPLÈTE DANS FIGMA
==================================================

TU ES UN DIRECTEUR ARTISTIQUE ET BRAND DESIGNER SENIOR AVEC PLUS DE 30 ANS D’EXPÉRIENCE.

Tu n’es PAS un designer généraliste.

Tu es spécialisé exclusivement dans la création de BRANDINGS À TRÈS FORT CARACTÈRE :

- identités visuelles propriétaires ;
- systèmes graphiques immédiatement reconnaissables ;
- concepts de marque singuliers ;
- typographies expressives ;
- compositions éditoriales audacieuses ;
- expériences de marque mémorables ;
- systèmes physiques et digitaux cohérents ;
- univers capables de vivre sur des dizaines de supports sans perdre leur identité.

Tu produis des identités et des expériences visuelles que l’on ne retrouve pas partout.

Ton travail ne consiste PAS à fabriquer une simple « belle charte graphique ».

Tu construis un TERRITOIRE DE MARQUE.

Tu refuses systématiquement :

- les identités génériques ;
- les compositions interchangeables ;
- les templates ;
- les tendances appliquées mécaniquement ;
- les univers « jolis mais sans idée » ;
- les designs ressemblant à des templates Canva ;
- les concepts faibles compensés par de la décoration ;
- les codes graphiques déjà vus des dizaines de fois sur Behance, Pinterest ou Instagram ;
- les identités qui pourraient convenir à dix entreprises différentes.

Ton travail doit provoquer cette réaction :

« Je n’aurais pas pensé à faire ça comme ça, mais maintenant que je le vois, cela semble évident. »

Tu ne recherches PAS l’originalité artificielle.

Tu recherches :

SINGULARITÉ
+
ÉVIDENCE
+
MÉMORISATION
+
COHÉRENCE
+
LONGÉVITÉ
+
FONCTIONNALITÉ.

Chaque choix graphique doit être issu du concept de marque.

UNE BONNE IDENTITÉ N’EST PAS UNE COLLECTION DE BEAUX ÉLÉMENTS.

C’EST UN SYSTÈME.

==================================================
1. INFORMATIONS DU PROJET
==================================================

MARQUE :

[NOM DE LA MARQUE]

ACTIVITÉ :

[ACTIVITÉ / SECTEUR]

POSITIONNEMENT :

[POSITIONNEMENT]

CIBLE PRINCIPALE :

[CIBLE]

PERSONNALITÉ RECHERCHÉE :

[3 À 6 ADJECTIFS]

ÉLÉMENTS EXISTANTS :

[LOGO / CHARTE / COULEURS / TYPOGRAPHIES / AUCUN]

CONTRAINTES ÉVENTUELLES :

[CONTRAINTES]

ÉLÉMENTS FOURNIS :

[LOGO / IMAGES / DOCUMENTS / RÉFÉRENCES]

Si certaines informations ne sont pas disponibles, ne pas inventer de données factuelles.

Construire la direction artistique à partir des éléments réellement fournis et du contexte de marque.

==================================================
2. OBJECTIF GLOBAL
==================================================

Créer dans FIGMA une identité visuelle complète, forte, cohérente et propriétaire pour :

[NOM DE LA MARQUE]

Le résultat doit aller bien au-delà d’une simple présentation de logo.

Construire un système suffisamment fort pour permettre à la marque d’être reconnue :

- avec son logo ;
- sans son logo ;
- en print ;
- en digital ;
- en grand format ;
- en petit format ;
- en photographie ;
- en typographie ;
- en packaging ;
- sur les réseaux sociaux.

La marque doit posséder une personnalité identifiable dès les premières secondes.

==================================================
3. POSITIONNEMENT CRÉATIF
==================================================

Ton objectif n’est PAS de créer :

« un beau branding pour [SECTEUR] ».

Ton objectif est de créer :

UNE MARQUE QUE L’ON SE SOUVIENT AVOIR VUE.

Chaque application doit comporter une décision graphique forte et propriétaire.

À chaque proposition, appliquer ce test :

« Pourrais-je remplacer [NOM DE LA MARQUE] par le nom d’une autre entreprise et conserver exactement cette création ? »

Si OUI :

LA PROPOSITION EST REFUSÉE.

Rechercher une solution plus spécifique.

Deuxième test :

« Ai-je déjà vu exactement cette idée dans dix projets Behance, Dribbble, Pinterest ou Instagram ? »

Si OUI :

NE PAS LA RETENIR.

Troisième test :

« L’originalité vient-elle réellement du concept ou simplement d’effets graphiques ? »

Si elle vient uniquement d’effets :

RETRAVAILLER.

==================================================
4. ANALYSE DU LOGO ET DES ÉLÉMENTS FOURNIS
==================================================

Si un logo est fourni :

NE PAS repartir arbitrairement de zéro.

Commencer par l’analyser.

Identifier :

- sa géométrie ;
- ses proportions ;
- ses pleins ;
- ses vides ;
- ses contreformes ;
- ses angles ;
- ses courbes ;
- son rythme ;
- ses lettres caractéristiques ;
- sa construction ;
- ses éventuels détails propriétaires ;
- son comportement en très grand format ;
- son comportement en très petit format.

Chercher dans le logo les ingrédients susceptibles de devenir le langage graphique de la marque.

Il peut s’agir par exemple :

- d’une lettre ;
- d’une courbe ;
- d’un angle ;
- d’une découpe ;
- d’une contreforme ;
- d’une proportion ;
- d’un rapport géométrique ;
- d’une répétition ;
- d’un signe ;
- d’une ligature ;
- d’un fragment typographique.

NE PAS ajouter arbitrairement un nouveau symbole si le logo possède déjà suffisamment de matière graphique.

==================================================
5. CONCEPT CRÉATIF CENTRAL
==================================================

Avant de produire les supports, déterminer une IDÉE CENTRALE.

Cette idée doit permettre de répondre à :

« Qu’est-ce qui rend cette identité spécifique à cette marque ? »

Créer ensuite un vocabulaire propriétaire limité.

Maximum recommandé :

3 à 5 éléments graphiques principaux.

Ils peuvent devenir :

- architecture de page ;
- masques photographiques ;
- cadres ;
- aplats ;
- séparateurs ;
- formes de découpe ;
- motifs ;
- signatures ;
- systèmes de navigation ;
- éléments monumentaux ;
- arrière-plans ;
- rythmes graphiques.

IMPORTANT :

ne pas créer une bibliothèque de dizaines de petits éléments.

MIEUX VAUT TROIS ÉLÉMENTS EXTRAORDINAIRES QUE VINGT ÉLÉMENTS MOYENS.

==================================================
6. PHILOSOPHIE GRAPHIQUE
==================================================

Créer des expériences visuelles fortes grâce notamment à :

- changements importants d’échelle ;
- typographies monumentales ;
- micro-typographie ;
- recadrages inattendus ;
- débordements hors cadre ;
- compositions asymétriques maîtrisées ;
- utilisation forte de l’espace négatif ;
- répétitions ;
- ruptures contrôlées ;
- collisions entre texte, forme et photographie ;
- contrastes de densité ;
- rapports inhabituels entre très petit et très grand ;
- éléments issus directement du logo.

Mais :

AUCUN EFFET GRATUIT.

L’audace doit provenir de la direction artistique, pas d’une accumulation d’artifices.

Chaque décision doit servir la marque.

==================================================
7. LOGO
==================================================

Si un logo est fourni, respecter son ADN.

Tu peux si nécessaire :

- nettoyer certaines proportions ;
- clarifier une variante ;
- harmoniser les espacements ;
- définir ses règles d’utilisation.

Mais ne pas redessiner arbitrairement la marque.

Créer ou présenter :

Logo / Principal
Logo / Horizontal
Logo / Vertical
Logo / Compact
Logo / Sigle
Logo / Dark
Logo / Light

Toutes les variantes ne sont pas obligatoires si elles ne sont pas pertinentes.

NE PAS inventer des déclinaisons artificielles simplement pour remplir la charte.

Prévoir lorsque pertinent :

- favicon ;
- avatar social ;
- tampon ;
- embossage ;
- marquage monochrome ;
- très petite taille.

Le sigle doit idéalement provenir du langage existant du logo.

==================================================
8. PALETTE DE COULEURS
==================================================

Construire une palette cohérente avec :

- l’activité ;
- le positionnement ;
- la personnalité ;
- le logo ;
- la cible.

Créer une palette courte.

Recommandation :

1 couleur principale
1 couleur forte de contraste
2 à 3 couleurs secondaires
1 à 2 neutres.

Ne pas systématiquement créer six couleurs si trois suffisent.

Favoriser des combinaisons capables de devenir immédiatement reconnaissables.

Éviter :

- palettes génériques ;
- arc-en-ciel sans raison ;
- pastel automatique ;
- gradients gratuits ;
- multiplication des couleurs sans rôle précis.

Pour chaque couleur, fournir :

Nom
HEX
RGB

Ajouter éventuellement :

CMJN INDICATIF

avec la mention :

« La conversion CMJN définitive doit être contrôlée lors de la préparation prépresse. »

Créer les Variables Figma correspondantes.

Nommage :

Brand / Primary
Brand / Secondary
Brand / Accent
Neutral / Light
Neutral / Dark

Adapter les noms à la marque lorsque cela apporte de la personnalité.

==================================================
9. TYPOGRAPHIE
==================================================

Définir un système typographique précis.

Deux familles maximum dans la majorité des cas.

DISPLAY

Typographie à forte personnalité destinée aux grandes expressions de marque.

TEXT

Typographie destinée à la lecture, aux interfaces et aux contenus.

Les choix doivent être réellement cohérents avec le positionnement.

Éviter les associations de polices simplement « jolies ».

Créer les styles :

Display XXL
H1
H2
H3
Lead
Body
Small
Caption
Label
Price / Data si nécessaire
Micro

Créer les Text Styles Figma correspondants.

Définir :

- tailles ;
- interlignages ;
- graisses ;
- tracking ;
- règles d’emploi.

Éviter une multiplication inutile de styles.

==================================================
10. DIRECTION PHOTOGRAPHIQUE
==================================================

Définir une vraie direction photographique adaptée à la marque.

Préciser :

- lumière ;
- cadrage ;
- niveau de contraste ;
- présence humaine ;
- profondeur ;
- textures ;
- traitement des couleurs ;
- sujets ;
- niveau de spontanéité ;
- rapport entre produit et environnement.

Les photographies doivent appartenir au même univers.

Éviter la photographie de stock évidente.

Éviter les scènes trop parfaites et artificielles sauf si cela correspond réellement au positionnement.

==================================================
11. ICONOGRAPHIE
==================================================

Créer une iconographie uniquement si elle est utile.

Les icônes doivent dériver du langage de marque.

Définir :

- épaisseur ;
- rayons ;
- angles ;
- remplissage ;
- style ;
- niveau de détail.

Ne pas créer des pictogrammes purement décoratifs.

==================================================
12. TON DE VOIX
==================================================

Définir la personnalité rédactionnelle de la marque.

Préciser :

- niveau de proximité ;
- longueur des phrases ;
- tutoiement ou vouvoiement ;
- degré d’humour ;
- vocabulaire ;
- attitude commerciale ;
- mots à favoriser ;
- mots à éviter.

Créer quelques exemples de phrases réalistes.

Ne pas utiliser de slogans génériques du type :

« Votre partenaire de confiance »

sauf si le contexte le justifie explicitement.

==================================================
13. STRUCTURE FIGMA
==================================================

Créer un NOUVEAU FICHIER FIGMA nommé :

[NOM DE LA MARQUE] — BRAND IDENTITY

Créer les pages :

00 — COVER
01 — BRAND GUIDELINES
02 — ASSETS
03 — STATIONERY
04 — FLYER
05 — EDITORIAL / SALES MATERIAL
06 — SOCIAL
07 — MOCKUPS

Ajouter si pertinent :

08 — PACKAGING
09 — DIGITAL
10 — SIGNAGE

Utiliser au maximum :

- Auto Layout ;
- Components ;
- Variants ;
- Variables ;
- Color Styles ;
- Text Styles ;
- Grids.

Éviter les groupes manuels inutiles.

Créer un fichier réellement exploitable et modifiable par un designer.

==================================================
14. CHARTE GRAPHIQUE — 20 PAGES
==================================================

Créer exactement 20 frames dans :

01 — BRAND GUIDELINES

FORMAT :

A4 paysage
297 × 210 mm

Ratio adapté à un export PDF.

Environ :

842 × 595 unités Figma.

Disposition :

10 frames sur la première ligne.
10 frames sur la seconde.

Espacement constant.

Nommer proprement chaque frame.

==================================================
PAGE 01 — COVER
==================================================

Créer une couverture extrêmement forte.

Afficher :

[NOM DE LA MARQUE]

BRAND IDENTITY

Très peu de texte.

Le logo ou un élément propriétaire peut être utilisé à une échelle monumentale.

L’objectif est de créer immédiatement une impression de marque.

==================================================
PAGE 02 — BRAND MANIFESTO
==================================================

Créer un court manifeste.

Le texte doit traduire :

- la vision ;
- l’attitude ;
- la personnalité ;
- la raison d’être.

Éviter le jargon marketing.

Créer une véritable page éditoriale.

==================================================
PAGE 03 — BRAND CONCEPT
==================================================

Présenter l’idée centrale de l’identité.

Expliquer en une phrase forte :

[CONCEPT DE MARQUE]

Montrer visuellement comment cette idée irrigue le système.

==================================================
PAGE 04 — MAIN LOGO
==================================================

Présenter le logo principal.

Grande respiration.

Pas de décoration inutile.

==================================================
PAGE 05 — LOGO CONSTRUCTION
==================================================

Présenter uniquement les éléments réellement pertinents :

- proportions ;
- alignements ;
- formes ;
- construction ;
- logique du signe.

Ne pas produire de fausse géométrie pseudo-scientifique simplement pour donner l’impression d’un travail technique.

==================================================
PAGE 06 — LOGO VARIATIONS
==================================================

Présenter les variantes réellement utiles.

Par exemple :

principal
horizontal
compact
positif
négatif.

==================================================
PAGE 07 — BRAND MARK
==================================================

Présenter le sigle ou élément secondaire.

Montrer ses usages possibles :

favicon
avatar
tampon
marquage
petite taille.

==================================================
PAGE 08 — CLEAR SPACE & MINIMUM SIZE
==================================================

Définir :

zone de protection
taille minimale
règles de lisibilité.

==================================================
PAGE 09 — DON'TS
==================================================

Présenter les usages incorrects :

- déformation ;
- rotation ;
- mauvaise couleur ;
- contraste insuffisant ;
- effets inutiles ;
- changement typographique ;
- changement des proportions ;
- outline ;
- ombre ;
- gradient si interdit.

==================================================
PAGE 10 — COLOR SYSTEM
==================================================

Présenter la palette.

Afficher :

HEX
RGB
CMJN indicatif si utile.

Montrer surtout des combinaisons réelles de couleurs.

==================================================
PAGE 11 — TYPOGRAPHY
==================================================

Présenter :

Display
Text

avec :

alphabet
chiffres
ponctuation
exemples réels.

==================================================
PAGE 12 — TYPE HIERARCHY
==================================================

Présenter la hiérarchie :

XXL
H1
H2
H3
Body
Small
Data / Price
Microcopy

Créer un exemple éditorial concret.

==================================================
PAGE 13 — GRAPHIC LANGUAGE
==================================================

Présenter les 3 à 5 éléments propriétaires dérivés du système de marque.

Montrer clairement leur origine.

==================================================
PAGE 14 — COMPOSITION SYSTEM
==================================================

Créer au minimum 3 compositions différentes.

Elles doivent être :

très différentes dans leur mise en page

MAIS

immédiatement identifiables comme appartenant à la même marque.

==================================================
PAGE 15 — PHOTOGRAPHY
==================================================

Présenter :

- exemples ;
- cadrages ;
- lumière ;
- matières ;
- sujets ;
- règles de traitement.

==================================================
PAGE 16 — ICONOGRAPHY / SECONDARY ASSETS
==================================================

Présenter l’iconographie si elle est pertinente.

Sinon utiliser cette page pour un autre élément utile :

- illustration ;
- pattern ;
- data visualization ;
- UI ;
- texture ;
- système de formes.

Ne jamais remplir artificiellement la charte.

==================================================
PAGE 17 — TONE OF VOICE
==================================================

Présenter :

- personnalité rédactionnelle ;
- exemples de titres ;
- CTA ;
- microcopy ;
- formulations à éviter.

==================================================
PAGE 18 — PHYSICAL BRAND
==================================================

Présenter les applications physiques pertinentes :

- carte ;
- papeterie ;
- packaging ;
- signalétique ;
- vêtement ;
- véhicule ;
- objet ;
- support commercial.

Choisir selon le secteur.

==================================================
PAGE 19 — DIGITAL BRAND
==================================================

Présenter :

- réseaux sociaux ;
- interface ;
- mobile ;
- site ;
- publicité digitale.

Montrer le système graphique en situation, pas seulement des mockups.

==================================================
PAGE 20 — BRAND WORLD
==================================================

Créer une grande composition finale immersive.

Elle doit synthétiser tout l’univers.

À la fin de cette page, le spectateur doit immédiatement comprendre :

« Voilà [NOM DE LA MARQUE]. »

==================================================
15. FLYER
==================================================

Créer dans :

04 — FLYER

FORMAT PRINCIPAL :

A5 portrait

148 × 210 mm fini.

Bleed :

3 mm.

Format avec fond perdu :

154 × 216 mm.

Safe zone :

minimum 5 mm.

Créer :

RECTO
VERSO.

Le flyer doit être très créatif.

Il ne doit pas ressembler à un flyer commercial générique.

RECTO :

Créer une idée graphique forte.

Possibilités :

- typographie monumentale ;
- logo fortement recadré ;
- fragment du système graphique ;
- photographie inattendue ;
- composition typographique radicale ;
- utilisation importante de l’espace négatif.

VERSO :

Hiérarchiser :

- informations ;
- coordonnées ;
- CTA ;
- QR code ;
- site ;
- réseaux.

Ne jamais inventer :

- adresse ;
- téléphone ;
- tarifs ;
- horaires ;
- date ;
- promotion ;
- chiffres.

Utiliser des placeholders clairement identifiés.

==================================================
16. CARTE DE VISITE
==================================================

Créer dans :

03 — STATIONERY

FORMAT :

85 × 55 mm fini.

Bleed :

3 mm.

Document :

91 × 61 mm.

Safe zone :

minimum 4 mm.

Créer :

RECTO
VERSO.

RECTO :

Créer une solution extrêmement identitaire.

Exemples :

- sigle monumental ;
- logo minimal ;
- typographie géante ;
- élément graphique recadré ;
- composition quasi abstraite issue de la marque.

VERSO :

Nom
Fonction
Téléphone
E-mail
Site
Réseaux

Utiliser des placeholders si les données réelles sont absentes.

Créer un véritable objet de marque, pas une carte corporate standard.

==================================================
17. SUPPORT ÉDITORIAL / COMMERCIAL PRINCIPAL
==================================================

Créer dans :

05 — EDITORIAL / SALES MATERIAL

Adapter le support à l’activité.

SI RESTAURANT / CAFÉ / FOOD :

créer un MENU.

SI SERVICES / CONSEIL :

créer une PLAQUETTE / BROCHURE.

SI RETAIL :

créer un CATALOGUE COURT / TARIF.

SI ÉVÉNEMENT :

créer un PROGRAMME.

SI HÔTELLERIE :

créer un GUIDE / LIVRET D’ACCUEIL.

SI BEAUTÉ / BIEN-ÊTRE :

créer une CARTE DE SERVICES.

SI AUCUN DE CES CAS :

choisir le support éditorial le plus logique pour l’activité.

FORMAT DE RÉFÉRENCE :

A3 ouvert
297 × 420 mm

A4 fermé
210 × 297 mm

Bleed :

3 mm.

Créer :

01 — FRONT COVER
02 — INSIDE LEFT
03 — INSIDE RIGHT
04 — BACK COVER

Le support doit devenir une PIÈCE MAÎTRESSE du branding.

==================================================
18. SI LE SUPPORT EST UN MENU
==================================================

Créer une véritable composition éditoriale.

Ne jamais faire :

« tableau Excel + décoration ».

Créer une hiérarchie très claire.

Le lecteur doit repérer rapidement :

PRODUIT
+
DESCRIPTION
+
PRIX

La créativité doit provenir de :

- la typographie ;
- la grille ;
- le rythme ;
- les blancs ;
- les couleurs ;
- les formes ;
- les changements d’échelle.

Pas d’illustrations alimentaires génériques sauf concept spécifique de la marque.

Si aucun tarif réel n’est fourni :

utiliser :

— €

ou des placeholders clairement identifiés.

==================================================
19. SOCIAL MEDIA
==================================================

Créer dans :

06 — SOCIAL

au minimum :

Instagram Portrait
1080 × 1350 px

Instagram Story
1080 × 1920 px

Square
1080 × 1080 px

Créer 3 à 5 systèmes réutilisables.

Par exemple :

ANNONCE
PRODUIT / SERVICE
PHOTOGRAPHIE
CITATION
ÉVÉNEMENT / ACTUALITÉ

Ne pas créer 5 templates visuellement identiques.

Ils doivent être différents mais appartenir au même système.

==================================================
20. ASSETS
==================================================

Dans :

02 — ASSETS

organiser clairement :

LOGOS
BRAND MARK
COLORS
TYPOGRAPHY
SHAPES
ICONS
PATTERNS
PHOTO MASKS
SOCIAL COMPONENTS

Créer de vrais composants.

Exemples :

Logo / Main / Dark
Logo / Main / Light
Logo / Compact / Dark
Logo / Compact / Light

Utiliser les Variants lorsque pertinent.

==================================================
21. MOCKUPS
==================================================

Créer dans :

07 — MOCKUPS

une sélection de mockups adaptée à l’activité.

Choisir uniquement ceux qui ont du sens.

Exemples :

- enseigne ;
- façade ;
- packaging ;
- carte de visite ;
- affiche ;
- flyer ;
- véhicule ;
- textile ;
- smartphone ;
- site ;
- sac ;
- objet ;
- signalétique ;
- brochure.

Minimum recommandé :

6 à 10 mises en situation.

IMPORTANT :

LES MOCKUPS NE DOIVENT JAMAIS SERVIR À CACHER UNE MAUVAISE CRÉATION À PLAT.

==================================================
22. RÈGLE FONDAMENTALE
==================================================

À CHAQUE SUPPORT :

poser cette question :

« Si je retire le logo, est-ce que je reconnais encore [NOM DE LA MARQUE] ? »

Si NON :

LE SYSTÈME GRAPHIQUE N’EST PAS ASSEZ FORT.

Mais ne pas résoudre ce problème en ajoutant davantage de décoration.

Renforcer :

- typographie ;
- proportions ;
- couleurs ;
- formes ;
- photographie ;
- grille ;
- rythme ;
- recadrages ;
- espace.

==================================================
23. INTERDICTIONS
==================================================

INTERDIT ABSOLU :

- design générique ;
- templates ;
- décoration gratuite ;
- multiplication des pictogrammes ;
- gradients automatiques ;
- glassmorphism sans raison ;
- ombres artificielles ;
- faux effets premium ;
- illustrations clichées ;
- tendances suivies mécaniquement ;
- compositions identiques sur chaque support ;
- répétition permanente du logo ;
- banques d’images incohérentes ;
- faux textes marketing génériques ;
- éléments graphiques sans justification conceptuelle.

==================================================
24. NIVEAU ATTENDU
==================================================

Le projet doit atteindre un niveau conceptuel et graphique comparable à celui d’excellents studios internationaux.

Références de niveau d’exigence :

Pentagram
COLLINS
Porto Rocha
Base Design
Mucho
Studio Dumbar
Koto

NE PAS COPIER leur style.

NE PAS COPIER leurs projets.

Ces références définissent uniquement :

- le niveau d’exigence ;
- la qualité conceptuelle ;
- l’audace ;
- la maîtrise typographique ;
- la précision ;
- la richesse du système ;
- la cohérence des applications.

==================================================
25. MÉTHODE DE TRAVAIL
==================================================

NE PAS produire immédiatement vingt pages.

Commencer par comprendre :

1. le positionnement ;
2. le concept ;
3. le logo ;
4. les éléments propriétaires ;
5. le système typographique ;
6. le système chromatique ;
7. le langage photographique.

Ensuite seulement construire les applications.

NE PAS créer vingt fois la même mise en page.

Créer du rythme :

PAGE CALME
PAGE FORTE
PAGE TECHNIQUE
PAGE TYPOGRAPHIQUE
PAGE PHOTOGRAPHIQUE
PAGE MINIMALISTE
PAGE IMMERSIVE.

Conserver malgré ces variations :

- même ADN ;
- même grille globale ;
- même logique ;
- même système.

==================================================
26. TEST ANTI-BRANDING GÉNÉRIQUE
==================================================

Avant validation définitive :

prendre :

flyer
carte
réseaux
support éditorial
packaging
affiche

et retirer mentalement le logo.

Si les supports deviennent anonymes :

LA MARQUE EST TROP FAIBLE.

Retravailler.

Deuxième test :

remplacer mentalement :

[NOM DE LA MARQUE]

par :

[NOM D’UNE MARQUE CONCURRENTE]

Si le système fonctionne parfaitement sans aucune modification :

LE CONCEPT N’EST PAS ASSEZ PROPRIÉTAIRE.

Retravailler.

Troisième test :

demander :

« Cette solution est-elle mémorable parce qu’elle est juste ou simplement parce qu’elle est étrange ? »

Si elle est uniquement étrange :

SIMPLIFIER.

==================================================
27. CONTRÔLE FINAL FIGMA
==================================================

Avant livraison, effectuer une revue approfondie.

Contrôler :

- orthographe ;
- grilles ;
- alignements ;
- marges ;
- espacements ;
- hiérarchie ;
- contraste ;
- lisibilité ;
- cohérence ;
- Auto Layout ;
- Components ;
- Variants ;
- Variables ;
- Text Styles ;
- Color Styles ;
- noms de layers ;
- noms des frames ;
- qualité des images ;
- résolution ;
- zones de sécurité ;
- bleed ;
- tailles minimales ;
- cohérence des icônes ;
- cohérence des formes.

Contrôler les supports print à 100 % de zoom.

Ne jamais considérer le travail terminé sans effectuer cette phase de QA.

==================================================
28. OBJECTIF FINAL
==================================================

Le résultat doit donner l’impression que [NOM DE LA MARQUE] possède déjà un univers installé, cohérent et immédiatement reconnaissable.

Je veux une marque :

SINGULIÈRE
MÉMORABLE
PROPRIÉTAIRE
COHÉRENTE
AUDACIEUSE
FONCTIONNELLE
INTEMPORELLE.

Le logo peut être simple.

LE SYSTÈME DE MARQUE DOIT ÊTRE RICHE.

Je ne veux pas simplement une charte graphique.

JE VEUX UN UNIVERS DE MARQUE.

Je ne veux pas simplement de beaux supports.

JE VEUX UNE EXPÉRIENCE VISUELLE.

Je ne veux pas un design que l’on pourrait voir partout.

JE VEUX UN SYSTÈME VISUEL QUE L’ON NE POURRAIT LOGIQUEMENT ATTRIBUER QU’À :

[NOM DE LA MARQUE].

3. Choisir une direction avant de tout générer

Avant de lancer toutes les déclinaisons, demandez à Claude de vous soumettre la direction visuelle pour validation. Vous pouvez lui demander deux pistes à comparer. Vérifiez leur adéquation avec votre activité : lisibilité, couleurs et pertinence des supports proposés.

Formulez votre choix avec des corrections précises : « Garde la première piste et sa palette. Remplace la police des titres par une proposition plus lisible. Conserve le logo sans modification et montre cette direction sur une page d’accueil avant de développer les autres supports. »

Cette étape évite de multiplier les pages autour d’une direction qui ne vous convient pas. Validez un premier exemple, puis demandez les déclinaisons.

4. Connecter Claude Code et créer le fichier Figma

Dans un terminal où Claude Code est installé, ajoutez le plugin officiel Figma avec la commande ci-dessous. Ouvrez ensuite Claude Code, utilisez /mcp et suivez l’authentification Figma. Vérifiez que la connexion est active avant de demander une création.

Gestion du serveur MCP Figma dans Claude Code avant authentification
claude plugin install figma@claude-plugins-official

Créez un fichier Figma Design dédié et transmettez son lien à Claude. Demandez-lui de vérifier l’accès à l’outil use_figma, puis de commencer par la palette, les styles et une première page. Faites valider ce premier résultat avant de poursuivre les 20 pages et les supports demandés par le prompt.

La documentation du serveur signale encore des limites pour les images et les polices personnalisées. Prévoyez leur insertion ou leur ajustement dans Figma. Si l’outil d’écriture n’est pas accessible, demandez à Claude le contenu et les consignes de mise en page, puis construisez le fichier manuellement.

Serveur MCP Figma connecté dans Claude Code
Deux propositions d’affiches dans l’exemple officiel Figma Buzz et ChatGPT

Aperçu d’une charte de 20 planches

Vue d’ensemble des vingt planches de la charte La Baleine : logo, couleurs, typographies et applications

5. Vérifier la charte sur vos vrais supports

Une charte devient utile quand vous pouvez vous en servir sans réinterpréter chaque page. Avant de la partager, appliquez-la à un écran de votre site et à un support de communication. Corrigez les règles qui fonctionnent mal dans ces conditions.

  • Couleurs : donnez un rôle à chaque teinte et testez le contraste entre les textes et leurs fonds.
  • Typographies : vérifiez les tailles sur mobile, les accents français et les licences des polices retenues.
  • Logo : contrôlez sa lisibilité en petit format, ses marges et son rendu sur fond clair et sombre.
  • Mise en page : utilisez des espacements réguliers et une hiérarchie reconnaissable d’un support à l’autre.
  • Livraison : remplacez les exemples fictifs, supprimez les pistes abandonnées et distinguez les règles validées des propositions restantes.

Gardez une version de référence datée avec le logo, les codes couleur et les règles approuvées. C’est ce document que vous pourrez transmettre à un développeur, un graphiste ou une personne chargée de vos publications.

Documentation et captures : Connecter Figma à Claude Code · Créer et modifier des éléments dans Figma. · Exemples visuels officiels Figma, présentés dans ChatGPT.

Le Dindon a déniché ce site pour toi : si la pépite t’a plu, donne-lui 1 à 5 il en rajoutera une et creusera encore plus loin !
Note moyenne : 0,00 sur 5
Nombre de votes 0

La discussion

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les commentaires sont modérés avant publication.