1:"$Sreact.fragment"
2:I[50560,["/_next/static/chunks/644de0c51988d865.js"],"ThemeProvider"]
3:I[89613,["/_next/static/chunks/644de0c51988d865.js"],"default"]
4:I[36573,["/_next/static/chunks/567c5dc074a83024.js","/_next/static/chunks/5aaa37a6db4a1042.js"],"default"]
5:I[57014,["/_next/static/chunks/567c5dc074a83024.js","/_next/static/chunks/5aaa37a6db4a1042.js"],"default"]
6:I[51108,["/_next/static/chunks/644de0c51988d865.js"],""]
13:I[16929,[],"default"]
:HL["/_next/static/chunks/4b28f11c99ed7974.css","style"]
:HL["/_next/static/media/1b99372b3eaef0c8-s.p.758e15a8.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
:HL["/_next/static/media/b6e5b626dbef0d0e-s.p.5c33c2f8.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
0:{"P":null,"b":"Bp0Us4AEwhCjpahVLvQ3V","c":["","blog","design-system-figma"],"q":"","i":false,"f":[[["",{"children":["blog",{"children":[["slug","design-system-figma","d"],{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],[["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/4b28f11c99ed7974.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/chunks/644de0c51988d865.js","async":true,"nonce":"$undefined"}]],["$","html",null,{"lang":"fr","className":"outfit_f43e1242-module__adTzha__variable dynapuff_aefff821-module__nAElMa__variable","suppressHydrationWarning":true,"children":["$","body",null,{"className":"antialiased min-h-screen flex flex-col","children":["$","$L2",null,{"children":[["$","$L3",null,{}],["$","main",null,{"className":"flex-1 pt-16","children":["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}],["$","footer",null,{"className":"mt-24","children":[["$","svg",null,{"viewBox":"0 0 1440 140","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"w-full h-12","preserveAspectRatio":"none","aria-hidden":"true","children":[["$","path",null,{"d":"M0,40 C240,5 480,75 720,40 C960,5 1200,75 1440,40","stroke":"#AEB8FE","strokeWidth":"6","strokeOpacity":"0.55","fill":"none","strokeLinecap":"round"}],["$","path",null,{"d":"M0,70 C240,35 480,105 720,70 C960,35 1200,105 1440,70","stroke":"#ED254E","strokeWidth":"5","strokeOpacity":"0.45","fill":"none","strokeLinecap":"round"}],["$","path",null,{"d":"M0,100 C240,65 480,135 720,100 C960,65 1200,135 1440,100","stroke":"#D6FF79","strokeWidth":"5","strokeOpacity":"0.40","fill":"none","strokeLinecap":"round"}]]}],["$","div",null,{"className":"border-t border-muted bg-surface/50","children":["$","div",null,{"className":"max-w-5xl mx-auto px-6 py-12 sm:py-16","children":[["$","div",null,{"className":"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-8 sm:gap-6","children":[["$","div",null,{"className":"col-span-2 sm:col-span-3 lg:col-span-1","children":[["$","$L6",null,{"href":"/","className":"font-dynapuff text-2xl text-light hover:text-lime transition-colors","children":["asey",["$","span",null,{"className":"text-red","children":"."}]]}],["$","p",null,{"className":"font-outfit text-lavender/60 text-sm mt-3 leading-relaxed","children":["Communication · Design",["$","br",null,{}],"Développement web"]}],["$","div",null,{"className":"flex gap-3 mt-4","children":[["$","a","Instagram",{"href":"https://instagram.com/aseylais","target":"_blank","rel":"noopener noreferrer","aria-label":"Instagram","className":"text-lavender/60 hover:text-[#E1306C] transition-colors","children":["$","svg",null,{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round","className":"w-5 h-5","children":[["$","rect",null,{"x":"2","y":"2","width":"20","height":"20","rx":"5"}],["$","circle",null,{"cx":"12","cy":"12","r":"5"}],["$","circle",null,{"cx":"17.5","cy":"6.5","r":"1.5","fill":"currentColor","stroke":"none"}]]}]}],["$","a","YouTube",{"href":"https://youtube.com/@aseylais","target":"_blank","rel":"noopener noreferrer","aria-label":"YouTube","className":"text-lavender/60 hover:text-[#FF0000] transition-colors","children":"$L7"}],"$L8"]}],"$L9"]}],"$La","$Lb","$Lc","$Ld"]}],"$Le"]}]}]]}]]}]}]}]]}],{"children":["$Lf",{"children":["$L10",{"children":["$L11",{},null,false,false]},null,false,false]},null,false,false]},null,false,false],"$L12",false]],"m":"$undefined","G":["$13",[]],"S":true}
15:I[61063,["/_next/static/chunks/567c5dc074a83024.js","/_next/static/chunks/5aaa37a6db4a1042.js"],"OutletBoundary"]
16:"$Sreact.suspense"
18:I[61063,["/_next/static/chunks/567c5dc074a83024.js","/_next/static/chunks/5aaa37a6db4a1042.js"],"ViewportBoundary"]
1a:I[61063,["/_next/static/chunks/567c5dc074a83024.js","/_next/static/chunks/5aaa37a6db4a1042.js"],"MetadataBoundary"]
7:["$","svg",null,{"viewBox":"0 0 24 24","fill":"currentColor","className":"w-5 h-5","children":["$","path",null,{"d":"M23.498 6.186a2.832 2.832 0 0 0-1.991-2.006C19.685 3.6 12 3.6 12 3.6s-7.685 0-9.507.58A2.832 2.832 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a2.832 2.832 0 0 0 1.991 2.006C4.315 20.4 12 20.4 12 20.4s7.685 0 9.507-.58a2.832 2.832 0 0 0 1.991-2.006C24 15.93 24 12 24 12s0-3.93-.502-5.814ZM9.546 15.569V8.431L15.818 12l-6.272 3.569Z"}]}]
8:["$","a","Twitch",{"href":"https://twitch.tv/aseylais","target":"_blank","rel":"noopener noreferrer","aria-label":"Twitch","className":"text-lavender/60 hover:text-[#9146FF] transition-colors","children":["$","svg",null,{"viewBox":"0 0 24 24","fill":"currentColor","className":"w-5 h-5","children":["$","path",null,{"d":"M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0 1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"}]}]}]
9:["$","p",null,{"className":"font-outfit text-xs text-lavender/50 mt-1.5","children":"@aseylais"}]
a:["$","div",null,{"children":[["$","h3",null,{"className":"font-outfit text-xs tracking-[0.2em] uppercase text-lavender/50 mb-4","children":"Navigation"}],["$","ul",null,{"className":"space-y-2.5","children":[["$","li","/",{"children":["$","$L6",null,{"href":"/","className":"font-outfit text-sm text-lavender/70 hover:text-light transition-colors","children":"Accueil"}]}],["$","li","/a-propos",{"children":["$","$L6",null,{"href":"/a-propos","className":"font-outfit text-sm text-lavender/70 hover:text-light transition-colors","children":"À propos"}]}],["$","li","/formations",{"children":["$","$L6",null,{"href":"/formations","className":"font-outfit text-sm text-lavender/70 hover:text-light transition-colors","children":"Formations"}]}],["$","li","/experiences",{"children":["$","$L6",null,{"href":"/experiences","className":"font-outfit text-sm text-lavender/70 hover:text-light transition-colors","children":"Expériences"}]}],["$","li","/blog",{"children":["$","$L6",null,{"href":"/blog","className":"font-outfit text-sm text-lavender/70 hover:text-light transition-colors","children":"Blog"}]}],["$","li","/contact",{"children":["$","$L6",null,{"href":"/contact","className":"font-outfit text-sm text-lavender/70 hover:text-light transition-colors","children":"Contact"}]}]]}]]}]
b:["$","div",null,{"children":[["$","h3",null,{"className":"font-outfit text-xs tracking-[0.2em] uppercase text-lavender/50 mb-4","children":"Disciplines"}],["$","ul",null,{"className":"space-y-2.5","children":[["$","li","/disciplines/communication",{"children":["$","$L6",null,{"href":"/disciplines/communication","className":"font-outfit text-sm text-lavender/70 hover:text-light transition-colors","children":"Communication"}]}],["$","li","/disciplines/graphisme",{"children":["$","$L6",null,{"href":"/disciplines/graphisme","className":"font-outfit text-sm text-lavender/70 hover:text-light transition-colors","children":"Design graphique"}]}],["$","li","/disciplines/developpement",{"children":["$","$L6",null,{"href":"/disciplines/developpement","className":"font-outfit text-sm text-lavender/70 hover:text-light transition-colors","children":"Développement web"}]}]]}]]}]
c:["$","div",null,{"children":[["$","h3",null,{"className":"font-outfit text-xs tracking-[0.2em] uppercase text-lavender/50 mb-4","children":"Formations"}],["$","ul",null,{"className":"space-y-2.5","children":[["$","li","Master UX Design",{"children":["$","$L6",null,{"href":"/formations","className":"font-outfit text-sm text-lavender/70 hover:text-light transition-colors","children":"Master UX Design"}]}],["$","li","BO3 Création Numérique",{"children":["$","$L6",null,{"href":"/formations","className":"font-outfit text-sm text-lavender/70 hover:text-light transition-colors","children":"BO3 Création Numérique"}]}],["$","li","BTS SIO SLAM",{"children":["$","$L6",null,{"href":"/formations","className":"font-outfit text-sm text-lavender/70 hover:text-light transition-colors","children":"BTS SIO SLAM"}]}]]}]]}]
d:["$","div",null,{"children":[["$","h3",null,{"className":"font-outfit text-xs tracking-[0.2em] uppercase text-lavender/50 mb-4","children":"Expériences"}],["$","ul",null,{"className":"space-y-2.5","children":[["$","li","/experiences/quadra-mobilier",{"children":["$","$L6",null,{"href":"/experiences/quadra-mobilier","className":"font-outfit text-sm text-lavender/70 hover:text-light transition-colors","children":"Quadra Mobilier"}]}],["$","li","/experiences/alternance-maison-squash",{"children":["$","$L6",null,{"href":"/experiences/alternance-maison-squash","className":"font-outfit text-sm text-lavender/70 hover:text-light transition-colors","children":"Maison du Squash"}]}],["$","li","/experiences/stage-yohviral",{"children":["$","$L6",null,{"href":"/experiences/stage-yohviral","className":"font-outfit text-sm text-lavender/70 hover:text-light transition-colors","children":"YohViral"}]}],["$","li","/experiences/minkyung-namiseul",{"children":["$","$L6",null,{"href":"/experiences/minkyung-namiseul","className":"font-outfit text-sm text-lavender/70 hover:text-light transition-colors","children":"MinKyung Namiseul"}]}],["$","li","/experiences",{"children":["$","$L6",null,{"href":"/experiences","className":"font-outfit text-sm text-lavender/70 hover:text-light transition-colors","children":"Tous les projets"}]}]]}]]}]
e:["$","div",null,{"className":"mt-12 pt-6 border-t border-muted flex flex-col sm:flex-row items-center justify-between gap-3","children":[["$","p",null,{"className":"font-outfit text-lavender/40 text-xs","children":"© 2026 Killy Rousseau — Tous droits réservés"}],["$","p",null,{"className":"font-outfit text-lavender/40 text-xs","children":["Fait avec ",["$","span",null,{"className":"text-red","children":"♥"}]," et Next.js"]}]]}]
f:["$","$1","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}]
10:["$","$1","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}]
11:["$","$1","c",{"children":["$L14",null,["$","$L15",null,{"children":["$","$16",null,{"name":"Next.MetadataOutlet","children":"$@17"}]}]]}]
12:["$","$1","h",{"children":[null,["$","$L18",null,{"children":"$L19"}],["$","div",null,{"hidden":true,"children":["$","$L1a",null,{"children":["$","$16",null,{"name":"Next.Metadata","children":"$L1b"}]}]}],["$","meta",null,{"name":"next-size-adjust","content":""}]]}]
:HL["/images/blog/blog-design-system.svg","image"]
14:["$","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\"}"}}],["$","$L6",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,{"ref":"$undefined","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,{"ref":"$undefined","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,{"ref":"$undefined","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,{"ref":"$undefined","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,{"ref":"$undefined","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":["$L1c","$L1d","$L1e","$L1f","$undefined"]}],"Publié le ","8 mars 2026"]}]]}],"$L20","$L21"]}]
1c:["$","path","1cmpym",{"d":"M8 2v4"}]
1d:["$","path","4m81vk",{"d":"M16 2v4"}]
1e:["$","rect","1hopcy",{"width":"18","height":"18","x":"3","y":"4","rx":"2"}]
1f:["$","path","8toen8",{"d":"M3 10h18"}]
20:["$","div",null,{"className":"w-16 h-px bg-primary mb-10"}]
21:["$","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":["$L22","$L23"]}],"$L24","$L25","$L26","$L27"]}],"$L28","$L29","$L2a","$L2b","$L2c","$L2d","$L2e","$L2f","$L30","$L31","$L32","$L33","$L34","$L35","$L36"]}]
22:["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}]
23:["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>H2</strong> : 24-36px — titres de section"}}]
24:["$","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"}}]]}]
25:["$","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"}}]]}]
26:["$","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"}}]]}]
27:["$","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"}}]]}]
28:["$","h3","13",{"className":"font-dynapuff text-xl text-lavender mt-6 mb-1","children":"Espacements"}]
29:["$","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>"}}]
2a:["$","h2","15",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"Étape 2 : Les composants de base"}]
2b:["$","p","16",{"dangerouslySetInnerHTML":{"__html":"Commencez par les composants les plus utilisés :"}}]
2c:["$","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"}}]]}]]}]
2d:["$","h3","18",{"className":"font-dynapuff text-xl text-lavender mt-6 mb-1","children":"Bonnes pratiques sur Figma"}]
2e:["$","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"}}]]}]]}]
2f:["$","h2","20",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"Étape 3 : Les patterns"}]
30:["$","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"}}]
31:["$","h2","22",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"Étape 4 : Documentation"}]
32:["$","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)"}}]
33:["$","h2","24",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"FAQ"}]
34:["$","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."}}]
35:["$","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."}}]
36:["$","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."}}]
19:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
37:I[73437,["/_next/static/chunks/567c5dc074a83024.js","/_next/static/chunks/5aaa37a6db4a1042.js"],"IconMark"]
17:null
1b:[["$","title","0",{"children":"Créer un design system sur Figma : le guide pratique · Killy Rousseau"}],["$","meta","1",{"name":"description","content":"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."}],["$","meta","2",{"name":"author","content":"Killy Rousseau"}],["$","meta","3",{"name":"keywords","content":"Design,Figma,UI/UX"}],["$","meta","4",{"property":"og:title","content":"Créer un design system sur Figma : le guide pratique"}],["$","meta","5",{"property":"og:description","content":"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."}],["$","meta","6",{"property":"og:image","content":"https://aseylais.fr/images/blog/blog-design-system.svg"}],["$","meta","7",{"property":"og:image:alt","content":"Créer un design system sur Figma : le guide pratique"}],["$","meta","8",{"property":"og:type","content":"article"}],["$","meta","9",{"property":"article:published_time","content":"2026-03-08"}],["$","meta","10",{"property":"article:author","content":"Killy Rousseau"}],["$","meta","11",{"property":"article:tag","content":"Design"}],["$","meta","12",{"property":"article:tag","content":"Figma"}],["$","meta","13",{"property":"article:tag","content":"UI/UX"}],["$","meta","14",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","15",{"name":"twitter:title","content":"Créer un design system sur Figma : le guide pratique"}],["$","meta","16",{"name":"twitter:description","content":"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."}],["$","meta","17",{"name":"twitter:image","content":"https://aseylais.fr/images/blog/blog-design-system.svg"}],["$","link","18",{"rel":"icon","href":"/favicon.ico?favicon.0b3bf435.ico","sizes":"256x256","type":"image/x-icon"}],["$","$L37","19",{}]]