1:"$Sreact.fragment"
2:I[51108,["/_next/static/chunks/644de0c51988d865.js"],""]
1f:I[61063,["/_next/static/chunks/567c5dc074a83024.js","/_next/static/chunks/5aaa37a6db4a1042.js"],"OutletBoundary"]
20:"$Sreact.suspense"
:HL["/images/blog/blog-design-system.svg","image"]
0:{"buildId":"Bp0Us4AEwhCjpahVLvQ3V","rsc":["$","$1","c",{"children":[["$","div",null,{"className":"max-w-3xl mx-auto px-6 py-16","children":[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"headline\":\"Créer un design system sur Figma : le guide pratique\",\"description\":\"Un design system bien construit fait gagner des heures de travail et garantit la cohérence visuelle. Voici comment en créer un sur Figma, étape par étape.\",\"datePublished\":\"2026-03-08\",\"author\":{\"@type\":\"Person\",\"name\":\"Killy Rousseau\"},\"keywords\":\"Design, Figma, UI/UX\",\"image\":\"/images/blog/blog-design-system.svg\"}"}}],["$","$L2",null,{"href":"/blog","className":"inline-flex items-center gap-2 text-lavender hover:text-lime text-sm font-outfit transition-colors mb-12","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":15,"height":15,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-left","aria-hidden":"true","children":[["$","path","1l729n",{"d":"m12 19-7-7 7-7"}],["$","path","x3x0zl",{"d":"M19 12H5"}],"$undefined"]}]," Retour au blog"]}],["$","div",null,{"className":"rounded-2xl overflow-hidden mb-10 aspect-video","children":["$","img",null,{"src":"/images/blog/blog-design-system.svg","alt":"Créer un design system sur Figma : le guide pratique","className":"w-full h-full object-cover"}]}],["$","header",null,{"className":"mb-10","children":[["$","div",null,{"className":"flex flex-wrap gap-2 mb-5","children":[["$","span","Design",{"className":"flex items-center gap-1 text-xs font-outfit px-2.5 py-1 rounded-full bg-muted text-lime","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":10,"height":10,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-tag","aria-hidden":"true","children":[["$","path","vktsd0",{"d":"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"}],["$","circle","kqv944",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}],"$undefined"]}],"Design"]}],["$","span","Figma",{"className":"flex items-center gap-1 text-xs font-outfit px-2.5 py-1 rounded-full bg-muted text-lime","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":10,"height":10,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-tag","aria-hidden":"true","children":[["$","path","vktsd0",{"d":"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"}],["$","circle","kqv944",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}],"$undefined"]}],"Figma"]}],["$","span","UI/UX",{"className":"flex items-center gap-1 text-xs font-outfit px-2.5 py-1 rounded-full bg-muted text-lime","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":10,"height":10,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-tag","aria-hidden":"true","children":[["$","path","vktsd0",{"d":"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"}],["$","circle","kqv944",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}],"$undefined"]}],"UI/UX"]}]]}],["$","h1",null,{"className":"font-dynapuff text-4xl sm:text-5xl text-light leading-tight mb-4","children":"Créer un design system sur Figma : le guide pratique"}],["$","p",null,{"className":"flex items-center gap-2 font-outfit text-lavender/60 text-sm","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":13,"height":13,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-calendar","aria-hidden":"true","children":["$L3","$L4","$L5","$L6","$undefined"]}],"Publié le ","8 mars 2026"]}]]}],"$L7","$L8"]}],null,"$L9"]}],"loading":null,"isPartial":false}
3:["$","path","1cmpym",{"d":"M8 2v4"}]
4:["$","path","4m81vk",{"d":"M16 2v4"}]
5:["$","rect","1hopcy",{"width":"18","height":"18","x":"3","y":"4","rx":"2"}]
6:["$","path","8toen8",{"d":"M3 10h18"}]
7:["$","div",null,{"className":"w-16 h-px bg-primary mb-10"}]
8:["$","div",null,{"className":"space-y-5 font-outfit text-light/85 leading-relaxed","children":[["$","p","0",{"dangerouslySetInnerHTML":{"__html":"Un <strong>design system</strong> est une bibliothèque de composants réutilisables, de styles et de règles qui garantissent la cohérence d'un produit digital. Voici comment en créer un efficacement sur Figma."}}],["$","h2","1",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"Qu'est-ce qu'un design system ?"}],["$","p","2",{"dangerouslySetInnerHTML":{"__html":"Un design system est bien plus qu'une simple bibliothèque de composants. C'est un <strong>langage commun</strong> entre designers et développeurs qui comprend : - Des <strong>tokens de design</strong> : couleurs, typographies, espacements, ombres - Des <strong>composants</strong> : boutons, inputs, cartes, modals, navigation - Des <strong>patterns</strong> : formulaires, tableaux, pages types - Une <strong>documentation</strong> : règles d'usage, do's and don'ts"}}],["$","h2","3",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"Pourquoi créer un design system ?"}],["$","ul","4",{"className":"space-y-2 pl-4","children":[["$","li","0",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Cohérence</strong> : toutes les pages et fonctionnalités partagent le même langage visuel"}}]]}],["$","li","1",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Rapidité</strong> : les designers assemblent des composants au lieu de tout dessiner from scratch"}}]]}],["$","li","2",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Collaboration</strong> : les développeurs comprennent exactement quoi implémenter"}}]]}],["$","li","3",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Scalabilité</strong> : le produit peut évoluer sans perdre en qualité"}}]]}]]}],["$","h2","5",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"Étape 1 : Les fondations (Design Tokens)"}],["$","h3","6",{"className":"font-dynapuff text-xl text-lavender mt-6 mb-1","children":"Couleurs"}],["$","p","7",{"dangerouslySetInnerHTML":{"__html":"Structurez votre palette en niveaux :"}}],["$","pre","8",{"className":"bg-surface border border-muted rounded-xl p-4 overflow-x-auto text-sm font-mono text-lime","children":["$","code",null,{"children":"Primary: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900\nSecondary: même logique\nNeutral: grays du blanc au noir\nSemantic: success, warning, error, info"}]}],["$","p","9",{"dangerouslySetInnerHTML":{"__html":"Sur Figma, utilisez les <strong>Variables</strong> (anciennement Styles) pour définir chaque couleur avec son nom sémantique."}}],["$","h3","10",{"className":"font-dynapuff text-xl text-lavender mt-6 mb-1","children":"Typographie"}],["$","p","11",{"dangerouslySetInnerHTML":{"__html":"Définissez une échelle typographique cohérente :"}}],["$","ul","12",{"className":"space-y-2 pl-4","children":[["$","li","0",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Display</strong> : 48-72px — titres de landing page"}}]]}],["$","li","1",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>H1</strong> : 36-48px — titres de page"}}]]}],["$","li","2",{"className":"flex gap-2","children":["$La","$Lb"]}],"$Lc","$Ld","$Le","$Lf"]}],"$L10","$L11","$L12","$L13","$L14","$L15","$L16","$L17","$L18","$L19","$L1a","$L1b","$L1c","$L1d","$L1e"]}]
9:["$","$L1f",null,{"children":["$","$20",null,{"name":"Next.MetadataOutlet","children":"$@21"}]}]
a:["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}]
b:["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>H2</strong> : 24-36px — titres de section"}}]
c:["$","li","3",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>H3</strong> : 20-24px — sous-titres"}}]]}]
d:["$","li","4",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Body</strong> : 16px — texte courant"}}]]}]
e:["$","li","5",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Small</strong> : 14px — labels, captions"}}]]}]
f:["$","li","6",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Tiny</strong> : 12px — badges, tags"}}]]}]
10:["$","h3","13",{"className":"font-dynapuff text-xl text-lavender mt-6 mb-1","children":"Espacements"}]
11:["$","p","14",{"dangerouslySetInnerHTML":{"__html":"Utilisez une échelle de 4px ou 8px : <code class=\"bg-muted text-lime px-1.5 py-0.5 rounded text-sm font-mono\">4 — 8 — 12 — 16 — 24 — 32 — 48 — 64 — 96 — 128</code>"}}]
12:["$","h2","15",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"Étape 2 : Les composants de base"}]
13:["$","p","16",{"dangerouslySetInnerHTML":{"__html":"Commencez par les composants les plus utilisés :"}}]
14:["$","ul","17",{"className":"space-y-2 pl-4","children":[["$","li","0",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Boutons</strong> : primary, secondary, ghost, danger — en 3 tailles (sm, md, lg) avec états (default, hover, active, disabled)"}}]]}],["$","li","1",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Inputs</strong> : text, email, password, textarea — avec labels, placeholders, messages d'erreur"}}]]}],["$","li","2",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Badges/Tags</strong> : pour les statuts, catégories, filtres"}}]]}],["$","li","3",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Cards</strong> : structures réutilisables pour afficher du contenu"}}]]}],["$","li","4",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Navigation</strong> : navbar, sidebar, breadcrumb, tabs"}}]]}]]}]
15:["$","h3","18",{"className":"font-dynapuff text-xl text-lavender mt-6 mb-1","children":"Bonnes pratiques sur Figma"}]
16:["$","ul","19",{"className":"space-y-2 pl-4","children":[["$","li","0",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"Utilisez <strong>Auto Layout</strong> sur tous vos composants"}}]]}],["$","li","1",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"Créez des <strong>variants</strong> pour chaque état et taille"}}]]}],["$","li","2",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"Nommez vos composants avec une convention claire : <code class=\"bg-muted text-lime px-1.5 py-0.5 rounded text-sm font-mono\">Button/Primary/Large</code>"}}]]}],["$","li","3",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"Documentez chaque composant avec une description"}}]]}]]}]
17:["$","h2","20",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"Étape 3 : Les patterns"}]
18:["$","p","21",{"dangerouslySetInnerHTML":{"__html":"Les patterns sont des assemblages de composants pour des cas d'usage récurrents : - <strong>Formulaire de connexion</strong> : inputs + bouton + liens - <strong>Card produit</strong> : image + texte + prix + CTA - <strong>Header</strong> : logo + navigation + actions - <strong>Footer</strong> : colonnes de liens + réseaux sociaux + copyright"}}]
19:["$","h2","22",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"Étape 4 : Documentation"}]
1a:["$","p","23",{"dangerouslySetInnerHTML":{"__html":"Un design system sans documentation est inutile. Pour chaque composant, précisez : - <strong>Quand l'utiliser</strong> (et quand ne pas l'utiliser) - <strong>Les variants disponibles</strong> et leur usage - <strong>Les règles d'accessibilité</strong> (contraste, taille de clic minimale) - <strong>Les specs pour les développeurs</strong> (spacing, comportement responsive)"}}]
1b:["$","h2","24",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"FAQ"}]
1c:["$","p","25",{"dangerouslySetInnerHTML":{"__html":"<strong>Quand faut-il créer un design system ?</strong> Dès que votre produit dépasse 5-10 écrans ou que plusieurs personnes travaillent sur le design. Plus vous commencez tôt, plus vous gagnez du temps."}}]
1d:["$","p","26",{"dangerouslySetInnerHTML":{"__html":"<strong>Design system vs UI Kit : quelle différence ?</strong> Un UI Kit est une collection de composants visuels. Un design system inclut en plus les tokens, les patterns, la documentation et les principes de design. C'est un écosystème complet."}}]
1e:["$","p","27",{"dangerouslySetInnerHTML":{"__html":"<strong>Combien de temps pour créer un design system ?</strong> Un design system de base (tokens + 10-15 composants) peut se créer en 1-2 semaines. Un système complet et documenté demande 1-3 mois selon la complexité du produit."}}]
21:null