{"id":50163,"date":"2026-02-23T10:20:00","date_gmt":"2026-02-23T09:20:00","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=50163"},"modified":"2026-02-23T10:20:00","modified_gmt":"2026-02-23T09:20:00","slug":"menu-deroulant-figma","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/","title":{"rendered":"Comment cr\u00e9er un menu d\u00e9roulant sur Figma&nbsp;?"},"content":{"rendered":"\n<p>Vous concevez une interface utilisateur pour un site web ou une application et souhaitez int\u00e9grer un <strong>menu d\u00e9roulant Figma<\/strong>&nbsp;? Ce composant incontournable optimise l&#8217;espace disponible \u00e0 l&#8217;\u00e9cran tout en offrant une navigation fluide et intuitive.<\/p>\n\n\n\n<p>Si vous \u00eates envahi par l\u2019h\u00e9sitation et que vous manquez d\u2019id\u00e9es, vous pouvez faire appel \u00e0 un <a href=\"https:\/\/graphiste.com\/softwares\/figma\/users\">freelance sp\u00e9cialiste de Figma<\/a> qui vous aidera \u00e0 concevoir une interface utilisateur qui surpassera vos attentes.<\/p>\n\n\n\n<p>Que vous soyez d\u00e9butant ou confirm\u00e9 sur Figma, ce tutoriel vous fournira des informations et des astuces utiles pour cr\u00e9er un menu d\u00e9roulant fonctionnel pour votre interface utilisateur.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u00c0 quoi sert Figma&nbsp;?<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/www.figma.com\/fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">Figma<\/a> est un outil gratuit de conception d\u2019interfaces utilisateur (UI) et d\u2019exp\u00e9rience utilisateur (UX) en ligne, il n\u2019est pas donc n\u00e9cessaire de t\u00e9l\u00e9charger ou d\u2019installer un logiciel suppl\u00e9mentaire pour l\u2019utiliser. Il est largement exploit\u00e9 par les designers pour concevoir, collaborer, prototyper et transmettre facilement le design au cours du processus de cr\u00e9ation de produits num\u00e9riques.&nbsp;<\/p>\n\n\n\n<p>Figma offre une interface utilisateur conviviale et des fonctionnalit\u00e9s avanc\u00e9es pour faciliter le processus de conception. Par exemple, il permet de cr\u00e9er des \u00e9l\u00e9ments d\u2019interface r\u00e9utilisables tels que des ic\u00f4nes, des boutons ou des barres de navigation que vous pouvez stocker et organiser dans des biblioth\u00e8ques. En plus, Figma enregistre automatiquement l\u2019historique de vos designs, ce qui vous permet de restaurer une version ant\u00e9rieure sp\u00e9cifique.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Qu&#8217;est-ce qu&#8217;un menu d\u00e9roulant\u00a0?<\/strong><\/h2>\n\n\n\n<p>Un menu d\u00e9roulant, ou <em>dropdown<\/em>, est un \u00e9l\u00e9ment d\u2019interface utilisateur largement utilis\u00e9 pour organiser des sous-menus ou des listes d\u2019options. Il permet de regrouper plusieurs choix sous un seul bouton ou champ, offrant ainsi une solution pratique pour r\u00e9duire l\u2019encombrement visuel tout en am\u00e9liorant l\u2019exp\u00e9rience utilisateur.<\/p>\n\n\n\n<p>Lorsque l\u2019utilisateur clique ou survole le bouton associ\u00e9, le menu se d\u00e9ploie pour r\u00e9v\u00e9ler des options suppl\u00e9mentaires. Ce m\u00e9canisme est particuli\u00e8rement utile pour pr\u00e9senter des cat\u00e9gories de contenu ou des actions secondaires sans occuper trop d\u2019espace sur la page. Les menus d\u00e9roulants sont id\u00e9aux pour rendre une interface plus intuitive et facile \u00e0 naviguer, que ce soit sur un site web ou une application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Comment cr\u00e9er un menu d\u00e9roulant sur Figma&nbsp;?<\/strong><\/h2>\n\n\n\n<p>Dans ce tutoriel, nous allons cr\u00e9er un exemple concret&nbsp;: un bouton de navigation d\u00e9roulant. Cet exercice vous permettra de d\u00e9couvrir \u00e9tape par \u00e9tape comment concevoir un menu d\u00e9roulant fonctionnel et esth\u00e9tique.<\/p>\n\n\n\n<p>Avant de commencer, assurez-vous d\u2019\u00eatre inscrit sur Figma. Une fois connect\u00e9, cr\u00e9ez un nouveau fichier de design et donnez-lui un nom clair.<\/p>\n\n\n\n<p>Pour structurer efficacement votre projet, commencez par cr\u00e9er deux pages distinctes&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Desktop<\/strong>&nbsp;: Ici, vous assemblerez le rendu final du menu d\u00e9roulant dans un contexte d\u2019interface utilisateur.<\/li>\n\n\n\n<li><strong>Composants<\/strong>&nbsp;: Cette page sera d\u00e9di\u00e9e \u00e0 la cr\u00e9ation et \u00e0 la gestion des \u00e9l\u00e9ments de design r\u00e9utilisables.<\/li>\n<\/ul>\n\n\n\n<p><em>Astuce&nbsp;:<\/em> Dans la barre d\u2019outils \u00e0 gauche, vous pouvez renommer vos pages avec des noms significatifs et m\u00eame y int\u00e9grer des \u00e9mojis pour une organisation visuelle intuitive. Une bonne structure de projet vous fera gagner un temps pr\u00e9cieux et facilitera la navigation entre les \u00e9l\u00e9ments.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"342\" height=\"212\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-2.png\" alt=\"figma menu d\u00e9roulant\" class=\"wp-image-50164\" srcset=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-2.png 342w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-2-300x186.png 300w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-2-60x37.png 60w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-2-270x167.png 270w\" sizes=\"(max-width: 342px) 100vw, 342px\" \/><\/figure>\n\n\n\n<p>Ensuite, nous allons cr\u00e9er nos composants. Cliquez sur \u00ab\u2009Composants\u2009\u00bb et s\u00e9lectionnez l\u2019outil \u00ab\u2009Rectangle\u2009\u00bb, dans la barre d\u2019outils sup\u00e9rieure, pour dessiner un rectangle qui va repr\u00e9senter le bouton du menu d\u00e9roulant. Vous pouvez choisir sa taille, sa couleur de fond et vous pouvez lui ajouter un effet, une ombre par exemple.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"886\" height=\"397\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-3.png\" alt=\"menu d\u00e9roulant figma\" class=\"wp-image-50165\" srcset=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-3.png 886w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-3-300x134.png 300w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-3-768x344.png 768w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-3-60x27.png 60w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-3-370x166.png 370w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-3-270x121.png 270w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-3-570x255.png 570w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-3-740x332.png 740w\" sizes=\"(max-width: 886px) 100vw, 886px\" \/><\/figure>\n\n\n\n<p>Ensuite, utilisez l\u2019outil \u00ab&nbsp;<strong>Texte<\/strong>&nbsp;\u00bb pour ajouter le texte du bouton du menu d\u00e9roulant. Une fois que vous avez ajout\u00e9 le texte, vous pouvez le formater en modifiant sa police, sa taille, sa couleur\u2026, en utilisant les options de formatage disponibles dans la barre d\u2019outils de droite.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"460\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-11-1024x460.png\" alt=\"menu deroulant figma\" class=\"wp-image-50173\" srcset=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-11-1024x460.png 1024w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-11-300x135.png 300w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-11-768x345.png 768w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-11-60x27.png 60w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-11-370x166.png 370w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-11-270x121.png 270w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-11-570x256.png 570w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-11-740x332.png 740w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-11.png 1076w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Maintenant, vous devez cr\u00e9er votre premier composant en fusionnant ces deux \u00e9l\u00e9ments. Pour cela, s\u00e9lectionnez les deux \u00e9l\u00e9ments, puis rendez-vous dans la barre d\u2019outils sup\u00e9rieure et cliquez sur \u00ab&nbsp;<strong>create component<\/strong>&nbsp;\u00bb comme il est indiqu\u00e9 sur l\u2019image suivante&nbsp;:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"946\" height=\"424\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-4.png\" alt=\"dropdown menu figma\" class=\"wp-image-50166\" srcset=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-4.png 946w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-4-300x134.png 300w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-4-768x344.png 768w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-4-60x27.png 60w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-4-370x166.png 370w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-4-270x121.png 270w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-4-570x255.png 570w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-4-740x332.png 740w\" sizes=\"(max-width: 946px) 100vw, 946px\" \/><\/figure>\n\n\n\n<p>Nous allons maintenant cr\u00e9er notre deuxi\u00e8me composant, \u00ab\u2009La liste d\u00e9roulante\u2009\u00bb. \u00c0 cet effet, vous devrez suivre les m\u00eames \u00e9tapes pr\u00e9c\u00e9dentes pour cr\u00e9er la variante \u00ab\u2009<strong>Option<\/strong>\u2009\u00bb. <\/p>\n\n\n\n<p>Vous pouvez ajuster sa largeur et sa hauteur en fonction de la taille de la liste d\u00e9roulante que vous souhaitez. En plus, vous pouvez personnaliser son texte.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"931\" height=\"418\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-5.png\" alt=\"figma dropdown menu\" class=\"wp-image-50167\" srcset=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-5.png 931w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-5-300x135.png 300w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-5-768x345.png 768w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-5-60x27.png 60w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-5-370x166.png 370w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-5-270x121.png 270w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-5-570x256.png 570w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-5-740x332.png 740w\" sizes=\"(max-width: 931px) 100vw, 931px\" \/><\/figure>\n\n\n\n<p>Avec votre clavier, cliquez \u00ab&nbsp;<strong>Ctrl&nbsp;+D <\/strong>\u00bb pour cr\u00e9er le nombre d\u2019items souhait\u00e9s. S\u00e9lectionnez tous ces nouveaux \u00e9l\u00e9ments et r\u00e9glez l\u2019espace entre eux en agissant sur les propri\u00e9t\u00e9s affich\u00e9es dans la barre d\u2019outils de droite.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"866\" height=\"388\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-6.png\" alt=\"cr\u00e9er un menu d\u00e9roulant\" class=\"wp-image-50168\" srcset=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-6.png 866w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-6-300x134.png 300w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-6-768x344.png 768w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-6-60x27.png 60w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-6-370x166.png 370w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-6-270x121.png 270w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-6-570x255.png 570w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-6-740x332.png 740w\" sizes=\"(max-width: 866px) 100vw, 866px\" \/><\/figure>\n\n\n\n<p>Vous pouvez modifier le texte par \u00e9l\u00e9ment de la liste, par exemple \u00ab&nbsp;<strong>Option 1<\/strong>&nbsp;\u00bb, \u00ab&nbsp;<strong>Option 2<\/strong>&nbsp;\u00bb&#8230; Finalement, vous pouvez cr\u00e9er votre composant \u00ab&nbsp;<strong>La liste d\u00e9roulante<\/strong>&nbsp;\u00bb en fusionnant ces \u00e9l\u00e9ments.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"459\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-7-1024x459.png\" alt=\"menu d\u00e9roulant figma\" class=\"wp-image-50169\" srcset=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-7-1024x459.png 1024w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-7-300x135.png 300w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-7-768x344.png 768w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-7-60x27.png 60w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-7-370x166.png 370w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-7-270x121.png 270w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-7-570x256.png 570w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-7-740x332.png 740w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-7.png 1057w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Une fois que nous avons cr\u00e9\u00e9 les composants n\u00e9cessaires, nous allons mettre en place le prototype avec dropdown pour ajouter une interaction afin d\u2019activer et afficher la liste d\u00e9roulante lorsque le bouton est cliqu\u00e9.&nbsp;<\/p>\n\n\n\n<p>Sur la page \u00ab&nbsp;<strong>Desktop<\/strong>&nbsp;\u00bb, vous cr\u00e9ez le cadre en cliquant sur \u00ab<strong>&nbsp;frame<\/strong>&nbsp;\u00bb de la barre d\u2019outils sup\u00e9rieure. Notez que vous pouvez personnaliser ce cadre aussi selon vos choix.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"850\" height=\"381\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-9.png\" alt=\"menu d\u00e9roulant figma\" class=\"wp-image-50171\" srcset=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-9.png 850w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-9-300x134.png 300w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-9-768x344.png 768w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-9-60x27.png 60w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-9-370x166.png 370w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-9-270x121.png 270w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-9-570x255.png 570w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-9-740x332.png 740w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/figure>\n\n\n\n<p>Puis allez dans \u00ab&nbsp;<strong>assets<\/strong>&nbsp;\u00bb dans la barre d\u2019outils de gauche et faites glisser le menu d\u00e9roulant puis la liste d\u00e9roulante juste en dessus. Cliquez sur \u00ab&nbsp;<strong>prototype<\/strong>&nbsp;\u00bb de la barre d\u2019outils de droite et reliez le bouton avec la liste comme il est indiqu\u00e9 sur l\u2019image suivante&nbsp;:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"961\" height=\"431\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-8.png\" alt=\"menu deroulant figma\" class=\"wp-image-50170\" srcset=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-8.png 961w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-8-300x135.png 300w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-8-768x344.png 768w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-8-60x27.png 60w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-8-370x166.png 370w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-8-270x121.png 270w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-8-570x256.png 570w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-8-740x332.png 740w\" sizes=\"(max-width: 961px) 100vw, 961px\" \/><\/figure>\n\n\n\n<p>\u00c0 pr\u00e9sent, il est possible de proc\u00e9der \u00e0 la configuration de l\u2019interaction. Choisissez \u00ab\u2009<strong>OnClick<\/strong>\u2009\u00bb pour l\u2019\u00e9v\u00e9nement et s\u00e9lectionnez \u00ab\u2009<strong>Open overlay<\/strong>\u2009\u00bb pour l\u2019action. Ensuite, r\u00e9glez manuellement la position de la liste d\u00e9roulante. Finalement, cochez \u00ab\u2009<strong>Close when clicking outside<\/strong>\u2009\u00bb pour que la liste d\u00e9roulante se ferme quand nous cliquons en dehors du bouton. Vous pouvez g\u00e9rer \u00e9galement les animations.<\/p>\n\n\n\n<p>Une fois que vous avez configur\u00e9 l\u2019interaction, vous pouvez pr\u00e9visualiser votre menu d\u00e9roulant en cliquant sur le bouton \u00ab&nbsp;<strong>play<\/strong>&nbsp;\u00bb en haut \u00e0 droite de la fen\u00eatre Figma.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"990\" height=\"444\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-10.png\" alt=\"menu d\u00e9roulant figma\" class=\"wp-image-50172\" srcset=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-10.png 990w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-10-300x135.png 300w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-10-768x344.png 768w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-10-60x27.png 60w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-10-370x166.png 370w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-10-270x121.png 270w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-10-570x256.png 570w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/05\/image-10-740x332.png 740w\" sizes=\"(max-width: 990px) 100vw, 990px\" \/><\/figure>\n\n\n\n<p>Avec Figma, il est possible d\u2019observer votre menu d\u00e9roulant sur diff\u00e9rents appareils et tailles d\u2019\u00e9cran. Il suffit de s\u00e9lectionner le type d\u2019appareil avant de proc\u00e9der \u00e0 la visualisation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Notre astuce pour cr\u00e9er un menu d\u00e9roulant sur Figma<\/strong><\/h2>\n\n\n\n<p>Ces \u00e9tapes devraient vous aider \u00e0 cr\u00e9er un menu d\u00e9roulant de base sur Figma. Vous pouvez ensuite affiner le design, les animations et les interactions en fonction de vos besoins sp\u00e9cifiques.<\/p>\n\n\n\n<p>N\u2019h\u00e9sitez pas \u00e0 collaborer avec un webdesigner comp\u00e9tent sur notre <a href=\"https:\/\/graphiste.com\/#open-fast\">plateforme de graphistes freelances<\/a>, en d\u00e9posant une annonce gratuitement. Concr\u00e9tisez votre prototype d\u2019interface utilisateur et cr\u00e9ez un site web ou une application qui r\u00e9pondra parfaitement \u00e0 votre projet&nbsp;!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vous concevez une interface utilisateur pour un site web ou une application et souhaitez int\u00e9grer un menu d\u00e9roulant Figma&nbsp;? Ce composant incontournable optimise l&#8217;espace disponible \u00e0 l&#8217;\u00e9cran tout en offrant une navigation fluide et intuitive. Si vous \u00eates envahi par l\u2019h\u00e9sitation et que vous manquez d\u2019id\u00e9es, vous pouvez faire appel \u00e0 un freelance sp\u00e9cialiste de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":56380,"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-50163","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 d\u00e9roulant sur Figma&nbsp;? - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Vous concevez une interface utilisateur pour un site web ou une application et souhaitez int\u00e9grer un menu d\u00e9roulant Figma ? Ce composant incontournable\" \/>\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-deroulant-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 d\u00e9roulant sur Figma&nbsp;? - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Vous concevez une interface utilisateur pour un site web ou une application et souhaitez int\u00e9grer un menu d\u00e9roulant Figma ? Ce composant incontournable\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/menu-deroulant-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=\"2026-02-23T09:20:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/menu-deroulant-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=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/\"},\"author\":{\"name\":\"Laura Michaud\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2\"},\"headline\":\"Comment cr\u00e9er un menu d\u00e9roulant sur Figma&nbsp;?\",\"datePublished\":\"2026-02-23T09:20:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/\"},\"wordCount\":1217,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/menu-deroulant-figma.png\",\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/\",\"url\":\"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/\",\"name\":\"Comment cr\u00e9er un menu d\u00e9roulant sur Figma&nbsp;? - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/menu-deroulant-figma.png\",\"datePublished\":\"2026-02-23T09:20:00+00:00\",\"description\":\"Vous concevez une interface utilisateur pour un site web ou une application et souhaitez int\u00e9grer un menu d\u00e9roulant Figma ? Ce composant incontournable\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/menu-deroulant-figma.png\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/menu-deroulant-figma.png\",\"width\":1024,\"height\":618,\"caption\":\"menu d\u00e9roulant figma\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/menu-deroulant-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 d\u00e9roulant 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 d\u00e9roulant sur Figma&nbsp;? - Graphiste Blog","description":"Vous concevez une interface utilisateur pour un site web ou une application et souhaitez int\u00e9grer un menu d\u00e9roulant Figma ? Ce composant incontournable","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-deroulant-figma\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment cr\u00e9er un menu d\u00e9roulant sur Figma&nbsp;? - Graphiste Blog","og_description":"Vous concevez une interface utilisateur pour un site web ou une application et souhaitez int\u00e9grer un menu d\u00e9roulant Figma ? Ce composant incontournable","og_url":"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2026-02-23T09:20:00+00:00","og_image":[{"width":1024,"height":618,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/menu-deroulant-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":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/"},"author":{"name":"Laura Michaud","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2"},"headline":"Comment cr\u00e9er un menu d\u00e9roulant sur Figma&nbsp;?","datePublished":"2026-02-23T09:20:00+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/"},"wordCount":1217,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/menu-deroulant-figma.png","articleSection":["Webdesign"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/","url":"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/","name":"Comment cr\u00e9er un menu d\u00e9roulant sur Figma&nbsp;? - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/menu-deroulant-figma.png","datePublished":"2026-02-23T09:20:00+00:00","description":"Vous concevez une interface utilisateur pour un site web ou une application et souhaitez int\u00e9grer un menu d\u00e9roulant Figma ? Ce composant incontournable","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/menu-deroulant-figma\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/menu-deroulant-figma.png","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/07\/menu-deroulant-figma.png","width":1024,"height":618,"caption":"menu d\u00e9roulant figma"},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/menu-deroulant-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 d\u00e9roulant 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\/50163","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=50163"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/50163\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/56380"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=50163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=50163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=50163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}