{"id":50159,"date":"2023-07-20T10:30:00","date_gmt":"2023-07-20T08:30:00","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=50159"},"modified":"2023-07-18T12:24:22","modified_gmt":"2023-07-18T10:24:22","slug":"menu-burger-figma","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/menu-burger-figma\/","title":{"rendered":"Comment cr\u00e9er un menu burger sur Figma&nbsp;?"},"content":{"rendered":"\n<p>Un menu burger peut \u00eatre complexe \u00e0 d\u00e9velopper, c\u2019est pourquoi r\u00e9aliser sa maquette sur Figma en amont est pertinent.<\/p>\n\n\n\n<p>Pour \u00e9laborer votre menu burger, vous pouvez faire appel \u00e0 un <a href=\"https:\/\/graphiste.com\/softwares\/figma\/users\">designer freelance sp\u00e9cialiste de Figma<\/a> sur Graphiste.com en d\u00e9posant gratuitement un projet.<\/p>\n\n\n\n<p>Pour vous aider \u00e0 le r\u00e9aliser vous-m\u00eame, nous allons vous montrer comment le r\u00e9aliser vous-m\u00eame et comment l\u2019animer, avec quelques astuces pour ma\u00eetriser Figma.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Dessinez votre menu burger sur Figma<\/strong><\/h2>\n\n\n\n<p>Donnez d\u2019abord corps \u00e0 votre bouton de menu burger en utilisant l\u2019outil \u201cRectangle\u201d de Figma<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>La conception d\u2019un menu avec le rectangle<\/strong><\/h3>\n\n\n\n<p>1. Rendez-vous sur la page de conception de votre mockup web ou mobile. Cliquez en haut \u00e0 gauche de votre interface sur le mode \u201cRectangle\u201d.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Design de votre menu burger&nbsp;: stylisez votre cr\u00e9ation<\/strong><\/h3>\n\n\n\n<p>Volume, couleurs, bords arrondis\u2026 pour personnaliser votre menu burger sous Figma, ouvrez les options de votre rectangle.<\/p>\n\n\n\n<p>2. Pour ce faire, activez le mode &#8220;Move&#8221; dont l&#8217;ic\u00f4ne est un curseur de souris.<br>3. S\u00e9lectionnez alors votre rectangle fra\u00eechement cr\u00e9\u00e9.<br>4. Le panneau lat\u00e9ral droit s&#8217;ajustera alors pour vous donner acc\u00e8s aux r\u00e9glages de votre \u00e9l\u00e9ment rectangle. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Changer la couleur<\/strong><\/h4>\n\n\n\n<p>5. Cliquez sur le carr\u00e9 accompagn\u00e9 d&#8217;une s\u00e9rie de chiffres et\/ou de lettres.<br>6. Si celui-ci n&#8217;appara\u00eet pas, cliquez sur le bouton d&#8217;ajout de couleur de fond symbolis\u00e9 par un signe plus (+) \u00e0 la droite du nom de la section.<\/p>\n\n\n\n<p>Choisissez votre teinte pr\u00e9f\u00e9r\u00e9e en naviguant dans un nuancier ou en d\u00e9finissant directement le code hexad\u00e9cimal correspondant (deux chiffres pour le rouge, deux pour le vert et deux pour le bleu&nbsp;: #RRVVBB).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1009\" height=\"699\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-1.png\" alt=\"\" class=\"wp-image-50161\" srcset=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-1.png 1009w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-1-300x208.png 300w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-1-768x532.png 768w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-1-60x42.png 60w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-1-370x256.png 370w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-1-270x187.png 270w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-1-435x300.png 435w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-1-570x395.png 570w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-1-740x513.png 740w\" sizes=\"(max-width: 1009px) 100vw, 1009px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Ajouter une ombre<\/strong><\/h4>\n\n\n\n<p>1. Vous pouvez ajouter une ombre port\u00e9e \u00e0 votre menu burger en cliquant sur le bouton d&#8217;ajout de &#8220;Effects&#8221;.<\/p>\n\n\n\n<p>Gardez \u00e0 l\u2019esprit toutefois qu\u2019il vaut mieux garder un menu respectant les codes UX\/UI (User Experience et User Interface).<\/p>\n\n\n\n<p><strong>\u00c9paissir les bords<\/strong><\/p>\n\n\n\n<p>2. Pour ajouter une bordure \u00e0 chaque \u00e9l\u00e9ment de votre bouton de menu burger, cliquez sur le bouton d&#8217;ajout associ\u00e9 \u00e0 &#8220;Stroke&#8221;.<\/p>\n\n\n\n<p><strong>Arrondir les bords<\/strong><\/p>\n\n\n\n<p>Vous pouvez aller plus loin si vous le d\u00e9sirez.<\/p>\n\n\n\n<p>3. Pour choisir la courbure de l\u2019arrondi pour vos bords, cliquez sur la valeur correspondante pour y entrer le chiffre de votre choix (3) ou glissez le curseur de gauche \u00e0 droite.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"235\" height=\"727\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image.png\" alt=\"\" class=\"wp-image-50160\" srcset=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image.png 235w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-97x300.png 97w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-19x60.png 19w\" sizes=\"(max-width: 235px) 100vw, 235px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Liez vos frames pour utiliser votre menu burger en prototype<\/strong><\/h2>\n\n\n\n<p>Vous \u00eates satisfait(e) de votre rectangle&nbsp;? C&#8217;est le moment de donner sa forme finale \u00e0 votre bouton de menu burger&nbsp;!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dupliquez votre rectangle pour former le menu<\/strong><\/h3>\n\n\n\n<p>\u00c0 l&#8217;image d&#8217;un hamburger, le menu que vous construisez se compose de couches. Une nette diff\u00e9rence est \u00e0 noter tout de m\u00eame dans sa composition&nbsp;: elle est homog\u00e8ne.<\/p>\n\n\n\n<p>Pour construire votre bouton de menu, il ne vous reste donc plus qu&#8217;\u00e0 dupliquer votre premier rectangle de fa\u00e7on \u00e0 disposer de trois \u00e9l\u00e9ments que vous empilerez en laissant l&#8217;espace qui vous conviendra entre chacun d&#8217;entre eux. Pour ce faire, pr\u00e9f\u00e9rez les raccourcis clavier&nbsp;:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Cliquez gauche sur votre \u00e9l\u00e9ment avec le mode &#8220;Move&#8221; actif pour le s\u00e9lectionner;<\/li>\n\n\n\n<li>Pressez CTRL+C (copier l&#8217;\u00e9l\u00e9ment);<\/li>\n\n\n\n<li>Pressez CTRL+V (coller l&#8217;\u00e9l\u00e9ment);<\/li>\n\n\n\n<li>D\u00e9placez l&#8217;\u00e9l\u00e9ment dupliqu\u00e9 \u00e0 votre guise en dessous du premier rectangle.<\/li>\n<\/ol>\n\n\n\n<p>L&#8217;ic\u00f4ne de votre menu burger est pr\u00eate&nbsp;? Il est temps de le rendre fonctionnel&nbsp;!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Faire de votre maquette graphique un menu Burger interactif<\/strong><\/h3>\n\n\n\n<p>Pour notre tutoriel, le menu burger devra afficher une frame (con\u00e7u \u00e0 partir de l\u2019outil \u00ab\u2009Frame\u2009\u00bb symbolis\u00e9 par une ic\u00f4ne \u00ab\u2009#\u2009\u00bb) diff\u00e9rente lors du clic qui comportera deux liens (\u00ab\u2009Accueil\u2009\u00bb et \u00ab\u2009Blog\u2009\u00bb), de fa\u00e7on \u00e0 simuler l\u2019affichage des liens du menu lors du lancement du prototype.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Conception et personnalisation de la frame servant de liste d\u00e9roulante au menu<\/strong><\/h4>\n\n\n\n<p>Pour cr\u00e9er le menu \u00e0 proprement parler vous faudra&nbsp;:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Ajouter une frame dont la largeur est identique \u00e0 celle du medium d&#8217;affichage (en d&#8217;autres termes&nbsp;: copiez-coller les dimensions de votre frame de base);<\/li>\n\n\n\n<li>N&#8217;h\u00e9sitez pas \u00e0 renommer la frame fra\u00eechement cr\u00e9\u00e9e pour \u00e9viter toute confusion en &#8220;Menu&#8221; par exemple;<\/li>\n\n\n\n<li>Peupler le menu avec les onglets de votre choix en utilisant l&#8217;outil &#8220;Texte&#8221; et en personnalisant le style en suivant la m\u00e9thode \u00e9nonc\u00e9e plus haut pour l&#8217;ic\u00f4ne (utilisation de la barre lat\u00e9rale droite).<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Activation du menu<\/strong><\/h4>\n\n\n\n<p>C&#8217;est l&#8217;heure de v\u00e9rit\u00e9&nbsp;! Pour rendre votre menu fonctionnel en mode prototype, il vous faut&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cliquez sur le bouton de menu burger sur votre frame initiale;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dans la barre lat\u00e9rale droite, cliquez sur l&#8217;onglet &#8220;Prototype&#8221;;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cliquez sur le bouton d&#8217;ajouter d&#8217;interactions;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Param\u00e9trez l&#8217;\u00e9v\u00e8nement \u00e0 l&#8217;\u00e9coute en s\u00e9lectionnant &#8220;On Click&#8221; ou &#8220;On Tap&#8221; (suivant le medium s\u00e9lectionn\u00e9 pour votre projet);<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Param\u00e9trez l&#8217;action correspondante en s\u00e9lectionnant &#8220;Overlay&#8221; puis la frame correspondant \u00e0 votre liste d\u00e9roulante de menu:<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Param\u00e9trez les d\u00e9tails d&#8217;affichage du menu. Vous pourrez ici d\u00e9terminer si le menu doit appara\u00eetre en haut \u00e0 droite, prendre tout l&#8217;\u00e9cran, etc.;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>R\u00e9glez l\u2019animation de votre menu burger dans la fen\u00eatre de param\u00e9trage.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Travailler sous Figma mieux et plus vite<\/strong><\/h2>\n\n\n\n<p>Comme vous l&#8217;avez certainement d\u00e9j\u00e0 entendu, les raccourcis clavier sont vos amis. Figma ne fait pas exception. Bien connus des utilisateurs de la suite Adobe, les codes de l&#8217;industrie se retrouvent aussi chez Figma.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Maintenez le cap lors de vos translations<\/strong><\/h3>\n\n\n\n<p>Malgr\u00e9 les aides visuelles apport\u00e9es par l&#8217;interface de Figma lors de la manipulation d&#8217;objets, il peut \u00eatre difficile de garantir un alignement parfait pour vos \u00e9l\u00e9ments lorsque vous les d\u00e9placez.<\/p>\n\n\n\n<p>Pour vous assurer d&#8217;atteindre la position souhait\u00e9e pour chaque \u00e9l\u00e9ment de votre menu burger, utilisez la touche SHIFT de votre clavier (touche &#8220;en forme de fl\u00e8che pointant vers le haut&#8221;).<\/p>\n\n\n\n<p>En d\u00e9pla\u00e7ant l\u00e9g\u00e8rement votre \u00e9l\u00e9ment dans la direction de votre choix puis en maintenant press\u00e9e la touche SHIFT, vous pourrez contraindre les d\u00e9placements de votre \u00e9l\u00e9ment sur l&#8217;axe de la direction (vertical ou horizontal).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Incluez et excluez les \u00e9l\u00e9ments de votre s\u00e9lection \u00e0 la vol\u00e9e<\/strong><\/h3>\n\n\n\n<p>SHIFT a une autre fonction tr\u00e8s utile&nbsp;: le contr\u00f4le de la s\u00e9lection. Si vous incluez un \u00e9l\u00e9ment tiers par m\u00e9garde lors de votre s\u00e9lection des rectangles de votre menu, ne recommencez pas votre s\u00e9lection.<\/p>\n\n\n\n<p>\u00c0 la place, enfoncez la touche SHIFT et faites un clic gauche sur l&#8217;\u00e9l\u00e9ment tiers pour l&#8217;exclure. Cette manipulation permet, \u00e0 l&#8217;inverse, d&#8217;inclure un \u00e9l\u00e9ment ne faisant pas encore partie de la s\u00e9lection.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Notre astuce pour cr\u00e9er un menu burger sur Figma<\/strong><\/h2>\n\n\n\n<p>Si tout faire soi-m\u00eame peut \u00eatre satisfaisant, on n\u2019a pas forc\u00e9ment toujours le temps ni les comp\u00e9tences.<\/p>\n\n\n\n<p>Pour r\u00e9aliser un menu burger sous Figma, vous devrez \u00eatre \u00e0 l\u2019aise avec l\u2019interface et les d\u00e9tails des outils Figma, depuis les r\u00e9glages de la phase de conception jusqu\u2019\u00e0 ceux du prototype.<\/p>\n\n\n\n<p>Notre astuce pour cr\u00e9er un menu burger sur Figma de fa\u00e7on professionnelle rapidement&nbsp;? Faire appel \u00e0 un webdesigner sp\u00e9cialiste de Figma, en d\u00e9posant un projet sur notre <a href=\"https:\/\/graphiste.com\/#open-fast\">plateforme de graphistes freelances<\/a> gratuitement.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un menu burger peut \u00eatre complexe \u00e0 d\u00e9velopper, c\u2019est pourquoi r\u00e9aliser sa maquette sur Figma en amont est pertinent. Pour \u00e9laborer votre menu burger, vous pouvez faire appel \u00e0 un designer freelance sp\u00e9cialiste de Figma sur Graphiste.com en d\u00e9posant gratuitement un projet. Pour vous aider \u00e0 le r\u00e9aliser vous-m\u00eame, nous allons vous montrer comment le [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":50653,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-50159","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment cr\u00e9er un menu burger sur Figma&nbsp;? - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Un menu burger peut \u00eatre complexe \u00e0 d\u00e9velopper, c\u2019est pourquoi r\u00e9aliser sa maquette sur Figma en amont est pertinent. Pour \u00e9laborer votre menu burger,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphiste.com\/blog\/menu-burger-figma\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment cr\u00e9er un menu burger sur Figma&nbsp;? - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Un menu burger peut \u00eatre complexe \u00e0 d\u00e9velopper, c\u2019est pourquoi r\u00e9aliser sa maquette sur Figma en amont est pertinent. Pour \u00e9laborer votre menu burger,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/menu-burger-figma\/\" \/>\n<meta property=\"og:site_name\" content=\"Graphiste.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/graphistesfreelances\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-20T08:30:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/Image-a-la-une-menu-burger-figma.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"618\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Laura Michaud\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Laura Michaud\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/menu-burger-figma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/menu-burger-figma\/\"},\"author\":{\"name\":\"Laura Michaud\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2\"},\"headline\":\"Comment cr\u00e9er un menu burger sur Figma&nbsp;?\",\"datePublished\":\"2023-07-20T08:30:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/menu-burger-figma\/\"},\"wordCount\":1234,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/menu-burger-figma\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/Image-a-la-une-menu-burger-figma.png\",\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/menu-burger-figma\/\",\"url\":\"https:\/\/graphiste.com\/blog\/menu-burger-figma\/\",\"name\":\"Comment cr\u00e9er un menu burger sur Figma&nbsp;? - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/menu-burger-figma\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/menu-burger-figma\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/Image-a-la-une-menu-burger-figma.png\",\"datePublished\":\"2023-07-20T08:30:00+00:00\",\"description\":\"Un menu burger peut \u00eatre complexe \u00e0 d\u00e9velopper, c\u2019est pourquoi r\u00e9aliser sa maquette sur Figma en amont est pertinent. Pour \u00e9laborer votre menu burger,\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/menu-burger-figma\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/menu-burger-figma\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/menu-burger-figma\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/Image-a-la-une-menu-burger-figma.png\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/Image-a-la-une-menu-burger-figma.png\",\"width\":1024,\"height\":618},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/menu-burger-figma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/graphiste.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment cr\u00e9er un menu burger sur Figma&nbsp;?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/graphiste.com\/blog\/#website\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"name\":\"Graphiste.com\",\"description\":\"graphiste\",\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/graphiste.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\",\"name\":\"Graphiste.com\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"width\":1,\"height\":1,\"caption\":\"Graphiste.com\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/graphistesfreelances\",\"https:\/\/x.com\/Graphistecom\",\"https:\/\/www.linkedin.com\/company\/graphiste-com\/\",\"https:\/\/fr.pinterest.com\/Graphiste_Com\",\"https:\/\/www.instagram.com\/graphiste_com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2\",\"name\":\"Laura Michaud\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g\",\"caption\":\"Laura Michaud\"},\"description\":\"Laura connait tous les meilleurs outils pour g\u00e9rer des projets et une entreprise. Cr\u00e9ative, c'est aussi une sp\u00e9cialiste des outils de cr\u00e9ation graphique pour faire briller une entreprise.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/michaudlaura\/\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/laura\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comment cr\u00e9er un menu burger sur Figma&nbsp;? - Graphiste Blog","description":"Un menu burger peut \u00eatre complexe \u00e0 d\u00e9velopper, c\u2019est pourquoi r\u00e9aliser sa maquette sur Figma en amont est pertinent. Pour \u00e9laborer votre menu burger,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/graphiste.com\/blog\/menu-burger-figma\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment cr\u00e9er un menu burger sur Figma&nbsp;? - Graphiste Blog","og_description":"Un menu burger peut \u00eatre complexe \u00e0 d\u00e9velopper, c\u2019est pourquoi r\u00e9aliser sa maquette sur Figma en amont est pertinent. Pour \u00e9laborer votre menu burger,","og_url":"https:\/\/graphiste.com\/blog\/menu-burger-figma\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2023-07-20T08:30:00+00:00","og_image":[{"width":1024,"height":618,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/Image-a-la-une-menu-burger-figma.png","type":"image\/png"}],"author":"Laura Michaud","twitter_card":"summary_large_image","twitter_creator":"@Graphistecom","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Laura Michaud","Dur\u00e9e de lecture estim\u00e9e":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/menu-burger-figma\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/menu-burger-figma\/"},"author":{"name":"Laura Michaud","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2"},"headline":"Comment cr\u00e9er un menu burger sur Figma&nbsp;?","datePublished":"2023-07-20T08:30:00+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/menu-burger-figma\/"},"wordCount":1234,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/menu-burger-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/Image-a-la-une-menu-burger-figma.png","articleSection":["Webdesign"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/menu-burger-figma\/","url":"https:\/\/graphiste.com\/blog\/menu-burger-figma\/","name":"Comment cr\u00e9er un menu burger sur Figma&nbsp;? - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/menu-burger-figma\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/menu-burger-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/Image-a-la-une-menu-burger-figma.png","datePublished":"2023-07-20T08:30:00+00:00","description":"Un menu burger peut \u00eatre complexe \u00e0 d\u00e9velopper, c\u2019est pourquoi r\u00e9aliser sa maquette sur Figma en amont est pertinent. Pour \u00e9laborer votre menu burger,","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/menu-burger-figma\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/menu-burger-figma\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/menu-burger-figma\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/Image-a-la-une-menu-burger-figma.png","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/Image-a-la-une-menu-burger-figma.png","width":1024,"height":618},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/menu-burger-figma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webdesign","item":"https:\/\/graphiste.com\/blog\/webdesign\/"},{"@type":"ListItem","position":3,"name":"Comment cr\u00e9er un menu burger sur Figma&nbsp;?"}]},{"@type":"WebSite","@id":"https:\/\/graphiste.com\/blog\/#website","url":"https:\/\/graphiste.com\/blog\/","name":"Graphiste.com","description":"graphiste","publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphiste.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/graphiste.com\/blog\/#organization","name":"Graphiste.com","url":"https:\/\/graphiste.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","width":1,"height":1,"caption":"Graphiste.com"},"image":{"@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/graphistesfreelances","https:\/\/x.com\/Graphistecom","https:\/\/www.linkedin.com\/company\/graphiste-com\/","https:\/\/fr.pinterest.com\/Graphiste_Com","https:\/\/www.instagram.com\/graphiste_com\/"]},{"@type":"Person","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2","name":"Laura Michaud","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g","caption":"Laura Michaud"},"description":"Laura connait tous les meilleurs outils pour g\u00e9rer des projets et une entreprise. Cr\u00e9ative, c'est aussi une sp\u00e9cialiste des outils de cr\u00e9ation graphique pour faire briller une entreprise.","sameAs":["https:\/\/www.linkedin.com\/in\/michaudlaura\/"],"url":"https:\/\/graphiste.com\/blog\/author\/laura\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/50159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=50159"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/50159\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/50653"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=50159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=50159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=50159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}