[{"data":1,"prerenderedAt":5785},["ShallowReactive",2],{"blog-article-all-locales-article-de-test-accessibilite":3},{"fr":4,"en":3033},{"article":5,"articles":107},{"sys":6,"fields":27},{"space":7,"id":12,"type":13,"createdAt":14,"updatedAt":15,"environment":16,"publishedVersion":20,"revision":21,"contentType":22,"locale":26},{"sys":8},{"type":9,"linkType":10,"id":11},"Link","Space","tg11qz6a9e5b","cXoMQMg3osuOXRQQOOXXV","Entry","2025-01-16T20:45:07.911Z","2025-04-28T19:38:52.090Z",{"sys":17},{"id":18,"type":9,"linkType":19},"master","Environment",31,7,{"sys":23},{"type":9,"linkType":24,"id":25},"ContentType","blogPost","fr-CA",{"slug":28,"title":29,"description":30,"date":31,"content":32,"codeSnippet":104,"ctaUrl":104,"imageUrl":105,"imageAlt":106},"article-de-test-accessibilite","Article 4 - En cours de création","Ceci est une petite description de l'article","2024-10-25T00:00-05:00",{"data":33,"content":34,"nodeType":103},{},[35,44,51,58,65,71,78,85,91,97],{"data":36,"content":37,"nodeType":43},{},[38],{"data":39,"marks":40,"value":41,"nodeType":42},{},[],"Titre paragraphe","text","paragraph",{"data":45,"content":46,"nodeType":43},{},[47],{"data":48,"marks":49,"value":50,"nodeType":42},{},[],"Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.\n",{"data":52,"content":53,"nodeType":57},{},[54],{"data":55,"marks":56,"value":41,"nodeType":42},{},[],"heading-3",{"data":59,"content":60,"nodeType":43},{},[61],{"data":62,"marks":63,"value":64,"nodeType":42},{},[],"\nLorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.\n",{"data":66,"content":67,"nodeType":57},{},[68],{"data":69,"marks":70,"value":41,"nodeType":42},{},[],{"data":72,"content":73,"nodeType":43},{},[74],{"data":75,"marks":76,"value":77,"nodeType":42},{},[],"\nLorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",{"data":79,"content":80,"nodeType":57},{},[81],{"data":82,"marks":83,"value":84,"nodeType":42},{},[],"\nTitre paragraphe",{"data":86,"content":87,"nodeType":43},{},[88],{"data":89,"marks":90,"value":64,"nodeType":42},{},[],{"data":92,"content":93,"nodeType":57},{},[94],{"data":95,"marks":96,"value":41,"nodeType":42},{},[],{"data":98,"content":99,"nodeType":43},{},[100],{"data":101,"marks":102,"value":77,"nodeType":42},{},[],"document","","https:\u002F\u002Fimages.ctfassets.net\u002Ftg11qz6a9e5b\u002FdEm4Nx2xomZZMv83NKHGv\u002F8b51543b7461b3df1602a807d8ce27bc\u002Fada-compliance-website-accessibility-scaled.jpg","ada-compliance-website-accessibility-scaled",[108,1005,1901,2180,2878,2950],{"sys":109,"fields":121},{"space":110,"id":112,"type":13,"createdAt":113,"updatedAt":114,"environment":115,"publishedVersion":117,"revision":118,"contentType":119,"locale":26},{"sys":111},{"type":9,"linkType":10,"id":11},"3VoV8zXy9U8wawnBv7BSVz","2025-06-05T14:17:02.411Z","2025-06-11T20:30:59.929Z",{"sys":116},{"id":18,"type":9,"linkType":19},241,26,{"sys":120},{"type":9,"linkType":24,"id":25},{"slug":122,"title":123,"description":124,"date":125,"content":126,"codeSnippet":104,"ctaUrl":104,"imageUrl":1003,"imageAlt":1004},"tokens-variables-figma","Variables Figma & Design Tokens : la révolution silencieuse du workflow design-dev","comment les variables Figma et les design tokens peuvent simplifier votre workflow design-dev? Un webinaire gratuit aura lieu le 19 juin pour tout comprendre en live.","2025-06-03T00:00-04:00",{"data":127,"content":128,"nodeType":103},{},[129,146,162,170,176,183,191,252,268,281,306,428,444,456,462,475,482,493,505,534,546,562,568,581,597,662,673,681,688,701,708,758,765,778,875,882,890,897,944,960,968,984],{"data":130,"content":131,"nodeType":43},{},[132,136,142],{"data":133,"marks":134,"value":135,"nodeType":42},{},[],"Imagine un monde où tu peux changer tous tes boutons d’une couleur en un clic, passer du mode clair au mode sombre sans refaire 45 frames, ou encore partager des noms de couleurs cohérents avec les développeurs... Ce monde existe. Et il s’appelle ",{"data":137,"marks":138,"value":141,"nodeType":42},{},[139],{"type":140},"bold","Variables Figma",{"data":143,"marks":144,"value":145,"nodeType":42},{},[],".",{"data":147,"content":148,"nodeType":43},{},[149,153,158],{"data":150,"marks":151,"value":152,"nodeType":42},{},[],"Depuis quelque temps, Figma a sorti une nouveauté qui pourrait bien changer la façon dont on conçoit les interfaces : ",{"data":154,"marks":155,"value":157,"nodeType":42},{},[156],{"type":140},"les variables et les design tokens",{"data":159,"marks":160,"value":161,"nodeType":42},{},[],". Voici un tour d’horizon concret, sans blabla inutile, pour comprendre comment ça peut transformer ton quotidien.",{"data":163,"content":164,"nodeType":57},{},[165],{"data":166,"marks":167,"value":169,"nodeType":42},{},[168],{"type":140},"1- Qu’est-ce qu’une variable dans Figma ?",{"data":171,"content":172,"nodeType":43},{},[173],{"data":174,"marks":175,"value":104,"nodeType":42},{},[],{"data":177,"content":178,"nodeType":43},{},[179],{"data":180,"marks":181,"value":182,"nodeType":42},{},[],"C’est l’équivalent des variables qu’on utilise en code. Une couleur, un texte, un nombre, un booléen : tu peux les définir une fois, les utiliser partout, et les mettre à jour en un clic.",{"data":184,"content":185,"nodeType":190},{},[186],{"data":187,"marks":188,"value":189,"nodeType":42},{},[],"Types de variables :","heading-4",{"data":192,"content":193,"nodeType":251},{},[194,209,223,237],{"data":195,"content":196,"nodeType":208},{},[197],{"data":198,"content":199,"nodeType":43},{},[200,204],{"data":201,"marks":202,"value":203,"nodeType":42},{},[],"Couleurs : ",{"data":205,"marks":206,"value":207,"nodeType":42},{},[],"parfait pour créer ta palette (primaire, secondaire, d’arrière-plan...)","list-item",{"data":210,"content":211,"nodeType":208},{},[212],{"data":213,"content":214,"nodeType":43},{},[215,219],{"data":216,"marks":217,"value":218,"nodeType":42},{},[],"Nombres : ",{"data":220,"marks":221,"value":222,"nodeType":42},{},[],"idéal pour les espacements, les tailles de bordure ou les rayons",{"data":224,"content":225,"nodeType":208},{},[226],{"data":227,"content":228,"nodeType":43},{},[229,233],{"data":230,"marks":231,"value":232,"nodeType":42},{},[],"Textes ",{"data":234,"marks":235,"value":236,"nodeType":42},{},[],": pratique pour les labels dynamiques (ex. Valider \u002F Submit)",{"data":238,"content":239,"nodeType":208},{},[240],{"data":241,"content":242,"nodeType":43},{},[243,247],{"data":244,"marks":245,"value":246,"nodeType":42},{},[],"Booléens ",{"data":248,"marks":249,"value":250,"nodeType":42},{},[],": pour gérer des états (visible \u002F invisible, actif \u002F inactif) ","unordered-list",{"data":253,"content":254,"nodeType":43},{},[255,259,264],{"data":256,"marks":257,"value":258,"nodeType":42},{},[],"Et surtout : ",{"data":260,"marks":261,"value":263,"nodeType":42},{},[262],{"type":140},"tu peux les combiner à des \"modes\"",{"data":265,"marks":266,"value":267,"nodeType":42},{},[]," (comme dark\u002Flight, mobile\u002Fdesktop).",{"data":269,"content":270,"nodeType":57},{},[271,276],{"data":272,"marks":273,"value":275,"nodeType":42},{},[274],{"type":140},"2- ",{"data":277,"marks":278,"value":280,"nodeType":42},{},[279],{"type":140},"Variables vs Styles : la grande différence",{"data":282,"content":283,"nodeType":43},{},[284,288,293,297,302],{"data":285,"marks":286,"value":287,"nodeType":42},{},[],"Avant, on avait des ",{"data":289,"marks":290,"value":292,"nodeType":42},{},[291],{"type":140},"styles figés",{"data":294,"marks":295,"value":296,"nodeType":42},{},[],". Maintenant, place à la ",{"data":298,"marks":299,"value":301,"nodeType":42},{},[300],{"type":140},"souplesse",{"data":303,"marks":304,"value":305,"nodeType":42},{},[]," :",{"data":307,"content":308,"nodeType":427},{},[309,334,358,381,404],{"data":310,"content":311,"nodeType":333},{},[312,323],{"data":313,"content":314,"nodeType":322},{},[315],{"data":316,"content":317,"nodeType":43},{},[318],{"data":319,"marks":320,"value":321,"nodeType":42},{},[],"Styles Figma (avant) ","table-header-cell",{"data":324,"content":325,"nodeType":322},{},[326],{"data":327,"content":328,"nodeType":43},{},[329],{"data":330,"marks":331,"value":332,"nodeType":42},{},[],"Variables Figma (maintenant)","table-row",{"data":335,"content":336,"nodeType":333},{},[337,348],{"data":338,"content":339,"nodeType":347},{},[340],{"data":341,"content":342,"nodeType":43},{},[343],{"data":344,"marks":345,"value":346,"nodeType":42},{},[],"Couleurs fixes ","table-cell",{"data":349,"content":350,"nodeType":347},{},[351],{"data":352,"content":353,"nodeType":43},{},[354],{"data":355,"marks":356,"value":357,"nodeType":42},{},[],"Valeurs dynamiques",{"data":359,"content":360,"nodeType":333},{},[361,371],{"data":362,"content":363,"nodeType":347},{},[364],{"data":365,"content":366,"nodeType":43},{},[367],{"data":368,"marks":369,"value":370,"nodeType":42},{},[],"Pas de logique conditionnelle ",{"data":372,"content":373,"nodeType":347},{},[374],{"data":375,"content":376,"nodeType":43},{},[377],{"data":378,"marks":379,"value":380,"nodeType":42},{},[],"Opérateurs, alias, mode ",{"data":382,"content":383,"nodeType":333},{},[384,394],{"data":385,"content":386,"nodeType":347},{},[387],{"data":388,"content":389,"nodeType":43},{},[390],{"data":391,"marks":392,"value":393,"nodeType":42},{},[],"Locales et liées uniquement à Figma ",{"data":395,"content":396,"nodeType":347},{},[397],{"data":398,"content":399,"nodeType":43},{},[400],{"data":401,"marks":402,"value":403,"nodeType":42},{},[],"Exportables en tokens JSON ",{"data":405,"content":406,"nodeType":333},{},[407,417],{"data":408,"content":409,"nodeType":347},{},[410],{"data":411,"content":412,"nodeType":43},{},[413],{"data":414,"marks":415,"value":416,"nodeType":42},{},[],"Peu connectés au dev ",{"data":418,"content":419,"nodeType":347},{},[420],{"data":421,"content":422,"nodeType":43},{},[423],{"data":424,"marks":425,"value":426,"nodeType":42},{},[],"Synchronisation facile avec code ","table",{"data":429,"content":430,"nodeType":43},{},[431,435,440],{"data":432,"marks":433,"value":434,"nodeType":42},{},[],"Les variables permettent d’intégrer ton design system ",{"data":436,"marks":437,"value":439,"nodeType":42},{},[438],{"type":140},"dans le code",{"data":441,"marks":442,"value":443,"nodeType":42},{},[]," sans friction. Tu ne bosses plus dans ta bulle, tu joues en équipe.",{"data":445,"content":446,"nodeType":57},{},[447,452],{"data":448,"marks":449,"value":451,"nodeType":42},{},[450],{"type":140},"3- Cas d’usage concrets : ",{"data":453,"marks":454,"value":455,"nodeType":42},{},[],"ce que tu peux réellement faire",{"data":457,"content":458,"nodeType":43},{},[459],{"data":460,"marks":461,"value":104,"nodeType":42},{},[],{"data":463,"content":464,"nodeType":190},{},[465,470],{"data":466,"marks":467,"value":469,"nodeType":42},{},[468],{"type":140},"a. ",{"data":471,"marks":472,"value":474,"nodeType":42},{},[473],{"type":140},"Mode sombre automatique",{"data":476,"content":477,"nodeType":43},{},[478],{"data":479,"marks":480,"value":481,"nodeType":42},{},[],"Tu crées deux modes : Light \u002F Dark. Les couleurs de fond, de texte, de bordure changent en un clic. Pas besoin de dupliquer les maquettes.",{"data":483,"content":484,"nodeType":492},{},[485],{"data":486,"marks":487,"value":491,"nodeType":42},{},[488,489],{"type":140},{"type":490},"code","\u003C$color-background: Light \u002F Dark>","heading-6",{"data":494,"content":495,"nodeType":190},{},[496,500],{"data":497,"marks":498,"value":499,"nodeType":42},{},[],"b. ",{"data":501,"marks":502,"value":504,"nodeType":42},{},[503],{"type":140},"Grille d’espacement modulable",{"data":506,"content":507,"nodeType":43},{},[508,512,517,521,526,530],{"data":509,"marks":510,"value":511,"nodeType":42},{},[],"Définis une échelle de valeurs (",{"data":513,"marks":514,"value":516,"nodeType":42},{},[515],{"type":490},"spacing-1",{"data":518,"marks":519,"value":520,"nodeType":42},{},[],", ",{"data":522,"marks":523,"value":525,"nodeType":42},{},[524],{"type":490},"spacing-2",{"data":527,"marks":528,"value":529,"nodeType":42},{},[],", etc.) à appliquer et ",{"data":531,"marks":532,"value":533,"nodeType":42},{},[],"tu peux les utiliser dans tous tes composants, et les ajuster facilement.",{"data":535,"content":536,"nodeType":190},{},[537,541],{"data":538,"marks":539,"value":540,"nodeType":42},{},[],"c. ",{"data":542,"marks":543,"value":545,"nodeType":42},{},[544],{"type":140},"Textes dynamiques pour maquettes multilingues",{"data":547,"content":548,"nodeType":43},{},[549,553,558],{"data":550,"marks":551,"value":552,"nodeType":42},{},[],"Tu gères tes textes comme des variables : ",{"data":554,"marks":555,"value":557,"nodeType":42},{},[556],{"type":490},"label.submit = \"Envoyer\" \u002F \"Submit\"",{"data":559,"marks":560,"value":561,"nodeType":42},{},[],". C’est simple, rapide, et super utile si tu fais du design pour plusieurs régions.",{"data":563,"content":564,"nodeType":43},{},[565],{"data":566,"marks":567,"value":104,"nodeType":42},{},[],{"data":569,"content":570,"nodeType":57},{},[571,576],{"data":572,"marks":573,"value":575,"nodeType":42},{},[574],{"type":140},"4. ",{"data":577,"marks":578,"value":580,"nodeType":42},{},[579],{"type":140},"Variables + Code = Design Tokens synchronisés",{"data":582,"content":583,"nodeType":43},{},[584,588,593],{"data":585,"marks":586,"value":587,"nodeType":42},{},[],"Là où ça devient magique, c’est quand tu exportes tes variables sous forme de ",{"data":589,"marks":590,"value":592,"nodeType":42},{},[591],{"type":140},"tokens JSON",{"data":594,"marks":595,"value":596,"nodeType":42},{},[],". Tu peux les importer et les consommer :",{"data":598,"content":599,"nodeType":251},{},[600,631,641,652],{"data":601,"content":602,"nodeType":208},{},[603],{"data":604,"content":605,"nodeType":43},{},[606,610,615,618,623,626],{"data":607,"marks":608,"value":609,"nodeType":42},{},[],"par des frameworks comme ",{"data":611,"marks":612,"value":614,"nodeType":42},{},[613],{"type":140},"Style Dictionary",{"data":616,"marks":617,"value":520,"nodeType":42},{},[],{"data":619,"marks":620,"value":622,"nodeType":42},{},[621],{"type":140},"Tailwind",{"data":624,"marks":625,"value":520,"nodeType":42},{},[],{"data":627,"marks":628,"value":630,"nodeType":42},{},[629],{"type":140},"Tokens Studio",{"data":632,"content":633,"nodeType":208},{},[634],{"data":635,"content":636,"nodeType":43},{},[637],{"data":638,"marks":639,"value":640,"nodeType":42},{},[],"dans des design systems codés (ex: avec Angular, React, Vue…)",{"data":642,"content":643,"nodeType":208},{},[644],{"data":645,"content":646,"nodeType":43},{},[647],{"data":648,"marks":649,"value":651,"nodeType":42},{},[650],{"type":140},"Tokens Studio for Figma",{"data":653,"content":654,"nodeType":208},{},[655],{"data":656,"content":657,"nodeType":43},{},[658],{"data":659,"marks":660,"value":661,"nodeType":42},{},[],"Ou carrément dans ton repo front-end",{"data":663,"content":664,"nodeType":672},{},[665],{"data":666,"content":667,"nodeType":43},{},[668],{"data":669,"marks":670,"value":671,"nodeType":42},{},[],"Exemple d’export :","blockquote",{"data":674,"content":675,"nodeType":492},{},[676],{"data":677,"marks":678,"value":680,"nodeType":42},{},[679],{"type":490},"{\n  \"color.primary\": {\n    \"value\": \"#0055ff\",\n    \"type\": \"color\"\n  }\n}",{"data":682,"content":683,"nodeType":43},{},[684],{"data":685,"marks":686,"value":687,"nodeType":42},{},[],"Un seul fichier, un seul langage commun entre design et dév.",{"data":689,"content":690,"nodeType":57},{},[691,696],{"data":692,"marks":693,"value":695,"nodeType":42},{},[694],{"type":140},"5- ",{"data":697,"marks":698,"value":700,"nodeType":42},{},[699],{"type":140},"Design + Dev = Teamwork amélioré",{"data":702,"content":703,"nodeType":43},{},[704],{"data":705,"marks":706,"value":707,"nodeType":42},{},[],"Quand on parle la même langue, tout va plus vite :",{"data":709,"content":710,"nodeType":251},{},[711,738,748],{"data":712,"content":713,"nodeType":208},{},[714],{"data":715,"content":716,"nodeType":43},{},[717,721,726,729,734],{"data":718,"marks":719,"value":720,"nodeType":42},{},[],"Les noms sont clairs pour tout le monde (",{"data":722,"marks":723,"value":725,"nodeType":42},{},[724],{"type":490},"color.primary",{"data":727,"marks":728,"value":520,"nodeType":42},{},[],{"data":730,"marks":731,"value":733,"nodeType":42},{},[732],{"type":490},"spacing.md",{"data":735,"marks":736,"value":737,"nodeType":42},{},[],"...)",{"data":739,"content":740,"nodeType":208},{},[741],{"data":742,"content":743,"nodeType":43},{},[744],{"data":745,"marks":746,"value":747,"nodeType":42},{},[],"Le dev n’a plus besoin de deviner ce que \"bleu 2\" signifie",{"data":749,"content":750,"nodeType":208},{},[751],{"data":752,"content":753,"nodeType":43},{},[754],{"data":755,"marks":756,"value":757,"nodeType":42},{},[],"Les retours QA sont réduits",{"data":759,"content":760,"nodeType":43},{},[761],{"data":762,"marks":763,"value":764,"nodeType":42},{},[],"Et surtout : tu peux documenter ton design system avec plus de rigueur.",{"data":766,"content":767,"nodeType":57},{},[768,773],{"data":769,"marks":770,"value":772,"nodeType":42},{},[771],{"type":140},"6- ",{"data":774,"marks":775,"value":777,"nodeType":42},{},[776],{"type":140},"Bien organiser ses variables : quelques astuces",{"data":779,"content":780,"nodeType":251},{},[781,819,855,865],{"data":782,"content":783,"nodeType":208},{},[784],{"data":785,"content":786,"nodeType":43},{},[787,791,796,799,804,807,812,815],{"data":788,"marks":789,"value":790,"nodeType":42},{},[],"Structure par type : ",{"data":792,"marks":793,"value":795,"nodeType":42},{},[794],{"type":490},"color",{"data":797,"marks":798,"value":520,"nodeType":42},{},[],{"data":800,"marks":801,"value":803,"nodeType":42},{},[802],{"type":490},"space",{"data":805,"marks":806,"value":520,"nodeType":42},{},[],{"data":808,"marks":809,"value":811,"nodeType":42},{},[810],{"type":490},"radius",{"data":813,"marks":814,"value":520,"nodeType":42},{},[],{"data":816,"marks":817,"value":42,"nodeType":42},{},[818],{"type":490},{"data":820,"content":821,"nodeType":208},{},[822],{"data":823,"content":824,"nodeType":43},{},[825,829,834,838,843,846,851],{"data":826,"marks":827,"value":828,"nodeType":42},{},[],"Utilise des ",{"data":830,"marks":831,"value":833,"nodeType":42},{},[832],{"type":140},"noms prédictibles",{"data":835,"marks":836,"value":837,"nodeType":42},{},[]," : ",{"data":839,"marks":840,"value":842,"nodeType":42},{},[841],{"type":490},"color.text.default",{"data":844,"marks":845,"value":520,"nodeType":42},{},[],{"data":847,"marks":848,"value":850,"nodeType":42},{},[849],{"type":490},"radius.sm",{"data":852,"marks":853,"value":854,"nodeType":42},{},[],", etc.",{"data":856,"content":857,"nodeType":208},{},[858],{"data":859,"content":860,"nodeType":43},{},[861],{"data":862,"marks":863,"value":864,"nodeType":42},{},[],"Garde les modes simples au départ (Dark\u002FLight), puis étends (Mobile\u002FDesktop)",{"data":866,"content":867,"nodeType":208},{},[868],{"data":869,"content":870,"nodeType":43},{},[871],{"data":872,"marks":873,"value":874,"nodeType":42},{},[],"Teste ton système avec un composant réel (un bouton par exemple)",{"data":876,"content":877,"nodeType":43},{},[878],{"data":879,"marks":880,"value":881,"nodeType":42},{},[],"Tu veux briller en review ? Organise tes variables comme un pro.",{"data":883,"content":884,"nodeType":57},{},[885],{"data":886,"marks":887,"value":889,"nodeType":42},{},[888],{"type":140},"7- En résumé : les bénéfices clés",{"data":891,"content":892,"nodeType":43},{},[893],{"data":894,"marks":895,"value":896,"nodeType":42},{},[],"Travailler avec des variables, c’est :",{"data":898,"content":899,"nodeType":251},{},[900,914,924,934],{"data":901,"content":902,"nodeType":208},{},[903],{"data":904,"content":905,"nodeType":43},{},[906,910],{"data":907,"marks":908,"value":909,"nodeType":42},{},[],"Plus de cohérence ",{"data":911,"marks":912,"value":913,"nodeType":42},{},[],"visuelle",{"data":915,"content":916,"nodeType":208},{},[917],{"data":918,"content":919,"nodeType":43},{},[920],{"data":921,"marks":922,"value":923,"nodeType":42},{},[],"Une évolution du design plus fluide",{"data":925,"content":926,"nodeType":208},{},[927],{"data":928,"content":929,"nodeType":43},{},[930],{"data":931,"marks":932,"value":933,"nodeType":42},{},[],"Moins de détours techniques",{"data":935,"content":936,"nodeType":208},{},[937],{"data":938,"content":939,"nodeType":43},{},[940],{"data":941,"marks":942,"value":943,"nodeType":42},{},[],"Une meilleure communication entre designers et développeurs",{"data":945,"content":946,"nodeType":43},{},[947,951,956],{"data":948,"marks":949,"value":950,"nodeType":42},{},[],"Bref, ",{"data":952,"marks":953,"value":955,"nodeType":42},{},[954],{"type":140},"tu ne conçois plus des maquettes",{"data":957,"marks":958,"value":959,"nodeType":42},{},[]," : tu conçois un système.",{"data":961,"content":962,"nodeType":190},{},[963],{"data":964,"marks":965,"value":967,"nodeType":42},{},[966],{"type":140},"le live Figma du 19 juin 2025",{"data":969,"content":970,"nodeType":43},{},[971,975,980],{"data":972,"marks":973,"value":974,"nodeType":42},{},[],"Si tu veux creuser ce sujet, Figma organise un ",{"data":976,"marks":977,"value":979,"nodeType":42},{},[978],{"type":140},"webinaire gratuit",{"data":981,"marks":982,"value":983,"nodeType":42},{},[]," avec Alexia Danton pour expliquer tout ça en live.",{"data":985,"content":986,"nodeType":43},{},[987,991,1000],{"data":988,"marks":989,"value":990,"nodeType":42},{},[],"\n",{"data":992,"content":994,"nodeType":999},{"uri":993},"https:\u002F\u002Fofficehours-variables101fr.splashthat.com\u002FEmail?utm_campaign=060525+-+Invite&utm_content=060525+-+Invite&utm_medium=email&utm_source=figma",[995],{"data":996,"marks":997,"value":998,"nodeType":42},{},[],"Assiter à l'évenement ici ","hyperlink",{"data":1001,"marks":1002,"value":104,"nodeType":42},{},[],"https:\u002F\u002Fimages.ctfassets.net\u002Ftg11qz6a9e5b\u002F3GAjwY6NUpoLVyDQhoDvTf\u002Fb1bb550b27b844cbc1229858997d86e8\u002Ffigma.png","variables-tokens-figma",{"sys":1006,"fields":1018},{"space":1007,"id":1009,"type":13,"createdAt":1010,"updatedAt":1011,"environment":1012,"publishedVersion":1014,"revision":1015,"contentType":1016,"locale":26},{"sys":1008},{"type":9,"linkType":10,"id":11},"1jkMh3tpv0jtjdoy22WQ2T","2025-01-04T17:18:50.776Z","2026-09-11T14:15:46.916Z",{"sys":1013},{"id":18,"type":9,"linkType":19},160,40,{"sys":1017},{"type":9,"linkType":24,"id":25},{"slug":1019,"title":1020,"description":1021,"date":1022,"content":1023,"codeSnippet":104,"ctaUrl":104,"imageUrl":1899,"imageAlt":1900},"user-experience-ia","10 Façons dont l'intelligence artificielle transforme l'expérience utilisateur","Un aperçu clair et moderne des outils qui transforment notre manière de concevoir des expériences utilisateur.","2025-05-14T00:00-04:00",{"nodeType":103,"data":1024,"content":1025},{},[1026,1033,1040,1052,1064,1110,1129,1136,1147,1158,1202,1219,1226,1237,1248,1291,1307,1314,1325,1336,1369,1384,1391,1402,1413,1457,1472,1479,1490,1501,1534,1549,1556,1567,1578,1622,1637,1644,1655,1666,1709,1724,1731,1742,1753,1785,1800,1807,1818,1829,1870,1885,1892],{"nodeType":43,"data":1027,"content":1028},{},[1029],{"nodeType":42,"value":1030,"marks":1031,"data":1032},"L'expérience utilisateur (UX) est en train de vivre une véritable révolution grâce à l'intelligence artificielle. Autrefois réalisées manuellement, certaines étapes du design UX peuvent maintenant être automatisées, enrichies ou optimisées grâce à des outils IA. Cela transforme la manière dont les designers travaillent, prennent des décisions et interagissent avec les données utilisateurs. Voici un panorama complet de 10 cas d'usage concrets où l'IA joue un rôle clé dans l'évolution des pratiques UX.",[],{},{"nodeType":57,"data":1034,"content":1035},{},[1036],{"nodeType":42,"value":1037,"marks":1038,"data":1039},"1. Génération d'idées et de personas",[],{},{"nodeType":43,"data":1041,"content":1042},{},[1043,1048],{"nodeType":42,"value":1044,"marks":1045,"data":1047},"Avant",[1046],{"type":140},{},{"nodeType":42,"value":1049,"marks":1050,"data":1051}," : La création de personas se faisait sur la base d'enquêtes, d'entretiens et d'observations. Cela prenait du temps et reposait souvent sur des hypothèses subjectives.",[],{},{"nodeType":43,"data":1053,"content":1054},{},[1055,1060],{"nodeType":42,"value":1056,"marks":1057,"data":1059},"Avec l'IA",[1058],{"type":140},{},{"nodeType":42,"value":1061,"marks":1062,"data":1063}," : Il est maintenant possible de générer automatiquement des personas réalistes à partir de données utilisateurs existantes, de recherches ou de simples descriptions textuelles. L'IA peut aussi proposer des idées de fonctionnalités, d'interfaces ou de solutions à partir d'un contexte donné.",[],{},{"nodeType":43,"data":1065,"content":1066},{},[1067,1072,1075,1083,1086,1094,1098,1106],{"nodeType":42,"value":1068,"marks":1069,"data":1071},"Outils utiles",[1070],{"type":140},{},{"nodeType":42,"value":837,"marks":1073,"data":1074},[],{},{"nodeType":999,"data":1076,"content":1078},{"uri":1077},"https:\u002F\u002Fuxpressia.com\u002F",[1079],{"nodeType":42,"value":1080,"marks":1081,"data":1082},"UXPressia AI",[],{},{"nodeType":42,"value":520,"marks":1084,"data":1085},[],{},{"nodeType":999,"data":1087,"content":1089},{"uri":1088},"https:\u002F\u002Fneural.love\u002F",[1090],{"nodeType":42,"value":1091,"marks":1092,"data":1093},"Neural.love",[],{},{"nodeType":42,"value":1095,"marks":1096,"data":1097},",  ",[],{},{"nodeType":999,"data":1099,"content":1101},{"uri":1100},"https:\u002F\u002Fchatgpt.com\u002F",[1102],{"nodeType":42,"value":1103,"marks":1104,"data":1105},"ChatGPT",[],{},{"nodeType":42,"value":1107,"marks":1108,"data":1109}," (avec des prompts précis).",[],{},{"nodeType":1111,"data":1112,"content":1128},"embedded-asset-block",{"target":1113},{"metadata":1114,"sys":1117,"fields":1126},{"tags":1115,"concepts":1116},[],[],{"space":1118,"id":1120,"type":1121,"createdAt":1122,"updatedAt":1122,"environment":1123,"publishedVersion":21,"revision":1125,"locale":26},{"sys":1119},{"type":9,"linkType":10,"id":11},"2fWrlgTHxz6iMSFWPZK8H7","Asset","2025-06-03T18:47:22.625Z",{"sys":1124},{"id":18,"type":9,"linkType":19},1,{"description":1127},"concept IA",[],{"nodeType":57,"data":1130,"content":1131},{},[1132],{"nodeType":42,"value":1133,"marks":1134,"data":1135},"2. Recherche de tendances et benchmark UX",[],{},{"nodeType":43,"data":1137,"content":1138},{},[1139,1143],{"nodeType":42,"value":1044,"marks":1140,"data":1142},[1141],{"type":140},{},{"nodeType":42,"value":1144,"marks":1145,"data":1146}," : Les designers faisaient de la veille manuellement, en visitant des dizaines de sites pour repérer les bonnes pratiques et les tendances du moment.",[],{},{"nodeType":43,"data":1148,"content":1149},{},[1150,1154],{"nodeType":42,"value":1056,"marks":1151,"data":1153},[1152],{"type":140},{},{"nodeType":42,"value":1155,"marks":1156,"data":1157}," : Des outils analysent des milliers d'interfaces en ligne et extraient automatiquement les tendances de design, de contenu, d'interaction. Cela permet de mieux situer son produit dans l'écosystème concurrentiel.",[],{},{"nodeType":43,"data":1159,"content":1160},{},[1161,1165,1168,1176,1179,1187,1190,1198],{"nodeType":42,"value":1068,"marks":1162,"data":1164},[1163],{"type":140},{},{"nodeType":42,"value":837,"marks":1166,"data":1167},[],{},{"nodeType":999,"data":1169,"content":1171},{"uri":1170},"https:\u002F\u002Fwww.uxtweak.com\u002F",[1172],{"nodeType":42,"value":1173,"marks":1174,"data":1175},"UXtweak",[],{},{"nodeType":42,"value":1095,"marks":1177,"data":1178},[],{},{"nodeType":999,"data":1180,"content":1182},{"uri":1181},"https:\u002F\u002Fwww.hotjar.com\u002Ffr\u002Fproduit\u002Ftrends\u002F",[1183],{"nodeType":42,"value":1184,"marks":1185,"data":1186},"Hotjar Trends",[],{},{"nodeType":42,"value":1095,"marks":1188,"data":1189},[],{},{"nodeType":999,"data":1191,"content":1193},{"uri":1192},"https:\u002F\u002Fwww.similarweb.com\u002Ffr\u002F?_gl=1*137vxe4*_gcl_aw*R0NMLjE3NDg5ODUzODIuQ2owS0NRand1dnJCQmhEY0FSSXNBS1Jya2plcTA4eUFvUVg4UEYwVk1mZkltQm9RTFh6bV9IQ3A2Z0lTNHRFT3IxaXJuQmx1Y0tKQzB3RWFBckJuRUFMd193Y0I.*_gcl_au*MjUwMTkzNzUuMTc0ODk4NTM4Mg..*FPAU*MjUwMTkzNzUuMTc0ODk4NTM4Mg..*_ga*MTExNDI2OTEwMS4xNzQ4OTg1Mzgy*_ga_V5DSP51YD0*czE3NDg5ODUzODAkbzEkZzEkdDE3NDg5ODU0MDYkajQ2JGwwJGg3MDk5NjE5ODA.*_fplc*MUx1Z0xjcDJEZ2JYQmMwWVpiWWdRd2RlbkM2NlRCdmdtRmFrZEhHdUh0dzFKM0ZsZW5zMnBSY2pYSzJwTlhla3phJTJGOTFZUGtDMWc1TlB3dGxOTThsRDAzcWpZa2IwMXNuNkxCZ3N5T2NidFNlOUFvdnRvcnB1T1NZNFZyTnclM0QlM0Q.",[1194],{"nodeType":42,"value":1195,"marks":1196,"data":1197},"Similarweb",[],{},{"nodeType":42,"value":1199,"marks":1200,"data":1201}," avec IA.",[],{},{"nodeType":1111,"data":1203,"content":1218},{"target":1204},{"metadata":1205,"sys":1208,"fields":1216},{"tags":1206,"concepts":1207},[],[],{"space":1209,"id":1211,"type":1121,"createdAt":1212,"updatedAt":1212,"environment":1213,"publishedVersion":1215,"revision":1125,"locale":26},{"sys":1210},{"type":9,"linkType":10,"id":11},"4bxL3F635DmSbvyApLbLa1","2025-06-03T18:59:44.028Z",{"sys":1214},{"id":18,"type":9,"linkType":19},6,{"title":1217,"description":1217},"Concept IA",[],{"nodeType":57,"data":1220,"content":1221},{},[1222],{"nodeType":42,"value":1223,"marks":1224,"data":1225},"3. Wireframes à partir de prompts",[],{},{"nodeType":43,"data":1227,"content":1228},{},[1229,1233],{"nodeType":42,"value":1044,"marks":1230,"data":1232},[1231],{"type":140},{},{"nodeType":42,"value":1234,"marks":1235,"data":1236}," : Créer des wireframes était un processus artisanal, réalisé sur Figma, Sketch ou à la main. Il fallait du temps, même pour des versions préliminaires.",[],{},{"nodeType":43,"data":1238,"content":1239},{},[1240,1244],{"nodeType":42,"value":1056,"marks":1241,"data":1243},[1242],{"type":140},{},{"nodeType":42,"value":1245,"marks":1246,"data":1247}," : Il suffit d'écrire un prompt comme « une page d'accueil avec un héro, trois cartes et un formulaire de contact » pour que l'outil crée une structure de wireframe automatiquement.",[],{},{"nodeType":43,"data":1249,"content":1250},{},[1251,1255,1258,1266,1269,1277,1280,1288],{"nodeType":42,"value":1068,"marks":1252,"data":1254},[1253],{"type":140},{},{"nodeType":42,"value":837,"marks":1256,"data":1257},[],{},{"nodeType":999,"data":1259,"content":1261},{"uri":1260},"https:\u002F\u002Fuizard.io\u002F",[1262],{"nodeType":42,"value":1263,"marks":1264,"data":1265},"Uizard",[],{},{"nodeType":42,"value":1095,"marks":1267,"data":1268},[],{},{"nodeType":999,"data":1270,"content":1272},{"uri":1271},"https:\u002F\u002Fwww.usegalileo.ai\u002Fexplore",[1273],{"nodeType":42,"value":1274,"marks":1275,"data":1276},"Galileo AI",[],{},{"nodeType":42,"value":1095,"marks":1278,"data":1279},[],{},{"nodeType":999,"data":1281,"content":1283},{"uri":1282},"https:\u002F\u002Fwww.builder.io\u002F",[1284],{"nodeType":42,"value":1285,"marks":1286,"data":1287},"Builder.io",[],{},{"nodeType":42,"value":145,"marks":1289,"data":1290},[],{},{"nodeType":1111,"data":1292,"content":1306},{"target":1293},{"metadata":1294,"sys":1297,"fields":1305},{"tags":1295,"concepts":1296},[],[],{"space":1298,"id":1300,"type":1121,"createdAt":1301,"updatedAt":1301,"environment":1302,"publishedVersion":1304,"revision":1125,"locale":26},{"sys":1299},{"type":9,"linkType":10,"id":11},"5g4h60Vi6XyGEbUR3AsDwE","2025-06-03T19:11:38.425Z",{"sys":1303},{"id":18,"type":9,"linkType":19},5,{"title":1217,"description":1217},[],{"nodeType":57,"data":1308,"content":1309},{},[1310],{"nodeType":42,"value":1311,"marks":1312,"data":1313},"4. A\u002FB testing prédictif",[],{},{"nodeType":43,"data":1315,"content":1316},{},[1317,1321],{"nodeType":42,"value":1044,"marks":1318,"data":1320},[1319],{"type":140},{},{"nodeType":42,"value":1322,"marks":1323,"data":1324}," : L'A\u002FB testing consistait à créer deux variantes, les tester sur de vrais utilisateurs, puis analyser les résultats pour déterminer la meilleure.",[],{},{"nodeType":43,"data":1326,"content":1327},{},[1328,1332],{"nodeType":42,"value":1056,"marks":1329,"data":1331},[1330],{"type":140},{},{"nodeType":42,"value":1333,"marks":1334,"data":1335}," : Certains outils prédisent les performances d'une interface sans devoir la déployer, en s'appuyant sur des modèles d'apprentissage machine et des données comportementales.",[],{},{"nodeType":43,"data":1337,"content":1338},{},[1339,1343,1346,1354,1357,1365],{"nodeType":42,"value":1068,"marks":1340,"data":1342},[1341],{"type":140},{},{"nodeType":42,"value":837,"marks":1344,"data":1345},[],{},{"nodeType":999,"data":1347,"content":1349},{"uri":1348},"https:\u002F\u002Fwww.optimizely.com\u002Fai\u002F",[1350],{"nodeType":42,"value":1351,"marks":1352,"data":1353},"Optimizely AI",[],{},{"nodeType":42,"value":1095,"marks":1355,"data":1356},[],{},{"nodeType":999,"data":1358,"content":1360},{"uri":1359},"https:\u002F\u002Fwww.optimizely.com\u002Foptimize\u002F",[1361],{"nodeType":42,"value":1362,"marks":1363,"data":1364},"Google Optimize",[],{},{"nodeType":42,"value":1366,"marks":1367,"data":1368}," (avec Machine Learning).",[],{},{"nodeType":1111,"data":1370,"content":1383},{"target":1371},{"metadata":1372,"sys":1375,"fields":1382},{"tags":1373,"concepts":1374},[],[],{"space":1376,"id":1378,"type":1121,"createdAt":1379,"updatedAt":1379,"environment":1380,"publishedVersion":1215,"revision":1125,"locale":26},{"sys":1377},{"type":9,"linkType":10,"id":11},"1EOwRuSkB0Xs8G8vUSRAD0","2025-06-03T19:21:08.017Z",{"sys":1381},{"id":18,"type":9,"linkType":19},{"title":1217,"description":1217},[],{"nodeType":57,"data":1385,"content":1386},{},[1387],{"nodeType":42,"value":1388,"marks":1389,"data":1390},"5. Synthèse automatique de recherche utilisateur",[],{},{"nodeType":43,"data":1392,"content":1393},{},[1394,1398],{"nodeType":42,"value":1044,"marks":1395,"data":1397},[1396],{"type":140},{},{"nodeType":42,"value":1399,"marks":1400,"data":1401}," : Les designers devaient eux-mêmes coder les verbatims, regrouper les thèmes, extraire les insights, créer des nuages de mots... un travail long et fastidieux.",[],{},{"nodeType":43,"data":1403,"content":1404},{},[1405,1409],{"nodeType":42,"value":1056,"marks":1406,"data":1408},[1407],{"type":140},{},{"nodeType":42,"value":1410,"marks":1411,"data":1412}," : Les outils transcrivent automatiquement les entretiens, identifient les récurrences, proposent des synthèses thématiques et même des insights clés exploitables.",[],{},{"nodeType":43,"data":1414,"content":1415},{},[1416,1420,1423,1431,1435,1443,1446,1454],{"nodeType":42,"value":1068,"marks":1417,"data":1419},[1418],{"type":140},{},{"nodeType":42,"value":837,"marks":1421,"data":1422},[],{},{"nodeType":999,"data":1424,"content":1426},{"uri":1425},"https:\u002F\u002Fdovetail.com\u002Fhelp\u002Fdovetail-ai\u002F",[1427],{"nodeType":42,"value":1428,"marks":1429,"data":1430},"Dovetail",[],{},{"nodeType":42,"value":1432,"marks":1433,"data":1434}," AI, ",[],{},{"nodeType":999,"data":1436,"content":1438},{"uri":1437},"https:\u002F\u002Fcondens.io\u002F",[1439],{"nodeType":42,"value":1440,"marks":1441,"data":1442},"Condens",[],{},{"nodeType":42,"value":520,"marks":1444,"data":1445},[],{},{"nodeType":999,"data":1447,"content":1449},{"uri":1448},"https:\u002F\u002Fwww.notion.com\u002Fhelp\u002Fguides\u002Fcategory\u002Fai",[1450],{"nodeType":42,"value":1451,"marks":1452,"data":1453},"Notion AI",[],{},{"nodeType":42,"value":145,"marks":1455,"data":1456},[],{},{"nodeType":1111,"data":1458,"content":1471},{"target":1459},{"metadata":1460,"sys":1463,"fields":1470},{"tags":1461,"concepts":1462},[],[],{"space":1464,"id":1466,"type":1121,"createdAt":1467,"updatedAt":1467,"environment":1468,"publishedVersion":1215,"revision":1125,"locale":26},{"sys":1465},{"type":9,"linkType":10,"id":11},"2rogMuxJfFrvX5TIrApslW","2025-06-03T19:31:57.788Z",{"sys":1469},{"id":18,"type":9,"linkType":19},{"title":1217,"description":1217},[],{"nodeType":57,"data":1473,"content":1474},{},[1475],{"nodeType":42,"value":1476,"marks":1477,"data":1478},"6. Priorisation des features",[],{},{"nodeType":43,"data":1480,"content":1481},{},[1482,1486],{"nodeType":42,"value":1044,"marks":1483,"data":1485},[1484],{"type":140},{},{"nodeType":42,"value":1487,"marks":1488,"data":1489}," : La prioritisation des fonctionnalités se faisait souvent selon l'intuition ou via des matrices comme MoSCoW, qui restaient limitées.",[],{},{"nodeType":43,"data":1491,"content":1492},{},[1493,1497],{"nodeType":42,"value":1056,"marks":1494,"data":1496},[1495],{"type":140},{},{"nodeType":42,"value":1498,"marks":1499,"data":1500}," : Des algorithmes peuvent analyser des données quantitatives (retours utilisateurs, analytics) pour attribuer un score à chaque fonctionnalité selon son impact, sa fréquence de demande ou sa complexité.",[],{},{"nodeType":43,"data":1502,"content":1503},{},[1504,1508,1511,1519,1522,1530],{"nodeType":42,"value":1068,"marks":1505,"data":1507},[1506],{"type":140},{},{"nodeType":42,"value":837,"marks":1509,"data":1510},[],{},{"nodeType":999,"data":1512,"content":1514},{"uri":1513},"https:\u002F\u002Fairfocus.com\u002Fproduct\u002Fai\u002F",[1515],{"nodeType":42,"value":1516,"marks":1517,"data":1518},"airfocus AI",[],{},{"nodeType":42,"value":1095,"marks":1520,"data":1521},[],{},{"nodeType":999,"data":1523,"content":1525},{"uri":1524},"https:\u002F\u002Fwww.atlassian.com\u002Fsoftware\u002Fjira\u002Ffeatures\u002Fautomation",[1526],{"nodeType":42,"value":1527,"marks":1528,"data":1529},"Jira",[],{},{"nodeType":42,"value":1531,"marks":1532,"data":1533}," avec automatisation intelligente.",[],{},{"nodeType":1111,"data":1535,"content":1548},{"target":1536},{"metadata":1537,"sys":1540,"fields":1547},{"tags":1538,"concepts":1539},[],[],{"space":1541,"id":1543,"type":1121,"createdAt":1544,"updatedAt":1544,"environment":1545,"publishedVersion":1215,"revision":1125,"locale":26},{"sys":1542},{"type":9,"linkType":10,"id":11},"5dygJUM5iMcqgH9denquLc","2025-06-03T19:49:35.710Z",{"sys":1546},{"id":18,"type":9,"linkType":19},{"title":1217,"description":1217},[],{"nodeType":57,"data":1550,"content":1551},{},[1552],{"nodeType":42,"value":1553,"marks":1554,"data":1555},"7. Chatbots UX pour tests ou co-design",[],{},{"nodeType":43,"data":1557,"content":1558},{},[1559,1563],{"nodeType":42,"value":1044,"marks":1560,"data":1562},[1561],{"type":140},{},{"nodeType":42,"value":1564,"marks":1565,"data":1566}," : Les tests utilisateurs devaient être animés par un modérateur humain, ce qui limitait les itérations et était coûteux en temps.",[],{},{"nodeType":43,"data":1568,"content":1569},{},[1570,1574],{"nodeType":42,"value":1056,"marks":1571,"data":1573},[1572],{"type":140},{},{"nodeType":42,"value":1575,"marks":1576,"data":1577}," : Des chatbots simulateurs peuvent mener des tests en autonomie, poser des questions, proposer des interfaces, et récolter des feedbacks structurés.",[],{},{"nodeType":43,"data":1579,"content":1580},{},[1581,1585,1588,1596,1599,1607,1610,1618],{"nodeType":42,"value":1068,"marks":1582,"data":1584},[1583],{"type":140},{},{"nodeType":42,"value":837,"marks":1586,"data":1587},[],{},{"nodeType":999,"data":1589,"content":1591},{"uri":1590},"https:\u002F\u002Fmaze.co\u002Fai\u002F",[1592],{"nodeType":42,"value":1593,"marks":1594,"data":1595},"Maze AI",[],{},{"nodeType":42,"value":520,"marks":1597,"data":1598},[],{},{"nodeType":999,"data":1600,"content":1602},{"uri":1601},"https:\u002F\u002Fprototypr.io\u002Ftoolbox\u002Fbotmock",[1603],{"nodeType":42,"value":1604,"marks":1605,"data":1606},"Botmock",[],{},{"nodeType":42,"value":520,"marks":1608,"data":1609},[],{},{"nodeType":999,"data":1611,"content":1613},{"uri":1612},"https:\u002F\u002Fcustomgpt.ai\u002Fbrlp\u002Fcustom-gpt-ai\u002F",[1614],{"nodeType":42,"value":1615,"marks":1616,"data":1617},"GPT via interfaces",[],{},{"nodeType":42,"value":1619,"marks":1620,"data":1621}," personnalisées.",[],{},{"nodeType":1111,"data":1623,"content":1636},{"target":1624},{"metadata":1625,"sys":1628,"fields":1635},{"tags":1626,"concepts":1627},[],[],{"space":1629,"id":1631,"type":1121,"createdAt":1632,"updatedAt":1632,"environment":1633,"publishedVersion":1304,"revision":1125,"locale":26},{"sys":1630},{"type":9,"linkType":10,"id":11},"49fllBccb9yAzfC3j29iBQ","2025-06-03T20:00:56.971Z",{"sys":1634},{"id":18,"type":9,"linkType":19},{"title":1217,"description":1217},[],{"nodeType":57,"data":1638,"content":1639},{},[1640],{"nodeType":42,"value":1641,"marks":1642,"data":1643},"8. Analyse de sentiment",[],{},{"nodeType":43,"data":1645,"content":1646},{},[1647,1651],{"nodeType":42,"value":1044,"marks":1648,"data":1650},[1649],{"type":140},{},{"nodeType":42,"value":1652,"marks":1653,"data":1654}," : L'équipe UX devait lire tous les commentaires utilisateurs à la main pour y détecter le ton, les émotions, les tendances.",[],{},{"nodeType":43,"data":1656,"content":1657},{},[1658,1662],{"nodeType":42,"value":1056,"marks":1659,"data":1661},[1660],{"type":140},{},{"nodeType":42,"value":1663,"marks":1664,"data":1665}," : L'analyse de sentiment automatise ce processus en classant les messages (positifs, négatifs, neutres), en détectant les émotions dominantes et en mettant en avant les points sensibles.",[],{},{"nodeType":43,"data":1667,"content":1668},{},[1669,1673,1676,1684,1687,1695,1698,1706],{"nodeType":42,"value":1068,"marks":1670,"data":1672},[1671],{"type":140},{},{"nodeType":42,"value":837,"marks":1674,"data":1675},[],{},{"nodeType":999,"data":1677,"content":1679},{"uri":1678},"https:\u002F\u002Fhelp.monkeylearn.com\u002Fen\u002F",[1680],{"nodeType":42,"value":1681,"marks":1682,"data":1683},"MonkeyLearn",[],{},{"nodeType":42,"value":1095,"marks":1685,"data":1686},[],{},{"nodeType":999,"data":1688,"content":1690},{"uri":1689},"https:\u002F\u002Fwww.medallia.com\u002F",[1691],{"nodeType":42,"value":1692,"marks":1693,"data":1694},"Medallia AI",[],{},{"nodeType":42,"value":520,"marks":1696,"data":1697},[],{},{"nodeType":999,"data":1699,"content":1701},{"uri":1700},"https:\u002F\u002Fwww.lexalytics.com\u002F",[1702],{"nodeType":42,"value":1703,"marks":1704,"data":1705},"Lexalytics",[],{},{"nodeType":42,"value":145,"marks":1707,"data":1708},[],{},{"nodeType":1111,"data":1710,"content":1723},{"target":1711},{"metadata":1712,"sys":1715,"fields":1722},{"tags":1713,"concepts":1714},[],[],{"space":1716,"id":1718,"type":1121,"createdAt":1719,"updatedAt":1719,"environment":1720,"publishedVersion":1215,"revision":1125,"locale":26},{"sys":1717},{"type":9,"linkType":10,"id":11},"7d902sCE5cByZvKmGVxP84","2025-06-03T20:07:18.000Z",{"sys":1721},{"id":18,"type":9,"linkType":19},{"title":1217,"description":1217},[],{"nodeType":57,"data":1725,"content":1726},{},[1727],{"nodeType":42,"value":1728,"marks":1729,"data":1730},"9. Heatmaps prédictives",[],{},{"nodeType":43,"data":1732,"content":1733},{},[1734,1738],{"nodeType":42,"value":1044,"marks":1735,"data":1737},[1736],{"type":140},{},{"nodeType":42,"value":1739,"marks":1740,"data":1741}," : Les heatmaps étaient générées via des tests utilisateurs réels, souvent avec du eye-tracking ou des enregistrements de sessions.",[],{},{"nodeType":43,"data":1743,"content":1744},{},[1745,1749],{"nodeType":42,"value":1056,"marks":1746,"data":1748},[1747],{"type":140},{},{"nodeType":42,"value":1750,"marks":1751,"data":1752}," : Des modèles prédictifs analysent votre maquette (même statique) pour prédire les zones où l'attention des utilisateurs va se concentrer.",[],{},{"nodeType":43,"data":1754,"content":1755},{},[1756,1760,1763,1771,1774,1782],{"nodeType":42,"value":1068,"marks":1757,"data":1759},[1758],{"type":140},{},{"nodeType":42,"value":837,"marks":1761,"data":1762},[],{},{"nodeType":999,"data":1764,"content":1766},{"uri":1765},"https:\u002F\u002Fattentioninsight.com\u002F",[1767],{"nodeType":42,"value":1768,"marks":1769,"data":1770},"Attention Insight",[],{},{"nodeType":42,"value":520,"marks":1772,"data":1773},[],{},{"nodeType":999,"data":1775,"content":1777},{"uri":1776},"https:\u002F\u002Fwww.visualeyes.design\u002F",[1778],{"nodeType":42,"value":1779,"marks":1780,"data":1781},"VisualEyes",[],{},{"nodeType":42,"value":145,"marks":1783,"data":1784},[],{},{"nodeType":1111,"data":1786,"content":1799},{"target":1787},{"metadata":1788,"sys":1791,"fields":1798},{"tags":1789,"concepts":1790},[],[],{"space":1792,"id":1794,"type":1121,"createdAt":1795,"updatedAt":1795,"environment":1796,"publishedVersion":1304,"revision":1125,"locale":26},{"sys":1793},{"type":9,"linkType":10,"id":11},"5yIBXm3Cw52AWZ4ngVQ6Te","2025-06-03T20:17:19.659Z",{"sys":1797},{"id":18,"type":9,"linkType":19},{"title":1217,"description":1217},[],{"nodeType":57,"data":1801,"content":1802},{},[1803],{"nodeType":42,"value":1804,"marks":1805,"data":1806},"10. Documentation UX générée",[],{},{"nodeType":43,"data":1808,"content":1809},{},[1810,1814],{"nodeType":42,"value":1044,"marks":1811,"data":1813},[1812],{"type":140},{},{"nodeType":42,"value":1815,"marks":1816,"data":1817}," : La création de documentation (guides, argumentaires, rationales, audits) était manuelle, chronophage, et parfois peu maintenue.",[],{},{"nodeType":43,"data":1819,"content":1820},{},[1821,1825],{"nodeType":42,"value":1056,"marks":1822,"data":1824},[1823],{"type":140},{},{"nodeType":42,"value":1826,"marks":1827,"data":1828}," : On peut générer des documents clairs et structurés à partir de composants, d’interfaces ou de prompts. Cela aide à documenter l'intention de design et à produire des livrables clairs.",[],{},{"nodeType":43,"data":1830,"content":1831},{},[1832,1836,1839,1845,1848,1856,1859,1867],{"nodeType":42,"value":1068,"marks":1833,"data":1835},[1834],{"type":140},{},{"nodeType":42,"value":837,"marks":1837,"data":1838},[],{},{"nodeType":999,"data":1840,"content":1841},{"uri":1448},[1842],{"nodeType":42,"value":1451,"marks":1843,"data":1844},[],{},{"nodeType":42,"value":520,"marks":1846,"data":1847},[],{},{"nodeType":999,"data":1849,"content":1851},{"uri":1850},"https:\u002F\u002Fopenai.com\u002Findex\u002Fgpt-4\u002F",[1852],{"nodeType":42,"value":1853,"marks":1854,"data":1855},"GPT-4",[],{},{"nodeType":42,"value":520,"marks":1857,"data":1858},[],{},{"nodeType":999,"data":1860,"content":1862},{"uri":1861},"https:\u002F\u002Fwww.figma.com\u002Ffr-fr\u002Fai\u002F",[1863],{"nodeType":42,"value":1864,"marks":1865,"data":1866},"Figma AI plug-ins",[],{},{"nodeType":42,"value":145,"marks":1868,"data":1869},[],{},{"nodeType":1111,"data":1871,"content":1884},{"target":1872},{"metadata":1873,"sys":1876,"fields":1883},{"tags":1874,"concepts":1875},[],[],{"space":1877,"id":1879,"type":1121,"createdAt":1880,"updatedAt":1880,"environment":1881,"publishedVersion":1304,"revision":1125,"locale":26},{"sys":1878},{"type":9,"linkType":10,"id":11},"Fk6TgGy1CE78s3aFnyzh5","2025-06-03T20:23:22.246Z",{"sys":1882},{"id":18,"type":9,"linkType":19},{"title":1217,"description":1217},[],{"nodeType":57,"data":1886,"content":1887},{},[1888],{"nodeType":42,"value":1889,"marks":1890,"data":1891},"Conclusion",[],{},{"nodeType":43,"data":1893,"content":1894},{},[1895],{"nodeType":42,"value":1896,"marks":1897,"data":1898},"L'intégration de l'IA dans les pratiques UX marque une véritable évolution métier. Elle permet de se concentrer davantage sur la stratégie, la créativité et l'expérimentation tout en se libérant des tâches répétitives. Loin de remplacer le designer, l'IA devient un co-équipier puissant, qui enrichit la compréhension des utilisateurs, accélère les processus, et aide à prendre des décisions plus informées. La clé est de savoir l'utiliser intelligemment, à bon escient, tout en conservant l'humain au cœur de l'expérience conçue.",[],{},"https:\u002F\u002Fimages.ctfassets.net\u002Ftg11qz6a9e5b\u002F2svHeNU0wQSbvprWJYXbkp\u002Fd321e30ddecd19f3727bf2db9fea649b\u002Fintelligence-artificielle.jpg","IA",{"sys":1902,"fields":1914},{"space":1903,"id":1905,"type":13,"createdAt":1906,"updatedAt":1907,"environment":1908,"publishedVersion":1910,"revision":1911,"contentType":1912,"locale":26},{"sys":1904},{"type":9,"linkType":10,"id":11},"CbeawrYgBNQ0FBGFgxjQ2","2025-01-04T17:17:24.357Z","2025-05-28T19:11:46.326Z",{"sys":1909},{"id":18,"type":9,"linkType":19},148,41,{"sys":1913},{"type":9,"linkType":24,"id":25},{"slug":1915,"title":1916,"description":1917,"date":1918,"content":1919,"codeSnippet":104,"ctaUrl":104,"imageUrl":2178,"imageAlt":2179},"styliser-select","C’est officiel : on peut enfin styliser les \u003Cselect> nativement avec CSS !","Et vous, avez-vous déjà commencé à styliser vos \u003Cselect> avec les nouvelles propriétés CSS ? N’hésitez pas à partager vos astuces et cas d’usage !","2025-04-25T00:00-05:00",{"data":1920,"content":1921,"nodeType":103},{},[1922,1938,1945,1952,1996,2003,2011,2020,2035,2042,2057,2120,2127,2143,2149,2153,2160,2172],{"data":1923,"content":1924,"nodeType":43},{},[1925,1929,1934],{"data":1926,"marks":1927,"value":1928,"nodeType":42},{},[],"Tous les développeurs frontend en ont fait l'expérience au moins une fois : vouloir personnaliser un élément ",{"data":1930,"marks":1931,"value":1933,"nodeType":42},{},[1932],{"type":490},"\u003Cselect>",{"data":1935,"marks":1936,"value":1937,"nodeType":42},{},[]," en HTML relevait jusqu’à récemment du parcours du combattant. Il fallait souvent recourir à des bibliothèques JavaScript complexes ou reconstruire entièrement le composant avec des solutions maison, sacrifiant au passage accessibilité, performances et maintenabilité.",{"data":1939,"content":1940,"nodeType":43},{},[1941],{"data":1942,"marks":1943,"value":1944,"nodeType":42},{},[],"Mais cette époque est (enfin) révolue !",{"data":1946,"content":1947,"nodeType":57},{},[1948],{"data":1949,"marks":1950,"value":1951,"nodeType":42},{},[],"Une révolution grâce à l’évolution de CSS",{"data":1953,"content":1954,"nodeType":43},{},[1955,1959,1964,1968,1973,1977,1982,1987,1992],{"data":1956,"marks":1957,"value":1958,"nodeType":42},{},[],"Grâce aux avancées récentes du CSS, notamment avec l’introduction de la pseudo-classe ",{"data":1960,"marks":1961,"value":1963,"nodeType":42},{},[1962],{"type":490},"::part",{"data":1965,"marks":1966,"value":1967,"nodeType":42},{},[]," et le support généralisé de ",{"data":1969,"marks":1970,"value":1972,"nodeType":42},{},[1971],{"type":490},"appearance: none",{"data":1974,"marks":1975,"value":1976,"nodeType":42},{},[],", il est désormais possible de ",{"data":1978,"marks":1979,"value":1981,"nodeType":42},{},[1980],{"type":140},"styliser un ",{"data":1983,"marks":1984,"value":1933,"nodeType":42},{},[1985,1986],{"type":490},{"type":140},{"data":1988,"marks":1989,"value":1991,"nodeType":42},{},[1990],{"type":140}," natif",{"data":1993,"marks":1994,"value":1995,"nodeType":42},{},[]," sans aucun hack, ni dépendance JS, et avec un contrôle total sur l’apparence.",{"data":1997,"content":1998,"nodeType":43},{},[1999],{"data":2000,"marks":2001,"value":104,"nodeType":42},{},[2002],{"type":140},{"data":2004,"content":2005,"nodeType":43},{},[2006],{"data":2007,"marks":2008,"value":2010,"nodeType":42},{},[2009],{"type":140},"Exemple concret :",{"data":2012,"content":2013,"nodeType":492},{},[2014],{"data":2015,"marks":2016,"value":2019,"nodeType":42},{},[2017,2018],{"type":490},{"type":140},"select {\n  appearance: none;\n  background-color: white;\n  padding: 0.5rem;\n  border-radius: 8px;\n  border: 1px solid #ccc;\n}",{"data":2021,"content":2022,"nodeType":43},{},[2023,2027,2031],{"data":2024,"marks":2025,"value":2026,"nodeType":42},{},[],"Ce simple bloc de code vous permet d’obtenir un élément ",{"data":2028,"marks":2029,"value":1933,"nodeType":42},{},[2030],{"type":490},{"data":2032,"marks":2033,"value":2034,"nodeType":42},{},[]," élégant, minimaliste, et surtout cohérent avec le design global de votre interface. ",{"data":2036,"content":2037,"nodeType":57},{},[2038],{"data":2039,"marks":2040,"value":2041,"nodeType":42},{},[],"Pourquoi est-ce une excellente nouvelle ?",{"data":2043,"content":2044,"nodeType":43},{},[2045,2049,2054],{"data":2046,"marks":2047,"value":2048,"nodeType":42},{},[],"Styliser les menus déroulants natifs apporte de ",{"data":2050,"marks":2051,"value":2053,"nodeType":42},{},[2052],{"type":140},"nombreux avantages",{"data":2055,"marks":2056,"value":305,"nodeType":42},{},[],{"data":2058,"content":2059,"nodeType":251},{},[2060,2075,2090,2105],{"data":2061,"content":2062,"nodeType":208},{},[2063],{"data":2064,"content":2065,"nodeType":43},{},[2066,2071],{"data":2067,"marks":2068,"value":2070,"nodeType":42},{},[2069],{"type":140},"Accessibilité améliorée",{"data":2072,"marks":2073,"value":2074,"nodeType":42},{},[]," : on conserve le comportement natif du composant, donc une meilleure compatibilité avec les technologies d’assistance.",{"data":2076,"content":2077,"nodeType":208},{},[2078],{"data":2079,"content":2080,"nodeType":43},{},[2081,2086],{"data":2082,"marks":2083,"value":2085,"nodeType":42},{},[2084],{"type":140},"Meilleures performances",{"data":2087,"marks":2088,"value":2089,"nodeType":42},{},[]," : fini les surcharges dues aux bibliothèques tierces.",{"data":2091,"content":2092,"nodeType":208},{},[2093],{"data":2094,"content":2095,"nodeType":43},{},[2096,2101],{"data":2097,"marks":2098,"value":2100,"nodeType":42},{},[2099],{"type":140},"Moins de dépendances",{"data":2102,"marks":2103,"value":2104,"nodeType":42},{},[]," : vous réduisez le poids de votre projet et facilitez sa maintenance.",{"data":2106,"content":2107,"nodeType":208},{},[2108],{"data":2109,"content":2110,"nodeType":43},{},[2111,2116],{"data":2112,"marks":2113,"value":2115,"nodeType":42},{},[2114],{"type":140},"Expérience utilisateur optimisée",{"data":2117,"marks":2118,"value":2119,"nodeType":42},{},[]," : le contrôle visuel vous permet d’harmoniser tous vos composants UI.",{"data":2121,"content":2122,"nodeType":57},{},[2123],{"data":2124,"marks":2125,"value":2126,"nodeType":42},{},[],"Une petite victoire qui change tout",{"data":2128,"content":2129,"nodeType":43},{},[2130,2134,2139],{"data":2131,"marks":2132,"value":2133,"nodeType":42},{},[],"Ce changement peut sembler minime, mais il représente une ",{"data":2135,"marks":2136,"value":2138,"nodeType":42},{},[2137],{"type":140},"grande avancée pour l’expérience développeur et utilisateur",{"data":2140,"marks":2141,"value":2142,"nodeType":42},{},[],". Fini les compromis entre accessibilité, performance et esthétisme. On peut désormais bâtir des interfaces plus cohérentes, plus accessibles, et plus légères.",{"data":2144,"content":2145,"nodeType":43},{},[2146],{"data":2147,"marks":2148,"value":104,"nodeType":42},{},[],{"data":2150,"content":2151,"nodeType":2152},{},[],"hr",{"data":2154,"content":2155,"nodeType":43},{},[2156],{"data":2157,"marks":2158,"value":104,"nodeType":42},{},[2159],{"type":140},{"data":2161,"content":2162,"nodeType":43},{},[2163,2168],{"data":2164,"marks":2165,"value":2167,"nodeType":42},{},[2166],{"type":140},"En résumé",{"data":2169,"marks":2170,"value":2171,"nodeType":42},{},[]," : CSS continue d’évoluer dans le bon sens, en nous rapprochant d’un futur où les composants natifs HTML ne seront plus un frein au design, mais des alliés puissants et fiables.",{"data":2173,"content":2174,"nodeType":43},{},[2175],{"data":2176,"marks":2177,"value":104,"nodeType":42},{},[],"https:\u002F\u002Fimages.ctfassets.net\u002Ftg11qz6a9e5b\u002F55c8z2TEEpqvmT3PR5cd28\u002F2f464cc3a344d63ab2448c014100e97c\u002F2025-05-13_20-14-31.jpg","Styling the \u003Cselect> element",{"sys":2181,"fields":2193},{"space":2182,"id":2184,"type":13,"createdAt":2185,"updatedAt":2186,"environment":2187,"publishedVersion":2189,"revision":2190,"contentType":2191,"locale":26},{"sys":2183},{"type":9,"linkType":10,"id":11},"5ybFH9jgCRgpcjx6iROxEJ","2025-01-16T14:49:22.183Z","2026-09-11T13:23:36.738Z",{"sys":2188},{"id":18,"type":9,"linkType":19},482,121,{"sys":2192},{"type":9,"linkType":24,"id":25},{"slug":2194,"title":2195,"description":2196,"date":2197,"content":2198,"codeSnippet":104,"ctaUrl":104,"imageUrl":2876,"imageAlt":2877},"storybook-with-angular","10 étapes pour configurer Storybook avec Angular pour construire un Design System","Envie de créer une bibliothèque de composants design, testable, documentée et prête à être partagée entre développeurs et designers ? Voici comment j’ai monté une architecture Angular + Storybook qui tient la route, accessibilité incluse.","2024-11-13T00:00-04:00",{"data":2199,"content":2200,"nodeType":103},{},[2201,2208,2215,2231,2238,2245,2308,2315,2322,2329,2336,2343,2350,2393,2400,2407,2414,2421,2437,2444,2451,2458,2473,2480,2487,2494,2509,2516,2524,2577,2585,2618,2625,2632,2640,2647,2655,2679,2686,2701,2708,2715,2722,2729,2744,2751,2758,2774,2781,2788,2796,2811,2818,2825,2832,2839,2846,2853,2860],{"data":2202,"content":2203,"nodeType":57},{},[2204],{"data":2205,"marks":2206,"value":2207,"nodeType":42},{},[],"Étape 1 – Le décor : un Storybook, un Angular, un objectif",{"data":2209,"content":2210,"nodeType":43},{},[2211],{"data":2212,"marks":2213,"value":2214,"nodeType":42},{},[],"Imaginez une boîte à outils visuelle pour vos composants Angular : vous ouvrez une page web, et là, tous vos boutons, champs, menus apparaissent, joliment rangés, testables, commentés, prêts à l'emploi. C’est ça, Storybook.",{"data":2216,"content":2217,"nodeType":43},{},[2218,2222,2227],{"data":2219,"marks":2220,"value":2221,"nodeType":42},{},[],"Ce projet est basé sur Angular 18 et il a pour but de centraliser des composants UI que vous pouvez ",{"data":2223,"marks":2224,"value":2226,"nodeType":42},{},[2225],{"type":140},"voir, tester, documenter et réutiliser",{"data":2228,"marks":2229,"value":2230,"nodeType":42},{},[],", sans vous arracher les cheveux à chaque nouveau projet.",{"data":2232,"content":2233,"nodeType":57},{},[2234],{"data":2235,"marks":2236,"value":2237,"nodeType":42},{},[],"Étape 2 – Avant de se lancer, on prépare le terrain",{"data":2239,"content":2240,"nodeType":43},{},[2241],{"data":2242,"marks":2243,"value":2244,"nodeType":42},{},[],"Avant d’écrire une ligne de code, voici ce qu’il vous faut :",{"data":2246,"content":2247,"nodeType":251},{},[2248,2263,2278,2293],{"data":2249,"content":2250,"nodeType":208},{},[2251],{"data":2252,"content":2253,"nodeType":43},{},[2254,2259],{"data":2255,"marks":2256,"value":2258,"nodeType":42},{},[2257],{"type":140},"Node.js",{"data":2260,"marks":2261,"value":2262,"nodeType":42},{},[]," v20 ou plus",{"data":2264,"content":2265,"nodeType":208},{},[2266],{"data":2267,"content":2268,"nodeType":43},{},[2269,2274],{"data":2270,"marks":2271,"value":2273,"nodeType":42},{},[2272],{"type":140},"npm",{"data":2275,"marks":2276,"value":2277,"nodeType":42},{},[]," (le gestionnaire de paquets)",{"data":2279,"content":2280,"nodeType":208},{},[2281],{"data":2282,"content":2283,"nodeType":43},{},[2284,2289],{"data":2285,"marks":2286,"value":2288,"nodeType":42},{},[2287],{"type":140},"Angular CLI",{"data":2290,"marks":2291,"value":2292,"nodeType":42},{},[]," v18",{"data":2294,"content":2295,"nodeType":208},{},[2296],{"data":2297,"content":2298,"nodeType":43},{},[2299,2304],{"data":2300,"marks":2301,"value":2303,"nodeType":42},{},[2302],{"type":140},"Sass",{"data":2305,"marks":2306,"value":2307,"nodeType":42},{},[]," (pour les styles qui ont du style)",{"data":2309,"content":2310,"nodeType":43},{},[2311],{"data":2312,"marks":2313,"value":2314,"nodeType":42},{},[],"Installez tout ça. Prenez un café. On passe aux choses sérieuses.",{"data":2316,"content":2317,"nodeType":57},{},[2318],{"data":2319,"marks":2320,"value":2321,"nodeType":42},{},[],"Étape 3 – Clone, install, enjoy ",{"data":2323,"content":2324,"nodeType":43},{},[2325],{"data":2326,"marks":2327,"value":2328,"nodeType":42},{},[],"Dans votre terminal :",{"data":2330,"content":2331,"nodeType":492},{},[2332],{"data":2333,"marks":2334,"value":2335,"nodeType":42},{},[],"git clone \u003Crepository-name>\ncd \u003Crepository-name>\n\u003Cnpm install>",{"data":2337,"content":2338,"nodeType":43},{},[2339],{"data":2340,"marks":2341,"value":2342,"nodeType":42},{},[],"Puis si ce n’est pas déjà fait :",{"data":2344,"content":2345,"nodeType":492},{},[2346],{"data":2347,"marks":2348,"value":2349,"nodeType":42},{},[],"\u003Cnpm install sass --save-dev>",{"data":2351,"content":2352,"nodeType":43},{},[2353,2357,2362,2366,2371,2375,2380,2384,2389],{"data":2354,"marks":2355,"value":2356,"nodeType":42},{},[],"Par défaut, le projet s’appelle ",{"data":2358,"marks":2359,"value":2361,"nodeType":42},{},[2360],{"type":490},"common-controls-lib",{"data":2363,"marks":2364,"value":2365,"nodeType":42},{},[],". Mais rien ne vous empêche de lui donner un nom plus stylé (genre ",{"data":2367,"marks":2368,"value":2370,"nodeType":42},{},[2369],{"type":490},"awesome-ui-kit",{"data":2372,"marks":2373,"value":2374,"nodeType":42},{},[],"). Attention : si vous changez le nom, pensez à le mettre à jour dans les fichiers comme ",{"data":2376,"marks":2377,"value":2379,"nodeType":42},{},[2378],{"type":490},"angular.json",{"data":2381,"marks":2382,"value":2383,"nodeType":42},{},[]," et les chemins de ",{"data":2385,"marks":2386,"value":2388,"nodeType":42},{},[2387],{"type":490},"projects\u002F",{"data":2390,"marks":2391,"value":2392,"nodeType":42},{},[],". ",{"data":2394,"content":2395,"nodeType":57},{},[2396],{"data":2397,"marks":2398,"value":2399,"nodeType":42},{},[],"Étape 4 – Démarrez Storybook (et ouvrez vos yeux)",{"data":2401,"content":2402,"nodeType":43},{},[2403],{"data":2404,"marks":2405,"value":2406,"nodeType":42},{},[],"La magie commence ici :",{"data":2408,"content":2409,"nodeType":492},{},[2410],{"data":2411,"marks":2412,"value":2413,"nodeType":42},{},[],"\u003Cnpm run storybook>",{"data":2415,"content":2416,"nodeType":43},{},[2417],{"data":2418,"marks":2419,"value":2420,"nodeType":42},{},[],"Une belle interface s’ouvre dans votre navigateur pour prendre des patterns UI. C’est votre showroom de composants. Cliquez, testez, explorez. ",{"data":2422,"content":2436,"nodeType":1111},{"target":2423},{"metadata":2424,"sys":2427,"fields":2434},{"tags":2425,"concepts":2426},[],[],{"space":2428,"id":2430,"type":1121,"createdAt":2431,"updatedAt":2431,"environment":2432,"publishedVersion":1215,"revision":1125,"locale":26},{"sys":2429},{"type":9,"linkType":10,"id":11},"2Vm3BGysCF8j2S4ojSDJMq","2025-05-20T14:33:48.535Z",{"sys":2433},{"id":18,"type":9,"linkType":19},{"title":104,"description":2435},"storybook-a11y-addon-optimizé",[],{"data":2438,"content":2439,"nodeType":57},{},[2440],{"data":2441,"marks":2442,"value":2443,"nodeType":42},{},[],"Étape 5 – L’accessibilité, ce n’est pas optionnel ",{"data":2445,"content":2446,"nodeType":43},{},[2447],{"data":2448,"marks":2449,"value":2450,"nodeType":42},{},[],"Vous voulez que vos composants soient utilisables avec un lecteur d’écran, au clavier, et conformes aux standards ? Ajoutez l’addon a11y de Storybook : ",{"data":2452,"content":2453,"nodeType":492},{},[2454],{"data":2455,"marks":2456,"value":2457,"nodeType":42},{},[],"\u003Cnpm install @storybook\u002Faddon-a11y --save-dev>\n",{"data":2459,"content":2460,"nodeType":43},{},[2461,2465,2470],{"data":2462,"marks":2463,"value":2464,"nodeType":42},{},[],"Puis, dans ",{"data":2466,"marks":2467,"value":2469,"nodeType":42},{},[2468],{"type":490},"main.ts",{"data":2471,"marks":2472,"value":305,"nodeType":42},{},[],{"data":2474,"content":2475,"nodeType":492},{},[2476],{"data":2477,"marks":2478,"value":2479,"nodeType":42},{},[],"module.exports = {\n  stories: ['..\u002Fsrc\u002F**\u002F*.stories.mdx', '..\u002Fsrc\u002F**\u002F*.stories.@(js|jsx|ts|tsx)'],\n  addons: ['@storybook\u002Faddon-a11y'],\n};",{"data":2481,"content":2482,"nodeType":43},{},[2483],{"data":2484,"marks":2485,"value":2486,"nodeType":42},{},[],"Et voilà : Storybook vous alertera si un bouton manque d’un label ARIA ou si votre contraste est douteux.",{"data":2488,"content":2489,"nodeType":57},{},[2490],{"data":2491,"marks":2492,"value":2493,"nodeType":42},{},[],"Étape 6 – Le bouton, ce héros du quotidien ",{"data":2495,"content":2496,"nodeType":43},{},[2497,2501,2506],{"data":2498,"marks":2499,"value":2500,"nodeType":42},{},[],"Premier composant star de la bibliothèque : ",{"data":2502,"marks":2503,"value":2505,"nodeType":42},{},[2504],{"type":140},"le bouton",{"data":2507,"marks":2508,"value":145,"nodeType":42},{},[],{"data":2510,"content":2511,"nodeType":43},{},[2512],{"data":2513,"marks":2514,"value":2515,"nodeType":42},{},[],"Pourquoi lui ? Parce qu’il est partout, tout le temps. Et mal fait, il peut ruiner toute une interface.",{"data":2517,"content":2518,"nodeType":43},{},[2519],{"data":2520,"marks":2521,"value":2523,"nodeType":42},{},[2522],{"type":140},"Ce qu’il sait faire :",{"data":2525,"content":2526,"nodeType":251},{},[2527,2557,2567],{"data":2528,"content":2529,"nodeType":208},{},[2530],{"data":2531,"content":2532,"nodeType":43},{},[2533,2537,2542,2545,2550,2553],{"data":2534,"marks":2535,"value":2536,"nodeType":42},{},[],"Trois variantes : ",{"data":2538,"marks":2539,"value":2541,"nodeType":42},{},[2540],{"type":490},"primary",{"data":2543,"marks":2544,"value":520,"nodeType":42},{},[],{"data":2546,"marks":2547,"value":2549,"nodeType":42},{},[2548],{"type":490},"secondary",{"data":2551,"marks":2552,"value":520,"nodeType":42},{},[],{"data":2554,"marks":2555,"value":42,"nodeType":42},{},[2556],{"type":490},{"data":2558,"content":2559,"nodeType":208},{},[2560],{"data":2561,"content":2562,"nodeType":43},{},[2563],{"data":2564,"marks":2565,"value":2566,"nodeType":42},{},[],"Peut afficher une icône (gauche ou droite, comme vous voulez)",{"data":2568,"content":2569,"nodeType":208},{},[2570],{"data":2571,"content":2572,"nodeType":43},{},[2573],{"data":2574,"marks":2575,"value":2576,"nodeType":42},{},[],"Gère l’état disabled, le focus clavier, les labels ARIA…",{"data":2578,"content":2579,"nodeType":43},{},[2580],{"data":2581,"marks":2582,"value":2584,"nodeType":42},{},[2583],{"type":140},"Testé et validé :",{"data":2586,"content":2587,"nodeType":251},{},[2588,2598,2608],{"data":2589,"content":2590,"nodeType":208},{},[2591],{"data":2592,"content":2593,"nodeType":43},{},[2594],{"data":2595,"marks":2596,"value":2597,"nodeType":42},{},[],"Branché dans une appli Angular réelle",{"data":2599,"content":2600,"nodeType":208},{},[2601],{"data":2602,"content":2603,"nodeType":43},{},[2604],{"data":2605,"marks":2606,"value":2607,"nodeType":42},{},[],"Comportements testés (clic, focus, accessibilité)",{"data":2609,"content":2610,"nodeType":208},{},[2611],{"data":2612,"content":2613,"nodeType":43},{},[2614],{"data":2615,"marks":2616,"value":2617,"nodeType":42},{},[],"Comparé à d’anciens composants pour s’assurer qu’il est isofonctionnel",{"data":2619,"content":2620,"nodeType":57},{},[2621],{"data":2622,"marks":2623,"value":2624,"nodeType":42},{},[],"Étape 7 – Créer votre bibliothèque Angular ",{"data":2626,"content":2627,"nodeType":43},{},[2628],{"data":2629,"marks":2630,"value":2631,"nodeType":42},{},[],"Envie d’emballer vos composants comme une vraie lib pro ? Voici comment : ",{"data":2633,"content":2634,"nodeType":492},{},[2635],{"data":2636,"marks":2637,"value":2639,"nodeType":42},{},[2638],{"type":490},"\u003Cng generate library nom-de-la-bibliotheque>",{"data":2641,"content":2642,"nodeType":43},{},[2643],{"data":2644,"marks":2645,"value":2646,"nodeType":42},{},[],"Vous obtenez :",{"data":2648,"content":2649,"nodeType":492},{},[2650],{"data":2651,"marks":2652,"value":2654,"nodeType":42},{},[2653],{"type":490},"\u003Cprojects\u002F\n└── \u003C nom-de-la-bibliothèque >\u002F\n    ├── src\u002F\n    │   └── lib\u002F\n    │       ├── nom-de-la-bibliotheque.component.ts\n    │       ├── nom-de-la-bibliotheque.service.ts\n    │       └── public-api.ts\n    ├── ng-package.json\n    └── package.json>\n",{"data":2656,"content":2657,"nodeType":43},{},[2658,2662,2667,2671,2676],{"data":2659,"marks":2660,"value":2661,"nodeType":42},{},[],"Ensuite, copiez vos composants dans ",{"data":2663,"marks":2664,"value":2666,"nodeType":42},{},[2665],{"type":490},"common-controls",{"data":2668,"marks":2669,"value":2670,"nodeType":42},{},[],", mettez à jour le ",{"data":2672,"marks":2673,"value":2675,"nodeType":42},{},[2674],{"type":490},"public-api.ts",{"data":2677,"marks":2678,"value":305,"nodeType":42},{},[],{"data":2680,"content":2681,"nodeType":492},{},[2682],{"data":2683,"marks":2684,"value":2685,"nodeType":42},{},[],"\u003C\u002F*\n * Public API Surface of common-controls-lib\n *\u002F\n\nexport * from '.\u002Flib\u002Fcommon-controls\u002Fbutton\u002Fbutton.module';\nexport * from '.\u002Flib\u002Fcommon-controls\u002Fbutton\u002Fbutton.component';>",{"data":2687,"content":2688,"nodeType":43},{},[2689,2693,2698],{"data":2690,"marks":2691,"value":2692,"nodeType":42},{},[],"Et précisez le fichier d’entrée dans ",{"data":2694,"marks":2695,"value":2697,"nodeType":42},{},[2696],{"type":490},"ng-package.json",{"data":2699,"marks":2700,"value":305,"nodeType":42},{},[],{"data":2702,"content":2703,"nodeType":492},{},[2704],{"data":2705,"marks":2706,"value":2707,"nodeType":42},{},[],"\"lib\": {\n  \"entryFile\": \"index.ts\"\n}",{"data":2709,"content":2710,"nodeType":57},{},[2711],{"data":2712,"marks":2713,"value":2714,"nodeType":42},{},[],"Étape 8 – Build et packaging : on emballe le tout ",{"data":2716,"content":2717,"nodeType":43},{},[2718],{"data":2719,"marks":2720,"value":2721,"nodeType":42},{},[],"Prêt à générer un package installable dans d’autres projets ? ",{"data":2723,"content":2724,"nodeType":492},{},[2725],{"data":2726,"marks":2727,"value":2728,"nodeType":42},{},[],"\u003Cnpm run build:lib>",{"data":2730,"content":2731,"nodeType":43},{},[2732,2736,2741],{"data":2733,"marks":2734,"value":2735,"nodeType":42},{},[],"Angular va compiler tout ça dans ",{"data":2737,"marks":2738,"value":2740,"nodeType":42},{},[2739],{"type":490},"dist\u002Fnom-de-la-bibliotheque\u002F",{"data":2742,"marks":2743,"value":145,"nodeType":42},{},[],{"data":2745,"content":2746,"nodeType":43},{},[2747],{"data":2748,"marks":2749,"value":2750,"nodeType":42},{},[],"Puis, créez l’archive :",{"data":2752,"content":2753,"nodeType":492},{},[2754],{"data":2755,"marks":2756,"value":2757,"nodeType":42},{},[],"\u003Ccd dist\u002Fnom-de-la-bibliotheque>\n\u003Cnpm pack>",{"data":2759,"content":2760,"nodeType":43},{},[2761,2765,2770],{"data":2762,"marks":2763,"value":2764,"nodeType":42},{},[],"Vous verrez apparaître un joli ",{"data":2766,"marks":2767,"value":2769,"nodeType":42},{},[2768],{"type":490},".tgz",{"data":2771,"marks":2772,"value":2773,"nodeType":42},{},[]," prêt à être importé ailleurs. ",{"data":2775,"content":2776,"nodeType":57},{},[2777],{"data":2778,"marks":2779,"value":2780,"nodeType":42},{},[],"Étape 9 – Réutiliser la bibliothèque dans un autre projet",{"data":2782,"content":2783,"nodeType":43},{},[2784],{"data":2785,"marks":2786,"value":2787,"nodeType":42},{},[],"Dans votre projet cible :",{"data":2789,"content":2790,"nodeType":492},{},[2791],{"data":2792,"marks":2793,"value":2795,"nodeType":42},{},[2794],{"type":490},"\u003Cnpm install ..\u002Fchemin\u002Fvers\u002Fnom-de-la-bibliotheque-1.0.0.tgz>",{"data":2797,"content":2798,"nodeType":43},{},[2799,2803,2808],{"data":2800,"marks":2801,"value":2802,"nodeType":42},{},[],"Et dans ",{"data":2804,"marks":2805,"value":2807,"nodeType":42},{},[2806],{"type":490},"app.module.ts",{"data":2809,"marks":2810,"value":305,"nodeType":42},{},[],{"data":2812,"content":2813,"nodeType":492},{},[2814],{"data":2815,"marks":2816,"value":2817,"nodeType":42},{},[],"import { ButtonModule } from 'nom-de-la-bibliotheque';\n\n@NgModule({\n  imports: [ButtonModule],\n})\nexport class AppModule {}",{"data":2819,"content":2820,"nodeType":43},{},[2821],{"data":2822,"marks":2823,"value":2824,"nodeType":42},{},[],"Et voilà, votre composant bouton est prêt à servir dans un nouveau projet.",{"data":2826,"content":2827,"nodeType":57},{},[2828],{"data":2829,"marks":2830,"value":2831,"nodeType":42},{},[],"Étape 10 – Structure finale (ou comment rester organisé)",{"data":2833,"content":2834,"nodeType":43},{},[2835],{"data":2836,"marks":2837,"value":2838,"nodeType":42},{},[],"En résumé, votre projet ressemblera à ça :",{"data":2840,"content":2841,"nodeType":492},{},[2842],{"data":2843,"marks":2844,"value":2845,"nodeType":42},{},[],"\u003Cstorybook\u002F\n├── src\u002F\n│   └── lib\u002F\n│       └── common-controls\u002F\n│           └── button\u002F\n├── projects\u002F\n│   └── nom-de-la-bibliothèque\u002F\n│       └── src\u002Flib\u002Fcommon-controls\u002F\n│           └── button\u002F\n└── dist\u002F\n    └── nom-de-la-bibliothèque\u002F\n        └── .tgz generé>",{"data":2847,"content":2848,"nodeType":43},{},[2849],{"data":2850,"marks":2851,"value":2852,"nodeType":42},{},[],"Claire, modulaire, documentée, accessible. On ne fait pas mieux.",{"data":2854,"content":2855,"nodeType":57},{},[2856],{"data":2857,"marks":2858,"value":2859,"nodeType":42},{},[],"En conclusion ",{"data":2861,"content":2862,"nodeType":43},{},[2863,2867,2872],{"data":2864,"marks":2865,"value":2866,"nodeType":42},{},[],"Créer un design system propre, testable et accessible avec Angular + Storybook, c’est non seulement faisable, mais ",{"data":2868,"marks":2869,"value":2871,"nodeType":42},{},[2870],{"type":140},"hautement recommandé",{"data":2873,"marks":2874,"value":2875,"nodeType":42},{},[],". Vous gagnez du temps, de la cohérence, et vous offrez une meilleure expérience aux utilisateurs. Et avec cette structure, vous êtes prêt à scaler vos projets sans tout casser. ","https:\u002F\u002Fimages.ctfassets.net\u002Ftg11qz6a9e5b\u002F3DJLJkxeTjTBZKA7ZFDfef\u002F063e901ec86ee5349f1b2453df43c592\u002Fstorybook-angular.jpg","Storybook angular",{"sys":2879,"fields":2886},{"space":2880,"id":12,"type":13,"createdAt":14,"updatedAt":15,"environment":2882,"publishedVersion":20,"revision":21,"contentType":2884,"locale":26},{"sys":2881},{"type":9,"linkType":10,"id":11},{"sys":2883},{"id":18,"type":9,"linkType":19},{"sys":2885},{"type":9,"linkType":24,"id":25},{"slug":28,"title":29,"description":30,"date":31,"content":2887,"codeSnippet":104,"ctaUrl":104,"imageUrl":105,"imageAlt":106},{"data":2888,"content":2889,"nodeType":103},{},[2890,2896,2902,2908,2914,2920,2926,2932,2938,2944],{"data":2891,"content":2892,"nodeType":43},{},[2893],{"data":2894,"marks":2895,"value":41,"nodeType":42},{},[],{"data":2897,"content":2898,"nodeType":43},{},[2899],{"data":2900,"marks":2901,"value":50,"nodeType":42},{},[],{"data":2903,"content":2904,"nodeType":57},{},[2905],{"data":2906,"marks":2907,"value":41,"nodeType":42},{},[],{"data":2909,"content":2910,"nodeType":43},{},[2911],{"data":2912,"marks":2913,"value":64,"nodeType":42},{},[],{"data":2915,"content":2916,"nodeType":57},{},[2917],{"data":2918,"marks":2919,"value":41,"nodeType":42},{},[],{"data":2921,"content":2922,"nodeType":43},{},[2923],{"data":2924,"marks":2925,"value":77,"nodeType":42},{},[],{"data":2927,"content":2928,"nodeType":57},{},[2929],{"data":2930,"marks":2931,"value":84,"nodeType":42},{},[],{"data":2933,"content":2934,"nodeType":43},{},[2935],{"data":2936,"marks":2937,"value":64,"nodeType":42},{},[],{"data":2939,"content":2940,"nodeType":57},{},[2941],{"data":2942,"marks":2943,"value":41,"nodeType":42},{},[],{"data":2945,"content":2946,"nodeType":43},{},[2947],{"data":2948,"marks":2949,"value":77,"nodeType":42},{},[],{"sys":2951,"fields":2963},{"space":2952,"id":2954,"type":13,"createdAt":2955,"updatedAt":2956,"environment":2957,"publishedVersion":2959,"revision":2960,"contentType":2961,"locale":26},{"sys":2953},{"type":9,"linkType":10,"id":11},"3640fshx2VPZyolEAAHBWP","2025-01-16T23:23:41.156Z","2025-04-23T14:20:39.902Z",{"sys":2958},{"id":18,"type":9,"linkType":19},20,4,{"sys":2962},{"type":9,"linkType":24,"id":25},{"slug":2964,"title":2965,"description":2966,"date":2967,"content":2968,"codeSnippet":104,"ctaUrl":104,"imageUrl":3031,"imageAlt":3032},"UI-from-scratch","Article 5 - En cours de création","Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem ","2024-09-26T00:00-05:00",{"data":2969,"content":2970,"nodeType":103},{},[2971,2977,2983,2989,2995,3001,3007,3013,3019,3025],{"data":2972,"content":2973,"nodeType":57},{},[2974],{"data":2975,"marks":2976,"value":41,"nodeType":42},{},[],{"data":2978,"content":2979,"nodeType":43},{},[2980],{"data":2981,"marks":2982,"value":50,"nodeType":42},{},[],{"data":2984,"content":2985,"nodeType":57},{},[2986],{"data":2987,"marks":2988,"value":41,"nodeType":42},{},[],{"data":2990,"content":2991,"nodeType":43},{},[2992],{"data":2993,"marks":2994,"value":64,"nodeType":42},{},[],{"data":2996,"content":2997,"nodeType":57},{},[2998],{"data":2999,"marks":3000,"value":41,"nodeType":42},{},[],{"data":3002,"content":3003,"nodeType":43},{},[3004],{"data":3005,"marks":3006,"value":77,"nodeType":42},{},[],{"data":3008,"content":3009,"nodeType":57},{},[3010],{"data":3011,"marks":3012,"value":84,"nodeType":42},{},[],{"data":3014,"content":3015,"nodeType":43},{},[3016],{"data":3017,"marks":3018,"value":64,"nodeType":42},{},[],{"data":3020,"content":3021,"nodeType":57},{},[3022],{"data":3023,"marks":3024,"value":41,"nodeType":42},{},[],{"data":3026,"content":3027,"nodeType":43},{},[3028],{"data":3029,"marks":3030,"value":77,"nodeType":42},{},[],"https:\u002F\u002Fimages.ctfassets.net\u002Ftg11qz6a9e5b\u002F39N5nBJn3ieEgfPVNWj2QQ\u002F894dcc664abf32be96bfa7d38e53ba1c\u002Fwebsiteservice.jpg","websiteservice",{"article":3034,"articles":3107},{"sys":3035,"fields":3043},{"space":3036,"id":12,"type":13,"createdAt":14,"updatedAt":15,"environment":3038,"publishedVersion":20,"revision":21,"contentType":3040,"locale":3042},{"sys":3037},{"type":9,"linkType":10,"id":11},{"sys":3039},{"id":18,"type":9,"linkType":19},{"sys":3041},{"type":9,"linkType":24,"id":25},"en-US",{"slug":28,"title":29,"description":2966,"date":31,"content":3044,"codeSnippet":104,"ctaUrl":104,"imageUrl":105,"imageAlt":106},{"data":3045,"content":3046,"nodeType":103},{},[3047,3053,3059,3065,3071,3077,3083,3089,3095,3101],{"data":3048,"content":3049,"nodeType":43},{},[3050],{"data":3051,"marks":3052,"value":41,"nodeType":42},{},[],{"data":3054,"content":3055,"nodeType":43},{},[3056],{"data":3057,"marks":3058,"value":50,"nodeType":42},{},[],{"data":3060,"content":3061,"nodeType":57},{},[3062],{"data":3063,"marks":3064,"value":41,"nodeType":42},{},[],{"data":3066,"content":3067,"nodeType":43},{},[3068],{"data":3069,"marks":3070,"value":64,"nodeType":42},{},[],{"data":3072,"content":3073,"nodeType":57},{},[3074],{"data":3075,"marks":3076,"value":41,"nodeType":42},{},[],{"data":3078,"content":3079,"nodeType":43},{},[3080],{"data":3081,"marks":3082,"value":77,"nodeType":42},{},[],{"data":3084,"content":3085,"nodeType":57},{},[3086],{"data":3087,"marks":3088,"value":84,"nodeType":42},{},[],{"data":3090,"content":3091,"nodeType":43},{},[3092],{"data":3093,"marks":3094,"value":64,"nodeType":42},{},[],{"data":3096,"content":3097,"nodeType":57},{},[3098],{"data":3099,"marks":3100,"value":41,"nodeType":42},{},[],{"data":3102,"content":3103,"nodeType":43},{},[3104],{"data":3105,"marks":3106,"value":77,"nodeType":42},{},[],[3108,3903,4785,4993,5641,5713],{"sys":3109,"fields":3116},{"space":3110,"id":112,"type":13,"createdAt":113,"updatedAt":114,"environment":3112,"publishedVersion":117,"revision":118,"contentType":3114,"locale":3042},{"sys":3111},{"type":9,"linkType":10,"id":11},{"sys":3113},{"id":18,"type":9,"linkType":19},{"sys":3115},{"type":9,"linkType":24,"id":25},{"slug":122,"title":3117,"description":3118,"date":125,"content":3119,"codeSnippet":104,"ctaUrl":104,"imageUrl":1003,"imageAlt":1004},"Figma Variables & Design Tokens: The Silent Revolution of Design-Dev Workflows","How can Figma Variables and design tokens simplify your design-to-dev workflow? A free live webinar on June 19 will show you everything in action.",{"nodeType":103,"data":3120,"content":3121},{},[3122,3137,3153,3161,3167,3174,3182,3245,3261,3272,3297,3415,3431,3439,3445,3453,3460,3468,3479,3501,3513,3529,3535,3543,3559,3600,3609,3616,3623,3634,3641,3689,3696,3707,3788,3795,3807,3814,3857,3864,3871,3887],{"nodeType":43,"data":3123,"content":3124},{},[3125,3129,3134],{"nodeType":42,"value":3126,"marks":3127,"data":3128},"Imagine a world where you can change all your buttons’ colors in one click, switch from light mode to dark without duplicating 45 frames, and share consistent color names with developers... That world is here. It’s called ",[],{},{"nodeType":42,"value":3130,"marks":3131,"data":3133},"Figma Variables",[3132],{"type":140},{},{"nodeType":42,"value":145,"marks":3135,"data":3136},[],{},{"nodeType":43,"data":3138,"content":3139},{},[3140,3144,3149],{"nodeType":42,"value":3141,"marks":3142,"data":3143},"Figma recently rolled out a feature that could reshape how we design interfaces: ",[],{},{"nodeType":42,"value":3145,"marks":3146,"data":3148},"variables and design tokens",[3147],{"type":140},{},{"nodeType":42,"value":3150,"marks":3151,"data":3152},". Here’s a clear and concrete tour no fluff to help you understand how it can transform your daily workflow.",[],{},{"nodeType":57,"data":3154,"content":3155},{},[3156],{"nodeType":42,"value":3157,"marks":3158,"data":3160},"1- What Are Figma Variables?",[3159],{"type":140},{},{"nodeType":43,"data":3162,"content":3163},{},[3164],{"nodeType":42,"value":104,"marks":3165,"data":3166},[],{},{"nodeType":43,"data":3168,"content":3169},{},[3170],{"nodeType":42,"value":3171,"marks":3172,"data":3173},"Think of them like code variables. A color, a text, a number, or a booleanyou define them once, reuse them everywhere, and update them instantly.",[],{},{"nodeType":190,"data":3175,"content":3176},{},[3177],{"nodeType":42,"value":3178,"marks":3179,"data":3181},"Types of available variables:",[3180],{"type":140},{},{"nodeType":251,"data":3183,"content":3184},{},[3185,3200,3215,3230],{"nodeType":208,"data":3186,"content":3187},{},[3188],{"nodeType":43,"data":3189,"content":3190},{},[3191,3196],{"nodeType":42,"value":3192,"marks":3193,"data":3195},"Colors",[3194],{"type":140},{},{"nodeType":42,"value":3197,"marks":3198,"data":3199},": perfect for defining your palette (primary, secondary, background...)",[],{},{"nodeType":208,"data":3201,"content":3202},{},[3203],{"nodeType":43,"data":3204,"content":3205},{},[3206,3211],{"nodeType":42,"value":3207,"marks":3208,"data":3210},"Numbers",[3209],{"type":140},{},{"nodeType":42,"value":3212,"marks":3213,"data":3214},": great for spacing, border widths, or corner radius",[],{},{"nodeType":208,"data":3216,"content":3217},{},[3218],{"nodeType":43,"data":3219,"content":3220},{},[3221,3226],{"nodeType":42,"value":3222,"marks":3223,"data":3225},"Text",[3224],{"type":140},{},{"nodeType":42,"value":3227,"marks":3228,"data":3229},": ideal for dynamic labels (e.g., Submit \u002F Send)",[],{},{"nodeType":208,"data":3231,"content":3232},{},[3233],{"nodeType":43,"data":3234,"content":3235},{},[3236,3241],{"nodeType":42,"value":3237,"marks":3238,"data":3240},"Booleans",[3239],{"type":140},{},{"nodeType":42,"value":3242,"marks":3243,"data":3244},": to manage states (visible\u002Finvisible, active\u002Finactive)",[],{},{"nodeType":43,"data":3246,"content":3247},{},[3248,3252,3257],{"nodeType":42,"value":3249,"marks":3250,"data":3251},"And best of all: ",[],{},{"nodeType":42,"value":3253,"marks":3254,"data":3256},"you can pair them with \"modes\"",[3255],{"type":140},{},{"nodeType":42,"value":3258,"marks":3259,"data":3260}," like dark\u002Flight or mobile\u002Fdesktop.",[],{},{"nodeType":57,"data":3262,"content":3263},{},[3264,3268],{"nodeType":42,"value":275,"marks":3265,"data":3267},[3266],{"type":140},{},{"nodeType":42,"value":3269,"marks":3270,"data":3271},"Variables vs Styles: What’s the Difference?",[],{},{"nodeType":43,"data":3273,"content":3274},{},[3275,3279,3284,3288,3293],{"nodeType":42,"value":3276,"marks":3277,"data":3278},"In the past, we worked with ",[],{},{"nodeType":42,"value":3280,"marks":3281,"data":3283},"rigid styles",[3282],{"type":140},{},{"nodeType":42,"value":3285,"marks":3286,"data":3287},". Now we get ",[],{},{"nodeType":42,"value":3289,"marks":3290,"data":3292},"flexibility",[3291],{"type":140},{},{"nodeType":42,"value":3294,"marks":3295,"data":3296},":",[],{},{"nodeType":427,"data":3298,"content":3299},{},[3300,3323,3346,3369,3392],{"nodeType":333,"data":3301,"content":3302},{},[3303,3313],{"nodeType":322,"data":3304,"content":3305},{},[3306],{"nodeType":43,"data":3307,"content":3308},{},[3309],{"nodeType":42,"value":3310,"marks":3311,"data":3312},"Before: Figma Styles",[],{},{"nodeType":322,"data":3314,"content":3315},{},[3316],{"nodeType":43,"data":3317,"content":3318},{},[3319],{"nodeType":42,"value":3320,"marks":3321,"data":3322},"Now: Figma Variables",[],{},{"nodeType":333,"data":3324,"content":3325},{},[3326,3336],{"nodeType":347,"data":3327,"content":3328},{},[3329],{"nodeType":43,"data":3330,"content":3331},{},[3332],{"nodeType":42,"value":3333,"marks":3334,"data":3335},"Fixed colors",[],{},{"nodeType":347,"data":3337,"content":3338},{},[3339],{"nodeType":43,"data":3340,"content":3341},{},[3342],{"nodeType":42,"value":3343,"marks":3344,"data":3345},"Dynamic values",[],{},{"nodeType":333,"data":3347,"content":3348},{},[3349,3359],{"nodeType":347,"data":3350,"content":3351},{},[3352],{"nodeType":43,"data":3353,"content":3354},{},[3355],{"nodeType":42,"value":3356,"marks":3357,"data":3358},"No logic",[],{},{"nodeType":347,"data":3360,"content":3361},{},[3362],{"nodeType":43,"data":3363,"content":3364},{},[3365],{"nodeType":42,"value":3366,"marks":3367,"data":3368},"Conditional, multi-mode",[],{},{"nodeType":333,"data":3370,"content":3371},{},[3372,3382],{"nodeType":347,"data":3373,"content":3374},{},[3375],{"nodeType":43,"data":3376,"content":3377},{},[3378],{"nodeType":42,"value":3379,"marks":3380,"data":3381},"Local to Figma",[],{},{"nodeType":347,"data":3383,"content":3384},{},[3385],{"nodeType":43,"data":3386,"content":3387},{},[3388],{"nodeType":42,"value":3389,"marks":3390,"data":3391},"Exportable in JSON",[],{},{"nodeType":333,"data":3393,"content":3394},{},[3395,3405],{"nodeType":347,"data":3396,"content":3397},{},[3398],{"nodeType":43,"data":3399,"content":3400},{},[3401],{"nodeType":42,"value":3402,"marks":3403,"data":3404},"Not code-friendly",[],{},{"nodeType":347,"data":3406,"content":3407},{},[3408],{"nodeType":43,"data":3409,"content":3410},{},[3411],{"nodeType":42,"value":3412,"marks":3413,"data":3414},"Dev-ready design tokens",[],{},{"nodeType":43,"data":3416,"content":3417},{},[3418,3422,3427],{"nodeType":42,"value":3419,"marks":3420,"data":3421},"Bottom line: variables make your design system ",[],{},{"nodeType":42,"value":3423,"marks":3424,"data":3426},"code-friendly",[3425],{"type":140},{},{"nodeType":42,"value":3428,"marks":3429,"data":3430},". You're no longer designing in a vacuum you’re part of a team.",[],{},{"nodeType":57,"data":3432,"content":3433},{},[3434],{"nodeType":42,"value":3435,"marks":3436,"data":3438},"3- Real-World Use Cases",[3437],{"type":140},{},{"nodeType":43,"data":3440,"content":3441},{},[3442],{"nodeType":42,"value":104,"marks":3443,"data":3444},[],{},{"nodeType":190,"data":3446,"content":3447},{},[3448],{"nodeType":42,"value":3449,"marks":3450,"data":3452},"a. Auto Light\u002FDark Mode",[3451],{"type":140},{},{"nodeType":43,"data":3454,"content":3455},{},[3456],{"nodeType":42,"value":3457,"marks":3458,"data":3459},"Create two modes: Light and Dark. Backgrounds, text, borders all change with one switch. No need to duplicate screens.",[],{},{"nodeType":492,"data":3461,"content":3462},{},[3463],{"nodeType":42,"value":491,"marks":3464,"data":3467},[3465,3466],{"type":140},{"type":490},{},{"nodeType":190,"data":3469,"content":3470},{},[3471,3474],{"nodeType":42,"value":499,"marks":3472,"data":3473},[],{},{"nodeType":42,"value":3475,"marks":3476,"data":3478},"Flexible Spacing Grid",[3477],{"type":140},{},{"nodeType":43,"data":3480,"content":3481},{},[3482,3486,3490,3493,3497],{"nodeType":42,"value":3483,"marks":3484,"data":3485},"Define variables like ",[],{},{"nodeType":42,"value":516,"marks":3487,"data":3489},[3488],{"type":490},{},{"nodeType":42,"value":520,"marks":3491,"data":3492},[],{},{"nodeType":42,"value":525,"marks":3494,"data":3496},[3495],{"type":490},{},{"nodeType":42,"value":3498,"marks":3499,"data":3500},", etc. Use them across components and tweak spacing from one place.",[],{},{"nodeType":190,"data":3502,"content":3503},{},[3504,3508],{"nodeType":42,"value":3505,"marks":3506,"data":3507},"c.",[],{},{"nodeType":42,"value":3509,"marks":3510,"data":3512}," Multilingual Mockups",[3511],{"type":140},{},{"nodeType":43,"data":3514,"content":3515},{},[3516,3520,3525],{"nodeType":42,"value":3517,"marks":3518,"data":3519},"Manage texts as variables: ",[],{},{"nodeType":42,"value":3521,"marks":3522,"data":3524},"label.submit = \"Send\" \u002F \"Envoyer\"",[3523],{"type":490},{},{"nodeType":42,"value":3526,"marks":3527,"data":3528},". Super handy when designing for multiple regions.",[],{},{"nodeType":43,"data":3530,"content":3531},{},[3532],{"nodeType":42,"value":104,"marks":3533,"data":3534},[],{},{"nodeType":57,"data":3536,"content":3537},{},[3538],{"nodeType":42,"value":3539,"marks":3540,"data":3542},"4. Variables + Code = Synced Design Tokens",[3541],{"type":140},{},{"nodeType":43,"data":3544,"content":3545},{},[3546,3550,3555],{"nodeType":42,"value":3547,"marks":3548,"data":3549},"Here’s where it gets exciting: export your variables as ",[],{},{"nodeType":42,"value":3551,"marks":3552,"data":3554},"JSON tokens",[3553],{"type":140},{},{"nodeType":42,"value":3556,"marks":3557,"data":3558},". Use them in:",[],{},{"nodeType":251,"data":3560,"content":3561},{},[3562,3571,3581,3590],{"nodeType":208,"data":3563,"content":3564},{},[3565],{"nodeType":43,"data":3566,"content":3567},{},[3568],{"nodeType":42,"value":614,"marks":3569,"data":3570},[],{},{"nodeType":208,"data":3572,"content":3573},{},[3574],{"nodeType":43,"data":3575,"content":3576},{},[3577],{"nodeType":42,"value":3578,"marks":3579,"data":3580},"In coded design systems (e.g., with Angular, React, Vue...) ",[],{},{"nodeType":208,"data":3582,"content":3583},{},[3584],{"nodeType":43,"data":3585,"content":3586},{},[3587],{"nodeType":42,"value":651,"marks":3588,"data":3589},[],{},{"nodeType":208,"data":3591,"content":3592},{},[3593],{"nodeType":43,"data":3594,"content":3595},{},[3596],{"nodeType":42,"value":3597,"marks":3598,"data":3599},"Or directly in your frontend repo",[],{},{"nodeType":672,"data":3601,"content":3602},{},[3603],{"nodeType":43,"data":3604,"content":3605},{},[3606],{"nodeType":42,"value":671,"marks":3607,"data":3608},[],{},{"nodeType":492,"data":3610,"content":3611},{},[3612],{"nodeType":42,"value":680,"marks":3613,"data":3615},[3614],{"type":490},{},{"nodeType":43,"data":3617,"content":3618},{},[3619],{"nodeType":42,"value":3620,"marks":3621,"data":3622},"One file, one language shared across design and development.",[],{},{"nodeType":57,"data":3624,"content":3625},{},[3626,3630],{"nodeType":42,"value":695,"marks":3627,"data":3629},[3628],{"type":140},{},{"nodeType":42,"value":3631,"marks":3632,"data":3633},"Design + Dev = Better Teamwork",[],{},{"nodeType":43,"data":3635,"content":3636},{},[3637],{"nodeType":42,"value":3638,"marks":3639,"data":3640},"When everyone speaks the same language, everything moves faster:",[],{},{"nodeType":251,"data":3642,"content":3643},{},[3644,3669,3679],{"nodeType":208,"data":3645,"content":3646},{},[3647],{"nodeType":43,"data":3648,"content":3649},{},[3650,3654,3658,3661,3665],{"nodeType":42,"value":3651,"marks":3652,"data":3653},"Clear naming (",[],{},{"nodeType":42,"value":725,"marks":3655,"data":3657},[3656],{"type":490},{},{"nodeType":42,"value":520,"marks":3659,"data":3660},[],{},{"nodeType":42,"value":733,"marks":3662,"data":3664},[3663],{"type":490},{},{"nodeType":42,"value":3666,"marks":3667,"data":3668},", etc.)",[],{},{"nodeType":208,"data":3670,"content":3671},{},[3672],{"nodeType":43,"data":3673,"content":3674},{},[3675],{"nodeType":42,"value":3676,"marks":3677,"data":3678},"Devs don’t need to guess what “blue 2” means",[],{},{"nodeType":208,"data":3680,"content":3681},{},[3682],{"nodeType":43,"data":3683,"content":3684},{},[3685],{"nodeType":42,"value":3686,"marks":3687,"data":3688},"Fewer QA headaches",[],{},{"nodeType":43,"data":3690,"content":3691},{},[3692],{"nodeType":42,"value":3693,"marks":3694,"data":3695},"Bonus: better documentation for your design system.",[],{},{"nodeType":57,"data":3697,"content":3698},{},[3699,3703],{"nodeType":42,"value":772,"marks":3700,"data":3702},[3701],{"type":140},{},{"nodeType":42,"value":3704,"marks":3705,"data":3706},"Tips for Organizing Your Variables",[],{},{"nodeType":251,"data":3708,"content":3709},{},[3710,3745,3778],{"nodeType":208,"data":3711,"content":3712},{},[3713],{"nodeType":43,"data":3714,"content":3715},{},[3716,3720,3724,3727,3731,3734,3738,3741],{"nodeType":42,"value":3717,"marks":3718,"data":3719},"Structure by type: ",[],{},{"nodeType":42,"value":795,"marks":3721,"data":3723},[3722],{"type":490},{},{"nodeType":42,"value":520,"marks":3725,"data":3726},[],{},{"nodeType":42,"value":803,"marks":3728,"data":3730},[3729],{"type":490},{},{"nodeType":42,"value":520,"marks":3732,"data":3733},[],{},{"nodeType":42,"value":811,"marks":3735,"data":3737},[3736],{"type":490},{},{"nodeType":42,"value":520,"marks":3739,"data":3740},[],{},{"nodeType":42,"value":42,"marks":3742,"data":3744},[3743],{"type":490},{},{"nodeType":208,"data":3746,"content":3747},{},[3748],{"nodeType":43,"data":3749,"content":3750},{},[3751,3755,3760,3764,3768,3771,3775],{"nodeType":42,"value":3752,"marks":3753,"data":3754},"Use ",[],{},{"nodeType":42,"value":3756,"marks":3757,"data":3759},"predictable names",[3758],{"type":140},{},{"nodeType":42,"value":3761,"marks":3762,"data":3763},": ",[],{},{"nodeType":42,"value":842,"marks":3765,"data":3767},[3766],{"type":490},{},{"nodeType":42,"value":520,"marks":3769,"data":3770},[],{},{"nodeType":42,"value":850,"marks":3772,"data":3774},[3773],{"type":490},{},{"nodeType":42,"value":854,"marks":3776,"data":3777},[],{},{"nodeType":208,"data":3779,"content":3780},{},[3781],{"nodeType":43,"data":3782,"content":3783},{},[3784],{"nodeType":42,"value":3785,"marks":3786,"data":3787},"Start simple with modes (Light\u002FDark), then scale (Mobile\u002FDesktop)",[],{},{"nodeType":43,"data":3789,"content":3790},{},[3791],{"nodeType":42,"value":3792,"marks":3793,"data":3794},"Test your system using a real component (like a button)",[],{},{"nodeType":57,"data":3796,"content":3797},{},[3798,3803],{"nodeType":42,"value":3799,"marks":3800,"data":3802},"7-",[3801],{"type":140},{},{"nodeType":42,"value":3804,"marks":3805,"data":3806},"The Real Benefit: A Living, Smart Design System",[],{},{"nodeType":43,"data":3808,"content":3809},{},[3810],{"nodeType":42,"value":3811,"marks":3812,"data":3813},"Designing with variables means:",[],{},{"nodeType":251,"data":3815,"content":3816},{},[3817,3827,3837,3847],{"nodeType":208,"data":3818,"content":3819},{},[3820],{"nodeType":43,"data":3821,"content":3822},{},[3823],{"nodeType":42,"value":3824,"marks":3825,"data":3826},"More visual consistency",[],{},{"nodeType":208,"data":3828,"content":3829},{},[3830],{"nodeType":43,"data":3831,"content":3832},{},[3833],{"nodeType":42,"value":3834,"marks":3835,"data":3836},"Smoother design evolution",[],{},{"nodeType":208,"data":3838,"content":3839},{},[3840],{"nodeType":43,"data":3841,"content":3842},{},[3843],{"nodeType":42,"value":3844,"marks":3845,"data":3846},"Fewer tech detours",[],{},{"nodeType":208,"data":3848,"content":3849},{},[3850],{"nodeType":43,"data":3851,"content":3852},{},[3853],{"nodeType":42,"value":3854,"marks":3855,"data":3856},"Better designer–developer communication",[],{},{"nodeType":43,"data":3858,"content":3859},{},[3860],{"nodeType":42,"value":3861,"marks":3862,"data":3863},"You’re no longer just making mockups—you’re building a system.",[],{},{"nodeType":190,"data":3865,"content":3866},{},[3867],{"nodeType":42,"value":967,"marks":3868,"data":3870},[3869],{"type":140},{},{"nodeType":43,"data":3872,"content":3873},{},[3874,3878,3883],{"nodeType":42,"value":3875,"marks":3876,"data":3877},"Want to see it live? Figma is hosting a ",[],{},{"nodeType":42,"value":3879,"marks":3880,"data":3882},"free webinar",[3881],{"type":140},{},{"nodeType":42,"value":3884,"marks":3885,"data":3886}," with Alexia Danton on June 19. Expect best practices, live demos, and real feedback.",[],{},{"nodeType":43,"data":3888,"content":3889},{},[3890,3893,3900],{"nodeType":42,"value":990,"marks":3891,"data":3892},[],{},{"nodeType":999,"data":3894,"content":3895},{"uri":993},[3896],{"nodeType":42,"value":3897,"marks":3898,"data":3899},"Attend the event",[],{},{"nodeType":42,"value":104,"marks":3901,"data":3902},[],{},{"sys":3904,"fields":3911},{"space":3905,"id":1009,"type":13,"createdAt":1010,"updatedAt":1011,"environment":3907,"publishedVersion":1014,"revision":1015,"contentType":3909,"locale":3042},{"sys":3906},{"type":9,"linkType":10,"id":11},{"sys":3908},{"id":18,"type":9,"linkType":19},{"sys":3910},{"type":9,"linkType":24,"id":25},{"slug":1019,"title":3912,"description":3913,"date":3914,"content":3915,"codeSnippet":104,"ctaUrl":104,"imageUrl":1899,"imageAlt":1900},"10 Ways AI is Transforming the User Experience","A concise and modern look at how AI tools are redefining the way we design for users.","2025-05-14T07:00-05:00",{"data":3916,"content":3917,"nodeType":103},{},[3918,3925,3933,3946,3958,3996,4018,4026,4037,4048,4087,4106,4114,4125,4136,4173,4192,4200,4211,4222,4251,4270,4278,4289,4300,4337,4356,4364,4375,4386,4415,4434,4442,4453,4464,4503,4522,4530,4541,4552,4589,4608,4616,4627,4638,4666,4685,4693,4704,4715,4752,4771,4778],{"data":3919,"content":3920,"nodeType":43},{},[3921],{"data":3922,"marks":3923,"value":3924,"nodeType":42},{},[],"User experience (UX) is undergoing a major transformation thanks to artificial intelligence. Tasks that once required manual effort can now be automated, enhanced, or optimized using AI-powered tools. This shift is changing how designers work, make decisions, and interact with user data. Here is a complete overview of 10 practical use cases where AI is playing a key role in modern UX design.",{"data":3926,"content":3927,"nodeType":43},{},[3928],{"data":3929,"marks":3930,"value":3932,"nodeType":42},{},[3931],{"type":140},"1. Idea and Persona Generation",{"data":3934,"content":3935,"nodeType":43},{},[3936,3942],{"data":3937,"marks":3938,"value":3941,"nodeType":42},{},[3939],{"type":3940},"italic","Before:",{"data":3943,"marks":3944,"value":3945,"nodeType":42},{},[]," Personas were created based on surveys, interviews, and observations, which took time and often relied on subjective assumptions.",{"data":3947,"content":3948,"nodeType":43},{},[3949,3954],{"data":3950,"marks":3951,"value":3953,"nodeType":42},{},[3952],{"type":3940},"With AI:",{"data":3955,"marks":3956,"value":3957,"nodeType":42},{},[]," It is now possible to automatically generate realistic personas using existing user data, research, or simple textual descriptions. AI can also propose feature ideas, interface suggestions, or design solutions based on a given context.",{"data":3959,"content":3960,"nodeType":43},{},[3961,3966,3973,3976,3982,3985,3992],{"data":3962,"marks":3963,"value":3965,"nodeType":42},{},[3964],{"type":3940},"Tools:",{"data":3967,"content":3968,"nodeType":999},{"uri":1077},[3969],{"data":3970,"marks":3971,"value":3972,"nodeType":42},{},[]," UXPressia AI",{"data":3974,"marks":3975,"value":520,"nodeType":42},{},[],{"data":3977,"content":3978,"nodeType":999},{"uri":1088},[3979],{"data":3980,"marks":3981,"value":1091,"nodeType":42},{},[],{"data":3983,"marks":3984,"value":1095,"nodeType":42},{},[],{"data":3986,"content":3987,"nodeType":999},{"uri":1100},[3988],{"data":3989,"marks":3990,"value":3991,"nodeType":42},{},[],"ChatGPT ",{"data":3993,"marks":3994,"value":3995,"nodeType":42},{},[],"(with well-crafted prompts).",{"data":3997,"content":4017,"nodeType":1111},{"target":3998},{"metadata":3999,"sys":4002,"fields":4007},{"tags":4000,"concepts":4001},[],[],{"space":4003,"id":1120,"type":1121,"createdAt":1122,"updatedAt":1122,"environment":4005,"publishedVersion":21,"revision":1125,"locale":3042},{"sys":4004},{"type":9,"linkType":10,"id":11},{"sys":4006},{"id":18,"type":9,"linkType":19},{"title":1127,"description":1127,"file":4008},{"url":4009,"details":4010,"fileName":4015,"contentType":4016},"\u002F\u002Fimages.ctfassets.net\u002Ftg11qz6a9e5b\u002F2fWrlgTHxz6iMSFWPZK8H7\u002F9a21a8d414b7c3c46cf7f5d89d1cb04c\u002F1.png",{"size":4011,"image":4012},15260,{"width":4013,"height":4014},772,204,"1.png","image\u002Fpng",[],{"data":4019,"content":4020,"nodeType":43},{},[4021],{"data":4022,"marks":4023,"value":4025,"nodeType":42},{},[4024],{"type":140},"2. Trend Research and UX Benchmarking",{"data":4027,"content":4028,"nodeType":43},{},[4029,4033],{"data":4030,"marks":4031,"value":3941,"nodeType":42},{},[4032],{"type":3940},{"data":4034,"marks":4035,"value":4036,"nodeType":42},{},[]," Designers manually scouted dozens of websites to identify best practices and emerging trends.",{"data":4038,"content":4039,"nodeType":43},{},[4040,4044],{"data":4041,"marks":4042,"value":3953,"nodeType":42},{},[4043],{"type":3940},{"data":4045,"marks":4046,"value":4047,"nodeType":42},{},[]," Tools can scan thousands of interfaces and automatically extract design, content, and interaction trends, helping to position a product within the competitive landscape.",{"data":4049,"content":4050,"nodeType":43},{},[4051,4055,4059,4065,4068,4074,4077,4083],{"data":4052,"marks":4053,"value":3965,"nodeType":42},{},[4054],{"type":3940},{"data":4056,"marks":4057,"value":4058,"nodeType":42},{},[]," ",{"data":4060,"content":4061,"nodeType":999},{"uri":1170},[4062],{"data":4063,"marks":4064,"value":1173,"nodeType":42},{},[],{"data":4066,"marks":4067,"value":1095,"nodeType":42},{},[],{"data":4069,"content":4070,"nodeType":999},{"uri":1181},[4071],{"data":4072,"marks":4073,"value":1184,"nodeType":42},{},[],{"data":4075,"marks":4076,"value":1095,"nodeType":42},{},[],{"data":4078,"content":4079,"nodeType":999},{"uri":1192},[4080],{"data":4081,"marks":4082,"value":1195,"nodeType":42},{},[],{"data":4084,"marks":4085,"value":4086,"nodeType":42},{},[]," with AI.",{"data":4088,"content":4105,"nodeType":1111},{"target":4089},{"metadata":4090,"sys":4093,"fields":4098},{"tags":4091,"concepts":4092},[],[],{"space":4094,"id":1211,"type":1121,"createdAt":1212,"updatedAt":1212,"environment":4096,"publishedVersion":1215,"revision":1125,"locale":3042},{"sys":4095},{"type":9,"linkType":10,"id":11},{"sys":4097},{"id":18,"type":9,"linkType":19},{"title":1217,"description":1217,"file":4099},{"url":4100,"details":4101,"fileName":4104,"contentType":4016},"\u002F\u002Fimages.ctfassets.net\u002Ftg11qz6a9e5b\u002F4bxL3F635DmSbvyApLbLa1\u002Fb8b568aabb47768560a8e417ef8155bc\u002F2.png",{"size":4102,"image":4103},115554,{"width":4013,"height":4014},"2.png",[],{"data":4107,"content":4108,"nodeType":43},{},[4109],{"data":4110,"marks":4111,"value":4113,"nodeType":42},{},[4112],{"type":140},"3. Wireframes from Prompts",{"data":4115,"content":4116,"nodeType":43},{},[4117,4121],{"data":4118,"marks":4119,"value":3941,"nodeType":42},{},[4120],{"type":3940},{"data":4122,"marks":4123,"value":4124,"nodeType":42},{},[]," Creating wireframes was a manual process done in Figma, Sketch, or on paper. Even basic versions required significant time.",{"data":4126,"content":4127,"nodeType":43},{},[4128,4132],{"data":4129,"marks":4130,"value":3953,"nodeType":42},{},[4131],{"type":3940},{"data":4133,"marks":4134,"value":4135,"nodeType":42},{},[]," Simply describing the layout (e.g., \"a homepage with a hero section, three cards, and a contact form\") is enough for the tool to generate a wireframe structure.",{"data":4137,"content":4138,"nodeType":43},{},[4139,4143,4146,4152,4155,4161,4164,4170],{"data":4140,"marks":4141,"value":3965,"nodeType":42},{},[4142],{"type":3940},{"data":4144,"marks":4145,"value":4058,"nodeType":42},{},[],{"data":4147,"content":4148,"nodeType":999},{"uri":1260},[4149],{"data":4150,"marks":4151,"value":1263,"nodeType":42},{},[],{"data":4153,"marks":4154,"value":1095,"nodeType":42},{},[],{"data":4156,"content":4157,"nodeType":999},{"uri":1271},[4158],{"data":4159,"marks":4160,"value":1274,"nodeType":42},{},[],{"data":4162,"marks":4163,"value":1095,"nodeType":42},{},[],{"data":4165,"content":4166,"nodeType":999},{"uri":1282},[4167],{"data":4168,"marks":4169,"value":1285,"nodeType":42},{},[],{"data":4171,"marks":4172,"value":145,"nodeType":42},{},[],{"data":4174,"content":4191,"nodeType":1111},{"target":4175},{"metadata":4176,"sys":4179,"fields":4184},{"tags":4177,"concepts":4178},[],[],{"space":4180,"id":1300,"type":1121,"createdAt":1301,"updatedAt":1301,"environment":4182,"publishedVersion":1304,"revision":1125,"locale":3042},{"sys":4181},{"type":9,"linkType":10,"id":11},{"sys":4183},{"id":18,"type":9,"linkType":19},{"title":1217,"description":1217,"file":4185},{"url":4186,"details":4187,"fileName":4190,"contentType":4016},"\u002F\u002Fimages.ctfassets.net\u002Ftg11qz6a9e5b\u002F5g4h60Vi6XyGEbUR3AsDwE\u002F43c65b85513fe75edc2e1714639264b6\u002F3.png",{"size":4188,"image":4189},91833,{"width":4013,"height":4014},"3.png",[],{"data":4193,"content":4194,"nodeType":43},{},[4195],{"data":4196,"marks":4197,"value":4199,"nodeType":42},{},[4198],{"type":140},"4. Predictive A\u002FB Testing",{"data":4201,"content":4202,"nodeType":43},{},[4203,4207],{"data":4204,"marks":4205,"value":3941,"nodeType":42},{},[4206],{"type":3940},{"data":4208,"marks":4209,"value":4210,"nodeType":42},{},[]," A\u002FB testing involved creating two variants, testing them with real users, and analyzing results to pick the best performer.",{"data":4212,"content":4213,"nodeType":43},{},[4214,4218],{"data":4215,"marks":4216,"value":3953,"nodeType":42},{},[4217],{"type":3940},{"data":4219,"marks":4220,"value":4221,"nodeType":42},{},[]," Some tools can predict the performance of an interface before deployment by using machine learning models and behavioral data.",{"data":4223,"content":4224,"nodeType":43},{},[4225,4229,4232,4238,4241,4247],{"data":4226,"marks":4227,"value":3965,"nodeType":42},{},[4228],{"type":3940},{"data":4230,"marks":4231,"value":4058,"nodeType":42},{},[],{"data":4233,"content":4234,"nodeType":999},{"uri":1348},[4235],{"data":4236,"marks":4237,"value":1351,"nodeType":42},{},[],{"data":4239,"marks":4240,"value":1095,"nodeType":42},{},[],{"data":4242,"content":4243,"nodeType":999},{"uri":1359},[4244],{"data":4245,"marks":4246,"value":1362,"nodeType":42},{},[],{"data":4248,"marks":4249,"value":4250,"nodeType":42},{},[]," (with ML).",{"data":4252,"content":4269,"nodeType":1111},{"target":4253},{"metadata":4254,"sys":4257,"fields":4262},{"tags":4255,"concepts":4256},[],[],{"space":4258,"id":1378,"type":1121,"createdAt":1379,"updatedAt":1379,"environment":4260,"publishedVersion":1215,"revision":1125,"locale":3042},{"sys":4259},{"type":9,"linkType":10,"id":11},{"sys":4261},{"id":18,"type":9,"linkType":19},{"title":1217,"description":1217,"file":4263},{"url":4264,"details":4265,"fileName":4268,"contentType":4016},"\u002F\u002Fimages.ctfassets.net\u002Ftg11qz6a9e5b\u002F1EOwRuSkB0Xs8G8vUSRAD0\u002Ff8c63b245a01f98ab3d773fed946078a\u002F4.png",{"size":4266,"image":4267},84154,{"width":4013,"height":4014},"4.png",[],{"data":4271,"content":4272,"nodeType":43},{},[4273],{"data":4274,"marks":4275,"value":4277,"nodeType":42},{},[4276],{"type":140},"5. Automatic User Research Synthesis",{"data":4279,"content":4280,"nodeType":43},{},[4281,4285],{"data":4282,"marks":4283,"value":3941,"nodeType":42},{},[4284],{"type":3940},{"data":4286,"marks":4287,"value":4288,"nodeType":42},{},[]," Designers manually coded interview transcripts, grouped themes, extracted insights, and created word clouds—a time-consuming process.",{"data":4290,"content":4291,"nodeType":43},{},[4292,4296],{"data":4293,"marks":4294,"value":3953,"nodeType":42},{},[4295],{"type":3940},{"data":4297,"marks":4298,"value":4299,"nodeType":42},{},[]," Tools now transcribe interviews, detect recurring themes, provide thematic summaries, and highlight actionable insights.",{"data":4301,"content":4302,"nodeType":43},{},[4303,4307,4310,4316,4319,4325,4328,4334],{"data":4304,"marks":4305,"value":3965,"nodeType":42},{},[4306],{"type":3940},{"data":4308,"marks":4309,"value":4058,"nodeType":42},{},[],{"data":4311,"content":4312,"nodeType":999},{"uri":1425},[4313],{"data":4314,"marks":4315,"value":1428,"nodeType":42},{},[],{"data":4317,"marks":4318,"value":1432,"nodeType":42},{},[],{"data":4320,"content":4321,"nodeType":999},{"uri":1437},[4322],{"data":4323,"marks":4324,"value":1440,"nodeType":42},{},[],{"data":4326,"marks":4327,"value":520,"nodeType":42},{},[],{"data":4329,"content":4330,"nodeType":999},{"uri":1448},[4331],{"data":4332,"marks":4333,"value":1451,"nodeType":42},{},[],{"data":4335,"marks":4336,"value":145,"nodeType":42},{},[],{"data":4338,"content":4355,"nodeType":1111},{"target":4339},{"metadata":4340,"sys":4343,"fields":4348},{"tags":4341,"concepts":4342},[],[],{"space":4344,"id":1466,"type":1121,"createdAt":1467,"updatedAt":1467,"environment":4346,"publishedVersion":1215,"revision":1125,"locale":3042},{"sys":4345},{"type":9,"linkType":10,"id":11},{"sys":4347},{"id":18,"type":9,"linkType":19},{"title":1217,"description":1217,"file":4349},{"url":4350,"details":4351,"fileName":4354,"contentType":4016},"\u002F\u002Fimages.ctfassets.net\u002Ftg11qz6a9e5b\u002F2rogMuxJfFrvX5TIrApslW\u002Ff1d051dd3a508f0a5d1309a5ee071f4f\u002F5.png",{"size":4352,"image":4353},78096,{"width":4013,"height":4014},"5.png",[],{"data":4357,"content":4358,"nodeType":43},{},[4359],{"data":4360,"marks":4361,"value":4363,"nodeType":42},{},[4362],{"type":140},"6. Feature Prioritization",{"data":4365,"content":4366,"nodeType":43},{},[4367,4371],{"data":4368,"marks":4369,"value":3941,"nodeType":42},{},[4370],{"type":3940},{"data":4372,"marks":4373,"value":4374,"nodeType":42},{},[]," Features were often prioritized based on intuition or basic models like MoSCoW.",{"data":4376,"content":4377,"nodeType":43},{},[4378,4382],{"data":4379,"marks":4380,"value":3953,"nodeType":42},{},[4381],{"type":3940},{"data":4383,"marks":4384,"value":4385,"nodeType":42},{},[]," Algorithms can analyze quantitative data (user feedback, analytics) and assign scores to features based on impact, demand frequency, and complexity.",{"data":4387,"content":4388,"nodeType":43},{},[4389,4393,4396,4402,4405,4411],{"data":4390,"marks":4391,"value":3965,"nodeType":42},{},[4392],{"type":3940},{"data":4394,"marks":4395,"value":4058,"nodeType":42},{},[],{"data":4397,"content":4398,"nodeType":999},{"uri":1513},[4399],{"data":4400,"marks":4401,"value":1516,"nodeType":42},{},[],{"data":4403,"marks":4404,"value":1095,"nodeType":42},{},[],{"data":4406,"content":4407,"nodeType":999},{"uri":1524},[4408],{"data":4409,"marks":4410,"value":1527,"nodeType":42},{},[],{"data":4412,"marks":4413,"value":4414,"nodeType":42},{},[]," with smart automation.",{"data":4416,"content":4433,"nodeType":1111},{"target":4417},{"metadata":4418,"sys":4421,"fields":4426},{"tags":4419,"concepts":4420},[],[],{"space":4422,"id":1543,"type":1121,"createdAt":1544,"updatedAt":1544,"environment":4424,"publishedVersion":1215,"revision":1125,"locale":3042},{"sys":4423},{"type":9,"linkType":10,"id":11},{"sys":4425},{"id":18,"type":9,"linkType":19},{"title":1217,"description":1217,"file":4427},{"url":4428,"details":4429,"fileName":4432,"contentType":4016},"\u002F\u002Fimages.ctfassets.net\u002Ftg11qz6a9e5b\u002F5dygJUM5iMcqgH9denquLc\u002F3661ac2e8c8d3863d1278659ce4f44d1\u002F6.png",{"size":4430,"image":4431},95955,{"width":4013,"height":4014},"6.png",[],{"data":4435,"content":4436,"nodeType":43},{},[4437],{"data":4438,"marks":4439,"value":4441,"nodeType":42},{},[4440],{"type":140},"7. UX Chatbots for Testing or Co-Design",{"data":4443,"content":4444,"nodeType":43},{},[4445,4449],{"data":4446,"marks":4447,"value":3941,"nodeType":42},{},[4448],{"type":3940},{"data":4450,"marks":4451,"value":4452,"nodeType":42},{},[]," Usability testing had to be moderated by humans, limiting iteration speed and increasing time costs.",{"data":4454,"content":4455,"nodeType":43},{},[4456,4460],{"data":4457,"marks":4458,"value":3953,"nodeType":42},{},[4459],{"type":3940},{"data":4461,"marks":4462,"value":4463,"nodeType":42},{},[]," AI-powered bots can run autonomous tests, ask questions, simulate interactions, and gather structured feedback.",{"data":4465,"content":4466,"nodeType":43},{},[4467,4471,4474,4480,4483,4489,4492,4499],{"data":4468,"marks":4469,"value":3965,"nodeType":42},{},[4470],{"type":3940},{"data":4472,"marks":4473,"value":4058,"nodeType":42},{},[],{"data":4475,"content":4476,"nodeType":999},{"uri":1590},[4477],{"data":4478,"marks":4479,"value":1593,"nodeType":42},{},[],{"data":4481,"marks":4482,"value":520,"nodeType":42},{},[],{"data":4484,"content":4485,"nodeType":999},{"uri":1601},[4486],{"data":4487,"marks":4488,"value":1604,"nodeType":42},{},[],{"data":4490,"marks":4491,"value":520,"nodeType":42},{},[],{"data":4493,"content":4494,"nodeType":999},{"uri":1612},[4495],{"data":4496,"marks":4497,"value":4498,"nodeType":42},{},[],"GPT-based custom UX",{"data":4500,"marks":4501,"value":4502,"nodeType":42},{},[]," chatbots.",{"data":4504,"content":4521,"nodeType":1111},{"target":4505},{"metadata":4506,"sys":4509,"fields":4514},{"tags":4507,"concepts":4508},[],[],{"space":4510,"id":1631,"type":1121,"createdAt":1632,"updatedAt":1632,"environment":4512,"publishedVersion":1304,"revision":1125,"locale":3042},{"sys":4511},{"type":9,"linkType":10,"id":11},{"sys":4513},{"id":18,"type":9,"linkType":19},{"title":1217,"description":1217,"file":4515},{"url":4516,"details":4517,"fileName":4520,"contentType":4016},"\u002F\u002Fimages.ctfassets.net\u002Ftg11qz6a9e5b\u002F49fllBccb9yAzfC3j29iBQ\u002Faad0dbe7bc5bd6f02b7905c6d1f8010d\u002F7.png",{"size":4518,"image":4519},143447,{"width":4013,"height":4014},"7.png",[],{"data":4523,"content":4524,"nodeType":43},{},[4525],{"data":4526,"marks":4527,"value":4529,"nodeType":42},{},[4528],{"type":140},"8. Sentiment Analysis",{"data":4531,"content":4532,"nodeType":43},{},[4533,4537],{"data":4534,"marks":4535,"value":3941,"nodeType":42},{},[4536],{"type":3940},{"data":4538,"marks":4539,"value":4540,"nodeType":42},{},[]," UX teams manually read through user comments to detect tone, emotion, and trends.",{"data":4542,"content":4543,"nodeType":43},{},[4544,4548],{"data":4545,"marks":4546,"value":3953,"nodeType":42},{},[4547],{"type":3940},{"data":4549,"marks":4550,"value":4551,"nodeType":42},{},[]," Sentiment analysis tools classify messages (positive, negative, neutral), detect dominant emotions, and spotlight key concerns.",{"data":4553,"content":4554,"nodeType":43},{},[4555,4559,4562,4568,4571,4577,4580,4586],{"data":4556,"marks":4557,"value":3965,"nodeType":42},{},[4558],{"type":3940},{"data":4560,"marks":4561,"value":4058,"nodeType":42},{},[],{"data":4563,"content":4564,"nodeType":999},{"uri":1678},[4565],{"data":4566,"marks":4567,"value":1681,"nodeType":42},{},[],{"data":4569,"marks":4570,"value":1095,"nodeType":42},{},[],{"data":4572,"content":4573,"nodeType":999},{"uri":1689},[4574],{"data":4575,"marks":4576,"value":1692,"nodeType":42},{},[],{"data":4578,"marks":4579,"value":520,"nodeType":42},{},[],{"data":4581,"content":4582,"nodeType":999},{"uri":1700},[4583],{"data":4584,"marks":4585,"value":1703,"nodeType":42},{},[],{"data":4587,"marks":4588,"value":145,"nodeType":42},{},[],{"data":4590,"content":4607,"nodeType":1111},{"target":4591},{"metadata":4592,"sys":4595,"fields":4600},{"tags":4593,"concepts":4594},[],[],{"space":4596,"id":1718,"type":1121,"createdAt":1719,"updatedAt":1719,"environment":4598,"publishedVersion":1215,"revision":1125,"locale":3042},{"sys":4597},{"type":9,"linkType":10,"id":11},{"sys":4599},{"id":18,"type":9,"linkType":19},{"title":1217,"description":1217,"file":4601},{"url":4602,"details":4603,"fileName":4606,"contentType":4016},"\u002F\u002Fimages.ctfassets.net\u002Ftg11qz6a9e5b\u002F7d902sCE5cByZvKmGVxP84\u002F4a303b595c5aa4e47f98bca095f1fac8\u002F8.png",{"size":4604,"image":4605},146023,{"width":4013,"height":4014},"8.png",[],{"data":4609,"content":4610,"nodeType":43},{},[4611],{"data":4612,"marks":4613,"value":4615,"nodeType":42},{},[4614],{"type":140},"9. Predictive Heatmaps",{"data":4617,"content":4618,"nodeType":43},{},[4619,4623],{"data":4620,"marks":4621,"value":3941,"nodeType":42},{},[4622],{"type":3940},{"data":4624,"marks":4625,"value":4626,"nodeType":42},{},[]," Heatmaps were generated using real user tests, often via eye-tracking or session recordings.",{"data":4628,"content":4629,"nodeType":43},{},[4630,4634],{"data":4631,"marks":4632,"value":3953,"nodeType":42},{},[4633],{"type":3940},{"data":4635,"marks":4636,"value":4637,"nodeType":42},{},[]," Predictive models analyze static mockups to forecast areas of user attention.",{"data":4639,"content":4640,"nodeType":43},{},[4641,4645,4648,4654,4657,4663],{"data":4642,"marks":4643,"value":3965,"nodeType":42},{},[4644],{"type":3940},{"data":4646,"marks":4647,"value":4058,"nodeType":42},{},[],{"data":4649,"content":4650,"nodeType":999},{"uri":1765},[4651],{"data":4652,"marks":4653,"value":1768,"nodeType":42},{},[],{"data":4655,"marks":4656,"value":520,"nodeType":42},{},[],{"data":4658,"content":4659,"nodeType":999},{"uri":1776},[4660],{"data":4661,"marks":4662,"value":1779,"nodeType":42},{},[],{"data":4664,"marks":4665,"value":145,"nodeType":42},{},[],{"data":4667,"content":4684,"nodeType":1111},{"target":4668},{"metadata":4669,"sys":4672,"fields":4677},{"tags":4670,"concepts":4671},[],[],{"space":4673,"id":1794,"type":1121,"createdAt":1795,"updatedAt":1795,"environment":4675,"publishedVersion":1304,"revision":1125,"locale":3042},{"sys":4674},{"type":9,"linkType":10,"id":11},{"sys":4676},{"id":18,"type":9,"linkType":19},{"title":1217,"description":1217,"file":4678},{"url":4679,"details":4680,"fileName":4683,"contentType":4016},"\u002F\u002Fimages.ctfassets.net\u002Ftg11qz6a9e5b\u002F5yIBXm3Cw52AWZ4ngVQ6Te\u002Fcf1f4e2174aa90dd1d4bd70b5ff33737\u002F9.png",{"size":4681,"image":4682},158767,{"width":4013,"height":4014},"9.png",[],{"data":4686,"content":4687,"nodeType":43},{},[4688],{"data":4689,"marks":4690,"value":4692,"nodeType":42},{},[4691],{"type":140},"10. AI-Generated UX Documentation",{"data":4694,"content":4695,"nodeType":43},{},[4696,4700],{"data":4697,"marks":4698,"value":3941,"nodeType":42},{},[4699],{"type":3940},{"data":4701,"marks":4702,"value":4703,"nodeType":42},{},[]," Writing UX documentation (guides, design rationale, audits) was manual, time-consuming, and often outdated quickly.",{"data":4705,"content":4706,"nodeType":43},{},[4707,4711],{"data":4708,"marks":4709,"value":3953,"nodeType":42},{},[4710],{"type":3940},{"data":4712,"marks":4713,"value":4714,"nodeType":42},{},[]," Designers can generate clear, structured documentation from components, interfaces, or prompts—great for maintaining intent and sharing design decisions.",{"data":4716,"content":4717,"nodeType":43},{},[4718,4722,4725,4731,4734,4740,4743,4749],{"data":4719,"marks":4720,"value":3965,"nodeType":42},{},[4721],{"type":3940},{"data":4723,"marks":4724,"value":4058,"nodeType":42},{},[],{"data":4726,"content":4727,"nodeType":999},{"uri":1448},[4728],{"data":4729,"marks":4730,"value":1451,"nodeType":42},{},[],{"data":4732,"marks":4733,"value":520,"nodeType":42},{},[],{"data":4735,"content":4736,"nodeType":999},{"uri":1850},[4737],{"data":4738,"marks":4739,"value":1853,"nodeType":42},{},[],{"data":4741,"marks":4742,"value":520,"nodeType":42},{},[],{"data":4744,"content":4745,"nodeType":999},{"uri":1861},[4746],{"data":4747,"marks":4748,"value":1864,"nodeType":42},{},[],{"data":4750,"marks":4751,"value":145,"nodeType":42},{},[],{"data":4753,"content":4770,"nodeType":1111},{"target":4754},{"metadata":4755,"sys":4758,"fields":4763},{"tags":4756,"concepts":4757},[],[],{"space":4759,"id":1879,"type":1121,"createdAt":1880,"updatedAt":1880,"environment":4761,"publishedVersion":1304,"revision":1125,"locale":3042},{"sys":4760},{"type":9,"linkType":10,"id":11},{"sys":4762},{"id":18,"type":9,"linkType":19},{"title":1217,"description":1217,"file":4764},{"url":4765,"details":4766,"fileName":4769,"contentType":4016},"\u002F\u002Fimages.ctfassets.net\u002Ftg11qz6a9e5b\u002FFk6TgGy1CE78s3aFnyzh5\u002F9f048c78abf63ac547d106f0a7ba2c11\u002F10.png",{"size":4767,"image":4768},176224,{"width":4013,"height":4014},"10.png",[],{"data":4772,"content":4773,"nodeType":43},{},[4774],{"data":4775,"marks":4776,"value":1889,"nodeType":42},{},[4777],{"type":140},{"data":4779,"content":4780,"nodeType":43},{},[4781],{"data":4782,"marks":4783,"value":4784,"nodeType":42},{},[],"The integration of AI into UX practice represents a true evolution of the field. It allows designers to focus more on strategy, creativity, and experimentation, while reducing time spent on repetitive tasks. Rather than replacing designers, AI becomes a powerful teammate that enhances user understanding, speeds up workflows, and supports better decision-making. The key is to use it wisely and keep human-centered design at the core of the experience.",{"sys":4786,"fields":4793},{"space":4787,"id":1905,"type":13,"createdAt":1906,"updatedAt":1907,"environment":4789,"publishedVersion":1910,"revision":1911,"contentType":4791,"locale":3042},{"sys":4788},{"type":9,"linkType":10,"id":11},{"sys":4790},{"id":18,"type":9,"linkType":19},{"sys":4792},{"type":9,"linkType":24,"id":25},{"slug":1915,"title":4794,"description":4795,"date":1918,"content":4796,"codeSnippet":104,"ctaUrl":104,"imageUrl":2178,"imageAlt":2179},"It's official: we can finally style \u003Cselect> elements natively with CSS!","How about you have you already started styling your \u003Cselect> elements with the new CSS properties? Feel free to share your tips and use cases!",{"nodeType":103,"data":4797,"content":4798},{},[4799,4814,4821,4828,4859,4867,4875,4890,4897,4904,4967,4974,4981],{"nodeType":43,"data":4800,"content":4801},{},[4802,4806,4810],{"nodeType":42,"value":4803,"marks":4804,"data":4805},"Every frontend developer has experienced it at least once: trying to customize an HTML ",[],{},{"nodeType":42,"value":1933,"marks":4807,"data":4809},[4808],{"type":490},{},{"nodeType":42,"value":4811,"marks":4812,"data":4813}," element used to be a real struggle. You often had to rely on complex JavaScript libraries or completely rebuild the component from scratch with custom solutions—sacrificing accessibility, performance, and maintainability in the process.",[],{},{"nodeType":43,"data":4815,"content":4816},{},[4817],{"nodeType":42,"value":4818,"marks":4819,"data":4820},"But those days are (finally) over!",[],{},{"nodeType":57,"data":4822,"content":4823},{},[4824],{"nodeType":42,"value":4825,"marks":4826,"data":4827},"A revolution powered by modern CSS",[],{},{"nodeType":43,"data":4829,"content":4830},{},[4831,4835,4839,4843,4847,4851,4855],{"nodeType":42,"value":4832,"marks":4833,"data":4834},"Thanks to recent advancements in CSS—especially the introduction of the ",[],{},{"nodeType":42,"value":1963,"marks":4836,"data":4838},[4837],{"type":490},{},{"nodeType":42,"value":4840,"marks":4841,"data":4842}," pseudo-element and widespread support for ",[],{},{"nodeType":42,"value":1972,"marks":4844,"data":4846},[4845],{"type":490},{},{"nodeType":42,"value":4848,"marks":4849,"data":4850},"—it's now possible to style a native ",[],{},{"nodeType":42,"value":1933,"marks":4852,"data":4854},[4853],{"type":490},{},{"nodeType":42,"value":4856,"marks":4857,"data":4858}," element without hacks, without JavaScript dependencies, and with full control over its appearance.",[],{},{"nodeType":43,"data":4860,"content":4861},{},[4862],{"nodeType":42,"value":4863,"marks":4864,"data":4866},"Here’s a simple example:",[4865],{"type":140},{},{"nodeType":492,"data":4868,"content":4869},{},[4870],{"nodeType":42,"value":2019,"marks":4871,"data":4874},[4872,4873],{"type":140},{"type":490},{},{"nodeType":43,"data":4876,"content":4877},{},[4878,4882,4886],{"nodeType":42,"value":4879,"marks":4880,"data":4881},"This simple block of code gives you a sleek, minimalist ",[],{},{"nodeType":42,"value":1933,"marks":4883,"data":4885},[4884],{"type":490},{},{"nodeType":42,"value":4887,"marks":4888,"data":4889}," element that integrates seamlessly with your overall UI design.",[],{},{"nodeType":57,"data":4891,"content":4892},{},[4893],{"nodeType":42,"value":4894,"marks":4895,"data":4896},"Why is this such great news?",[],{},{"nodeType":43,"data":4898,"content":4899},{},[4900],{"nodeType":42,"value":4901,"marks":4902,"data":4903},"Styling native dropdown menus brings many benefits:",[],{},{"nodeType":251,"data":4905,"content":4906},{},[4907,4922,4937,4952],{"nodeType":208,"data":4908,"content":4909},{},[4910],{"nodeType":43,"data":4911,"content":4912},{},[4913,4918],{"nodeType":42,"value":4914,"marks":4915,"data":4917},"Improved accessibility",[4916],{"type":140},{},{"nodeType":42,"value":4919,"marks":4920,"data":4921},": You retain the native behavior of the component, ensuring better compatibility with assistive technologies.",[],{},{"nodeType":208,"data":4923,"content":4924},{},[4925],{"nodeType":43,"data":4926,"content":4927},{},[4928,4933],{"nodeType":42,"value":4929,"marks":4930,"data":4932},"Better performance",[4931],{"type":140},{},{"nodeType":42,"value":4934,"marks":4935,"data":4936},": No more performance hits from third-party libraries.",[],{},{"nodeType":208,"data":4938,"content":4939},{},[4940],{"nodeType":43,"data":4941,"content":4942},{},[4943,4948],{"nodeType":42,"value":4944,"marks":4945,"data":4947},"Fewer dependencies",[4946],{"type":140},{},{"nodeType":42,"value":4949,"marks":4950,"data":4951},": Your project becomes lighter and easier to maintain.",[],{},{"nodeType":208,"data":4953,"content":4954},{},[4955],{"nodeType":43,"data":4956,"content":4957},{},[4958,4963],{"nodeType":42,"value":4959,"marks":4960,"data":4962},"Enhanced user experience",[4961],{"type":140},{},{"nodeType":42,"value":4964,"marks":4965,"data":4966},": Visual control lets you align all your UI components more consistently.",[],{},{"nodeType":57,"data":4968,"content":4969},{},[4970],{"nodeType":42,"value":4971,"marks":4972,"data":4973},"A small win that changes everything",[],{},{"nodeType":43,"data":4975,"content":4976},{},[4977],{"nodeType":42,"value":4978,"marks":4979,"data":4980},"It may seem like a minor improvement, but it’s a big step forward for both developer and user experience. No more compromises between accessibility, performance, and aesthetics. We can now build interfaces that are more coherent, more accessible, and more lightweight.",[],{},{"nodeType":43,"data":4982,"content":4983},{},[4984,4989],{"nodeType":42,"value":4985,"marks":4986,"data":4988},"In short:",[4987],{"type":140},{},{"nodeType":42,"value":4990,"marks":4991,"data":4992}," CSS keeps evolving in the right direction, bringing us closer to a future where native HTML components are no longer design obstacles, but powerful and reliable allies.",[],{},{"sys":4994,"fields":5001},{"space":4995,"id":2184,"type":13,"createdAt":2185,"updatedAt":2186,"environment":4997,"publishedVersion":2189,"revision":2190,"contentType":4999,"locale":3042},{"sys":4996},{"type":9,"linkType":10,"id":11},{"sys":4998},{"id":18,"type":9,"linkType":19},{"sys":5000},{"type":9,"linkType":24,"id":25},{"slug":2194,"title":5002,"description":5003,"date":5004,"content":5005,"codeSnippet":104,"ctaUrl":104,"imageUrl":2876,"imageAlt":2877},"10 Steps to Set Up Storybook with Angular to Build a Design System","Want to create a library of design components that's testable, documented, and ready to be shared between developers and designers? Here's how I built an Angular + Storybook architecture that's rock-solid, accessibility included.","2024-11-13T00:00-05:00",{"data":5006,"content":5007,"nodeType":103},{},[5008,5015,5022,5029,5036,5043,5086,5093,5100,5107,5113,5120,5126,5165,5172,5179,5185,5192,5215,5222,5229,5235,5250,5256,5263,5270,5277,5284,5292,5353,5361,5394,5401,5408,5415,5422,5429,5435,5457,5463,5477,5483,5491,5498,5504,5519,5526,5532,5547,5555,5562,5569,5583,5590,5597,5605,5612,5619,5626,5634],{"data":5009,"content":5010,"nodeType":57},{},[5011],{"data":5012,"marks":5013,"value":5014,"nodeType":42},{},[],"Step 1 – The setup: a Storybook, an Angular, a purpose",{"data":5016,"content":5017,"nodeType":43},{},[5018],{"data":5019,"marks":5020,"value":5021,"nodeType":42},{},[],"Imagine a visual toolbox for your Angular components: you open a webpage, and voilà — all your buttons, fields, menus are there, nicely organized, testable, documented, and ready to use.\n That’s Storybook.",{"data":5023,"content":5024,"nodeType":43},{},[5025],{"data":5026,"marks":5027,"value":5028,"nodeType":42},{},[],"This project is built on Angular 18 and aims to centralize reusable UI components you can preview, test, document, and reuse — without pulling your hair out for every new project.\n",{"data":5030,"content":5031,"nodeType":57},{},[5032],{"data":5033,"marks":5034,"value":5035,"nodeType":42},{},[],"Step 2 – Before diving in, prep your environment",{"data":5037,"content":5038,"nodeType":43},{},[5039],{"data":5040,"marks":5041,"value":5042,"nodeType":42},{},[],"Before writing a single line of code, make sure you have:",{"data":5044,"content":5045,"nodeType":251},{},[5046,5056,5066,5076],{"data":5047,"content":5048,"nodeType":208},{},[5049],{"data":5050,"content":5051,"nodeType":43},{},[5052],{"data":5053,"marks":5054,"value":5055,"nodeType":42},{},[],"Node.js v20 or higher",{"data":5057,"content":5058,"nodeType":208},{},[5059],{"data":5060,"content":5061,"nodeType":43},{},[5062],{"data":5063,"marks":5064,"value":5065,"nodeType":42},{},[],"npm (package manager)",{"data":5067,"content":5068,"nodeType":208},{},[5069],{"data":5070,"content":5071,"nodeType":43},{},[5072],{"data":5073,"marks":5074,"value":5075,"nodeType":42},{},[],"Angular CLI v18",{"data":5077,"content":5078,"nodeType":208},{},[5079],{"data":5080,"content":5081,"nodeType":43},{},[5082],{"data":5083,"marks":5084,"value":5085,"nodeType":42},{},[],"Sass (for stylish styles)",{"data":5087,"content":5088,"nodeType":43},{},[5089],{"data":5090,"marks":5091,"value":5092,"nodeType":42},{},[],"Install everything. Grab a coffee. Let’s get serious.",{"data":5094,"content":5095,"nodeType":57},{},[5096],{"data":5097,"marks":5098,"value":5099,"nodeType":42},{},[],"Step 3 – Clone, install, enjoy",{"data":5101,"content":5102,"nodeType":43},{},[5103],{"data":5104,"marks":5105,"value":5106,"nodeType":42},{},[],"In your terminal:",{"data":5108,"content":5109,"nodeType":492},{},[5110],{"data":5111,"marks":5112,"value":2335,"nodeType":42},{},[],{"data":5114,"content":5115,"nodeType":43},{},[5116],{"data":5117,"marks":5118,"value":5119,"nodeType":42},{},[],"Then, if you haven’t already:",{"data":5121,"content":5122,"nodeType":492},{},[5123],{"data":5124,"marks":5125,"value":2349,"nodeType":42},{},[],{"data":5127,"content":5128,"nodeType":43},{},[5129,5133,5137,5141,5145,5149,5153,5157,5161],{"data":5130,"marks":5131,"value":5132,"nodeType":42},{},[],"By default, the project is called ",{"data":5134,"marks":5135,"value":2361,"nodeType":42},{},[5136],{"type":490},{"data":5138,"marks":5139,"value":5140,"nodeType":42},{},[],".\n But nothing’s stopping you from naming it something cooler (like ",{"data":5142,"marks":5143,"value":2370,"nodeType":42},{},[5144],{"type":490},{"data":5146,"marks":5147,"value":5148,"nodeType":42},{},[],").\n If you change the name, remember to update it in files like ",{"data":5150,"marks":5151,"value":2379,"nodeType":42},{},[5152],{"type":490},{"data":5154,"marks":5155,"value":5156,"nodeType":42},{},[]," and in the ",{"data":5158,"marks":5159,"value":2388,"nodeType":42},{},[5160],{"type":490},{"data":5162,"marks":5163,"value":5164,"nodeType":42},{},[]," paths. ",{"data":5166,"content":5167,"nodeType":57},{},[5168],{"data":5169,"marks":5170,"value":5171,"nodeType":42},{},[],"Step 4 – Launch Storybook (and open your eyes)",{"data":5173,"content":5174,"nodeType":43},{},[5175],{"data":5176,"marks":5177,"value":5178,"nodeType":42},{},[],"The magic starts here:",{"data":5180,"content":5181,"nodeType":492},{},[5182],{"data":5183,"marks":5184,"value":2413,"nodeType":42},{},[],{"data":5186,"content":5187,"nodeType":43},{},[5188],{"data":5189,"marks":5190,"value":5191,"nodeType":42},{},[],"A beautiful interface opens in your browser where you can explore your UI patterns.\n It’s your component showroom. Click, test, explore. ",{"data":5193,"content":5214,"nodeType":1111},{"target":5194},{"metadata":5195,"sys":5198,"fields":5203},{"tags":5196,"concepts":5197},[],[],{"space":5199,"id":2430,"type":1121,"createdAt":2431,"updatedAt":2431,"environment":5201,"publishedVersion":1215,"revision":1125,"locale":3042},{"sys":5200},{"type":9,"linkType":10,"id":11},{"sys":5202},{"id":18,"type":9,"linkType":19},{"title":5204,"description":5205,"file":5206},"storybook-a11y","storybook-a11y-addon-optimized",{"url":5207,"details":5208,"fileName":5213,"contentType":4016},"\u002F\u002Fimages.ctfassets.net\u002Ftg11qz6a9e5b\u002F2Vm3BGysCF8j2S4ojSDJMq\u002Fd4ce5ca0be9a6c86b4425d0794c89f2d\u002Fstorybook-a11y-addon-optimized.png",{"size":5209,"image":5210},92883,{"width":5211,"height":5212},2568,1764,"storybook-a11y-addon-optimized.png",[],{"data":5216,"content":5217,"nodeType":57},{},[5218],{"data":5219,"marks":5220,"value":5221,"nodeType":42},{},[],"Step 5 – Accessibility is not optional",{"data":5223,"content":5224,"nodeType":43},{},[5225],{"data":5226,"marks":5227,"value":5228,"nodeType":42},{},[],"Want your components to work with screen readers, keyboard navigation, and meet accessibility standards?\n Add the Storybook a11y addon:",{"data":5230,"content":5231,"nodeType":492},{},[5232],{"data":5233,"marks":5234,"value":2457,"nodeType":42},{},[],{"data":5236,"content":5237,"nodeType":43},{},[5238,5242,5246],{"data":5239,"marks":5240,"value":5241,"nodeType":42},{},[],"Then, in your ",{"data":5243,"marks":5244,"value":2469,"nodeType":42},{},[5245],{"type":490},{"data":5247,"marks":5248,"value":5249,"nodeType":42},{},[]," file:",{"data":5251,"content":5252,"nodeType":492},{},[5253],{"data":5254,"marks":5255,"value":2479,"nodeType":42},{},[],{"data":5257,"content":5258,"nodeType":43},{},[5259],{"data":5260,"marks":5261,"value":5262,"nodeType":42},{},[],"Done! Storybook will now warn you if a button is missing an ARIA label or if your color contrast is off.",{"data":5264,"content":5265,"nodeType":57},{},[5266],{"data":5267,"marks":5268,"value":5269,"nodeType":42},{},[],"Step 6 – The Button: everyday hero",{"data":5271,"content":5272,"nodeType":43},{},[5273],{"data":5274,"marks":5275,"value":5276,"nodeType":42},{},[],"First star component in your library: the button.",{"data":5278,"content":5279,"nodeType":43},{},[5280],{"data":5281,"marks":5282,"value":5283,"nodeType":42},{},[],"Why this one? Because it’s everywhere, all the time.\n And a poorly built button can break your whole interface.",{"data":5285,"content":5286,"nodeType":43},{},[5287],{"data":5288,"marks":5289,"value":5291,"nodeType":42},{},[5290],{"type":140},"What it can do:",{"data":5293,"content":5294,"nodeType":251},{},[5295,5324,5334],{"data":5296,"content":5297,"nodeType":208},{},[5298],{"data":5299,"content":5300,"nodeType":43},{},[5301,5305,5309,5312,5316,5320],{"data":5302,"marks":5303,"value":5304,"nodeType":42},{},[],"Three variants: ",{"data":5306,"marks":5307,"value":2541,"nodeType":42},{},[5308],{"type":490},{"data":5310,"marks":5311,"value":520,"nodeType":42},{},[],{"data":5313,"marks":5314,"value":2549,"nodeType":42},{},[5315],{"type":490},{"data":5317,"marks":5318,"value":5319,"nodeType":42},{},[],", and ",{"data":5321,"marks":5322,"value":42,"nodeType":42},{},[5323],{"type":490},{"data":5325,"content":5326,"nodeType":208},{},[5327],{"data":5328,"content":5329,"nodeType":43},{},[5330],{"data":5331,"marks":5332,"value":5333,"nodeType":42},{},[],"Can display an icon (left or right, your choice)",{"data":5335,"content":5336,"nodeType":208},{},[5337],{"data":5338,"content":5339,"nodeType":43},{},[5340,5344,5349],{"data":5341,"marks":5342,"value":5343,"nodeType":42},{},[],"Handles ",{"data":5345,"marks":5346,"value":5348,"nodeType":42},{},[5347],{"type":490},"disabled",{"data":5350,"marks":5351,"value":5352,"nodeType":42},{},[]," state, keyboard focus, ARIA labels...",{"data":5354,"content":5355,"nodeType":43},{},[5356],{"data":5357,"marks":5358,"value":5360,"nodeType":42},{},[5359],{"type":140},"Tested and approved:",{"data":5362,"content":5363,"nodeType":251},{},[5364,5374,5384],{"data":5365,"content":5366,"nodeType":208},{},[5367],{"data":5368,"content":5369,"nodeType":43},{},[5370],{"data":5371,"marks":5372,"value":5373,"nodeType":42},{},[],"Plugged into a real Angular app",{"data":5375,"content":5376,"nodeType":208},{},[5377],{"data":5378,"content":5379,"nodeType":43},{},[5380],{"data":5381,"marks":5382,"value":5383,"nodeType":42},{},[],"Behaviors tested (click, focus, accessibility)",{"data":5385,"content":5386,"nodeType":208},{},[5387],{"data":5388,"content":5389,"nodeType":43},{},[5390],{"data":5391,"marks":5392,"value":5393,"nodeType":42},{},[],"Compared with legacy components to ensure full functional parity",{"data":5395,"content":5396,"nodeType":57},{},[5397],{"data":5398,"marks":5399,"value":5400,"nodeType":42},{},[],"Step 7 – Create your Angular library",{"data":5402,"content":5403,"nodeType":43},{},[5404],{"data":5405,"marks":5406,"value":5407,"nodeType":42},{},[],"Want to package your components like a real professional library? Here's how:",{"data":5409,"content":5410,"nodeType":492},{},[5411],{"data":5412,"marks":5413,"value":5414,"nodeType":42},{},[],"\u003Cng generate library your-library-name>",{"data":5416,"content":5417,"nodeType":43},{},[5418],{"data":5419,"marks":5420,"value":5421,"nodeType":42},{},[],"You’ll get:",{"data":5423,"content":5424,"nodeType":492},{},[5425],{"data":5426,"marks":5427,"value":5428,"nodeType":42},{},[],"\u003Cprojects\u002F\n└── \u003C name-of-library >\u002F\n    ├── src\u002F\n    │   └── lib\u002F\n    │       ├── name-of-library.component.ts\n    │       ├── name-of-library.service.ts\n    │       └── public-api.ts\n    ├── ng-package.json\n    └── package.json>",{"data":5430,"content":5431,"nodeType":43},{},[5432],{"data":5433,"marks":5434,"value":104,"nodeType":42},{},[],{"data":5436,"content":5437,"nodeType":43},{},[5438,5442,5446,5450,5454],{"data":5439,"marks":5440,"value":5441,"nodeType":42},{},[],"Then, copy your components into ",{"data":5443,"marks":5444,"value":2666,"nodeType":42},{},[5445],{"type":490},{"data":5447,"marks":5448,"value":5449,"nodeType":42},{},[],", and update ",{"data":5451,"marks":5452,"value":2675,"nodeType":42},{},[5453],{"type":490},{"data":5455,"marks":5456,"value":3294,"nodeType":42},{},[],{"data":5458,"content":5459,"nodeType":492},{},[5460],{"data":5461,"marks":5462,"value":2685,"nodeType":42},{},[],{"data":5464,"content":5465,"nodeType":43},{},[5466,5470,5474],{"data":5467,"marks":5468,"value":5469,"nodeType":42},{},[],"And specify the entry file in ",{"data":5471,"marks":5472,"value":2697,"nodeType":42},{},[5473],{"type":490},{"data":5475,"marks":5476,"value":3761,"nodeType":42},{},[],{"data":5478,"content":5479,"nodeType":492},{},[5480],{"data":5481,"marks":5482,"value":2707,"nodeType":42},{},[],{"data":5484,"content":5485,"nodeType":57},{},[5486],{"data":5487,"marks":5488,"value":5490,"nodeType":42},{},[5489],{"type":140},"Step 8 – Build and package: wrapping it all up",{"data":5492,"content":5493,"nodeType":43},{},[5494],{"data":5495,"marks":5496,"value":5497,"nodeType":42},{},[],"Ready to generate an installable package for other projects? ",{"data":5499,"content":5500,"nodeType":492},{},[5501],{"data":5502,"marks":5503,"value":2728,"nodeType":42},{},[],{"data":5505,"content":5506,"nodeType":43},{},[5507,5511,5516],{"data":5508,"marks":5509,"value":5510,"nodeType":42},{},[],"Angular will compile everything into ",{"data":5512,"marks":5513,"value":5515,"nodeType":42},{},[5514],{"type":490},"dist\u002Fname-of-library\u002F",{"data":5517,"marks":5518,"value":145,"nodeType":42},{},[],{"data":5520,"content":5521,"nodeType":43},{},[5522],{"data":5523,"marks":5524,"value":5525,"nodeType":42},{},[],"Then, create the archive:",{"data":5527,"content":5528,"nodeType":492},{},[5529],{"data":5530,"marks":5531,"value":2757,"nodeType":42},{},[],{"data":5533,"content":5534,"nodeType":43},{},[5535,5539,5543],{"data":5536,"marks":5537,"value":5538,"nodeType":42},{},[],"You’ll see a nice ",{"data":5540,"marks":5541,"value":2769,"nodeType":42},{},[5542],{"type":490},{"data":5544,"marks":5545,"value":5546,"nodeType":42},{},[]," file ready to be imported elsewhere.",{"data":5548,"content":5549,"nodeType":57},{},[5550],{"data":5551,"marks":5552,"value":5554,"nodeType":42},{},[5553],{"type":140},"Step 9 – Reuse the library in another project",{"data":5556,"content":5557,"nodeType":43},{},[5558],{"data":5559,"marks":5560,"value":5561,"nodeType":42},{},[]," In your target project:",{"data":5563,"content":5564,"nodeType":492},{},[5565],{"data":5566,"marks":5567,"value":5568,"nodeType":42},{},[],"\u003Cnpm install ..\u002Fpath\u002Fto\u002Fname-of-library-1.0.0.tgz>\n",{"data":5570,"content":5571,"nodeType":43},{},[5572,5576,5580],{"data":5573,"marks":5574,"value":5575,"nodeType":42},{},[],"And in ",{"data":5577,"marks":5578,"value":2807,"nodeType":42},{},[5579],{"type":490},{"data":5581,"marks":5582,"value":3294,"nodeType":42},{},[],{"data":5584,"content":5585,"nodeType":492},{},[5586],{"data":5587,"marks":5588,"value":5589,"nodeType":42},{},[],"import { ButtonModule } from 'name-of-library';\n\n@NgModule({\n  imports: [ButtonModule],\n})\nexport class AppModule {}",{"data":5591,"content":5592,"nodeType":43},{},[5593],{"data":5594,"marks":5595,"value":5596,"nodeType":42},{},[],"And there you go — your button component is ready to be used in a new project.",{"data":5598,"content":5599,"nodeType":57},{},[5600],{"data":5601,"marks":5602,"value":5604,"nodeType":42},{},[5603],{"type":140},"Step 10 – Final structure (or how to stay organized)",{"data":5606,"content":5607,"nodeType":43},{},[5608],{"data":5609,"marks":5610,"value":5611,"nodeType":42},{},[]," To sum up, your project will look like this:",{"data":5613,"content":5614,"nodeType":492},{},[5615],{"data":5616,"marks":5617,"value":5618,"nodeType":42},{},[],"\u003Cstorybook\u002F\n├── src\u002F\n│   └── lib\u002F\n│       └── common-controls\u002F\n│           └── button\u002F\n├── projects\u002F\n│   └── name-of-library\u002F\n│       └── src\u002Flib\u002Fcommon-controls\u002F\n│           └── button\u002F\n└── dist\u002F\n    └── name-of-library\u002F\n        └── .tgz generated>",{"data":5620,"content":5621,"nodeType":43},{},[5622],{"data":5623,"marks":5624,"value":5625,"nodeType":42},{},[],"Clear, modular, documented, accessible. It doesn’t get any better.",{"data":5627,"content":5628,"nodeType":57},{},[5629],{"data":5630,"marks":5631,"value":5633,"nodeType":42},{},[5632],{"type":140},"In conclusion",{"data":5635,"content":5636,"nodeType":43},{},[5637],{"data":5638,"marks":5639,"value":5640,"nodeType":42},{},[],"Building a clean, testable, and accessible design system with Angular + Storybook is not only doable — it’s highly recommended. You’ll save time, ensure consistency, and provide a better experience for users. And with this structure, you’re ready to scale your projects without breaking everything.",{"sys":5642,"fields":5649},{"space":5643,"id":12,"type":13,"createdAt":14,"updatedAt":15,"environment":5645,"publishedVersion":20,"revision":21,"contentType":5647,"locale":3042},{"sys":5644},{"type":9,"linkType":10,"id":11},{"sys":5646},{"id":18,"type":9,"linkType":19},{"sys":5648},{"type":9,"linkType":24,"id":25},{"slug":28,"title":29,"description":2966,"date":31,"content":5650,"codeSnippet":104,"ctaUrl":104,"imageUrl":105,"imageAlt":106},{"data":5651,"content":5652,"nodeType":103},{},[5653,5659,5665,5671,5677,5683,5689,5695,5701,5707],{"data":5654,"content":5655,"nodeType":43},{},[5656],{"data":5657,"marks":5658,"value":41,"nodeType":42},{},[],{"data":5660,"content":5661,"nodeType":43},{},[5662],{"data":5663,"marks":5664,"value":50,"nodeType":42},{},[],{"data":5666,"content":5667,"nodeType":57},{},[5668],{"data":5669,"marks":5670,"value":41,"nodeType":42},{},[],{"data":5672,"content":5673,"nodeType":43},{},[5674],{"data":5675,"marks":5676,"value":64,"nodeType":42},{},[],{"data":5678,"content":5679,"nodeType":57},{},[5680],{"data":5681,"marks":5682,"value":41,"nodeType":42},{},[],{"data":5684,"content":5685,"nodeType":43},{},[5686],{"data":5687,"marks":5688,"value":77,"nodeType":42},{},[],{"data":5690,"content":5691,"nodeType":57},{},[5692],{"data":5693,"marks":5694,"value":84,"nodeType":42},{},[],{"data":5696,"content":5697,"nodeType":43},{},[5698],{"data":5699,"marks":5700,"value":64,"nodeType":42},{},[],{"data":5702,"content":5703,"nodeType":57},{},[5704],{"data":5705,"marks":5706,"value":41,"nodeType":42},{},[],{"data":5708,"content":5709,"nodeType":43},{},[5710],{"data":5711,"marks":5712,"value":77,"nodeType":42},{},[],{"sys":5714,"fields":5721},{"space":5715,"id":2954,"type":13,"createdAt":2955,"updatedAt":2956,"environment":5717,"publishedVersion":2959,"revision":2960,"contentType":5719,"locale":3042},{"sys":5716},{"type":9,"linkType":10,"id":11},{"sys":5718},{"id":18,"type":9,"linkType":19},{"sys":5720},{"type":9,"linkType":24,"id":25},{"slug":2964,"title":2965,"description":2966,"date":2967,"content":5722,"codeSnippet":104,"ctaUrl":104,"imageUrl":3031,"imageAlt":3032},{"data":5723,"content":5724,"nodeType":103},{},[5725,5731,5737,5743,5749,5755,5761,5767,5773,5779],{"data":5726,"content":5727,"nodeType":57},{},[5728],{"data":5729,"marks":5730,"value":41,"nodeType":42},{},[],{"data":5732,"content":5733,"nodeType":43},{},[5734],{"data":5735,"marks":5736,"value":50,"nodeType":42},{},[],{"data":5738,"content":5739,"nodeType":57},{},[5740],{"data":5741,"marks":5742,"value":41,"nodeType":42},{},[],{"data":5744,"content":5745,"nodeType":43},{},[5746],{"data":5747,"marks":5748,"value":64,"nodeType":42},{},[],{"data":5750,"content":5751,"nodeType":57},{},[5752],{"data":5753,"marks":5754,"value":41,"nodeType":42},{},[],{"data":5756,"content":5757,"nodeType":43},{},[5758],{"data":5759,"marks":5760,"value":77,"nodeType":42},{},[],{"data":5762,"content":5763,"nodeType":57},{},[5764],{"data":5765,"marks":5766,"value":84,"nodeType":42},{},[],{"data":5768,"content":5769,"nodeType":43},{},[5770],{"data":5771,"marks":5772,"value":64,"nodeType":42},{},[],{"data":5774,"content":5775,"nodeType":57},{},[5776],{"data":5777,"marks":5778,"value":41,"nodeType":42},{},[],{"data":5780,"content":5781,"nodeType":43},{},[5782],{"data":5783,"marks":5784,"value":77,"nodeType":42},{},[],1789136170459]