{"id":49500,"date":"2023-04-20T08:30:00","date_gmt":"2023-04-20T06:30:00","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=49500"},"modified":"2024-03-06T09:13:17","modified_gmt":"2024-03-06T08:13:17","slug":"figma-responsive-design","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/figma-responsive-design\/","title":{"rendered":"Comment cr\u00e9er des designs responsives sur Figma&nbsp;?"},"content":{"rendered":"\n<p>Cr\u00e9er des sites et applications avec un design responsive est devenu essentiel. En effet, de plus en plus d\u2019utilisateurs y acc\u00e8dent en utilisant une grande vari\u00e9t\u00e9 d\u2019appareils avec des tailles d\u2019\u00e9crans diff\u00e9rentes.<\/p>\n\n\n\n<p>Avec Figma, vous pouvez cr\u00e9er des designs responsives car cet outil offre des fonctionnalit\u00e9s avanc\u00e9es pour la conception d&#8217;interfaces utilisateur responsives. Si vous n\u2019avez jamais utilis\u00e9 Figma, n\u2019h\u00e9sitez pas \u00e0 contacter un <a href=\"https:\/\/graphiste.com\/#open-fast\">graphiste freelance<\/a> qui pourra vous accompagner dans la prise en main de l\u2019outil.<\/p>\n\n\n\n<p>En suivant les \u00e9tapes pr\u00e9sent\u00e9es dans ce tutoriel, vous serez en capacit\u00e9 de concevoir des designs responsives avec Figma pour am\u00e9liorer l&#8217;exp\u00e9rience utilisateur et l\u2019accessibilit\u00e9 de votre site web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pourquoi cr\u00e9er un design responsive&nbsp;sur Figma&nbsp;?<\/h2>\n\n\n\n<p>Smartphones, tablettes ou ordinateurs&#8230; De nos jours, plusieurs tailles d\u2019\u00e9crans ont acc\u00e8s \u00e0 un m\u00eame contenu et cela peut \u00eatre probl\u00e9matique si le design ne s\u2019adapte pas automatiquement \u00e0 toutes les tailles.<\/p>\n\n\n\n<p>Les design responsives sont devenus une norme au vu du nombre d\u2019appareils diff\u00e9rents utilis\u00e9s pour acc\u00e9der \u00e0 des applications ou des sites web. Gr\u00e2ce au responsive design, les sites web et applications s\u2019adaptent automatiquement \u00e0 la taille de l\u2019\u00e9cran des utilisateurs et offrent ainsi une meilleure exp\u00e9rience utilisateur, quel que soit l\u2019appareil utilis\u00e9.<\/p>\n\n\n\n<p>L&#8217;am\u00e9lioration de l\u2019exp\u00e9rience utilisateur est l\u2019un des principaux avantages d\u2019un design responsive. Une bonne exp\u00e9rience utilisateur assure aux utilisateurs une utilisation simple et facile avec n\u2019importe quel dispositif d\u2019acc\u00e8s. <\/p>\n\n\n\n<p>Avec le responsive design, les utilisateurs peuvent voir plus facilement et clairement les informations importantes. Ils arrivent mieux \u00e0 naviguer sur un site ou une application et les fonctionnalit\u00e9s y sont plus accessibles.<\/p>\n\n\n\n<p>Un second avantage non n\u00e9gligeable du responsive design est qu\u2019il est favoris\u00e9 par les moteurs de recherche tels que Google. L\u2019objectif des moteurs de recherche est de satisfaire leurs utilisateurs en leur proposant les meilleurs r\u00e9sultats selon leur recherche et l\u2019exp\u00e9rience utilisateur.<\/p>\n\n\n\n<p>Les sites qui ont un design responsive seront mis plus en avant par les moteurs de recherche, car ceux-ci offrent une exp\u00e9rience utilisateur de meilleure qualit\u00e9. En ayant des positions plus hautes dans les r\u00e9sultats de recherche, vous pouvez augmenter le trafic organique de votre site et am\u00e9liorer la visibilit\u00e9 de votre entreprise.<\/p>\n\n\n\n<p>Cr\u00e9er un design responsive qui garantit que votre site web ou application s&#8217;adapte automatiquement \u00e0 la taille de l&#8217;\u00e9cran n\u2019est pas une obligation, mais est fortement recommand\u00e9 pour que vos utilisateurs soient pleinement satisfaits.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Comment utiliser les contraintes et la mise en page automatique pour cr\u00e9er un design responsive avec Figma&nbsp;?<\/h2>\n\n\n\n<p>Si vous \u00eates en plein dans la conception des maquettes de votre site web ou de votre application avec Figma, alors vous allez devoir adapter chaque maquette pour diff\u00e9rentes tailles d\u2019\u00e9cran.<\/p>\n\n\n\n<p>Cela peut para\u00eetre compliqu\u00e9 et effectivement, ce le sera si vous le faites manuellement. Mais puisque Figma est un outil complet et moderne, vous allez pouvoir utiliser certaines fonctionnalit\u00e9s pour cr\u00e9er des maquettes qui s\u2019adaptent automatiquement \u00e0 de multiples tailles.<\/p>\n\n\n\n<p>C\u2019est tout le principe du responsive design dans lequel la taille et la position des \u00e9l\u00e9ments, dans un \u00e9cran d\u2019application ou une page web, sont ajust\u00e9es automatiquement selon la taille de l\u2019\u00e9cran de l\u2019appareil utilis\u00e9.<\/p>\n\n\n\n<p>Gr\u00e2ce aux fonctionnalit\u00e9s de \u00ab&nbsp;Contraintes&nbsp;\u00bb et de \u00ab&nbsp;Mise en page automatique&nbsp;\u00bb (\u00ab&nbsp;Constraints&nbsp;\u00bb et \u00ab&nbsp;Auto-layout&nbsp;\u00bb sur l\u2019interface en anglais de Figma), vous allez pouvoir cr\u00e9er un design responsive o\u00f9 les \u00e9l\u00e9ments vont se repositionner en fonction&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>De la taille du conteneur de l\u2019\u00e9l\u00e9ment ;<\/li>\n\n\n\n<li>Des autres \u00e9l\u00e9ments.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Quel est le probl\u00e8me d\u2019un design non-responsive&nbsp;?<\/h3>\n\n\n\n<p>Prenons un exemple assez simple d\u2019un titre et d\u2019un sous-titre avec l\u2019un au-dessus de l\u2019autre. Lorsque vous allez redimensionner, augmenter la taille, \u00e9crire un titre trop long ou sur deux lignes, alors le titre va chevaucher le sous-titre.<\/p>\n\n\n\n<p><em>Ce n\u2019est qu\u2019un probl\u00e8me li\u00e9 \u00e0 un design non-responsive, mais ce n\u2019est pas l\u2019unique probl\u00e8me. Nous \u00e9voquerons uniquement ce probl\u00e8me pour montrer que le design non-responsive n\u2019est pas optimal.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/whR3BM5xJ9DxQ_V2QJYj_U9b9PlretN0UWwRpIs4dcccBinw-eFO1nFXwDUh8v0wk62UGPl5w8zG33A-8xRSzlp3yn-7ngSLYpstGNLS7fUk-aZWnc4QjUGORBTocXHz3BI1SrtMPJxEGrqMBbBb3Q\" alt=\"\" \/><\/figure>\n\n\n\n<p>Pour r\u00e9gler le probl\u00e8me ci-dessus, vous devrez donc r\u00e9ajuster manuellement la position du sous-titre pour qu\u2019il s\u2019adapte \u00e0 la nouvelle mise en page du titre. Ceci repr\u00e9sente le probl\u00e8me principal d\u2019un design non-responsive sur Figma&nbsp;: vous devrez constamment revoir la mise en page et la mise en forme de chaque \u00e9l\u00e9ment de mani\u00e8re manuelle.<\/p>\n\n\n\n<p>Sans design responsive, des \u00e9l\u00e9ments de vos maquettes pourront se superposer lors de nombreuses modifications et il vous faudra alors revoir l\u2019ensemble du design de votre site ou de votre application.<\/p>\n\n\n\n<p>En utilisant les options de \u00ab&nbsp;Constraints&nbsp;\u00bb et \u00ab&nbsp;Auto-layout&nbsp;\u00bb sur Figma, vos \u00e9l\u00e9ments s\u2019adapteront par eux-m\u00eames aux modifications que vous apporterez aux autres \u00e9l\u00e9ments de votre maquette.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. Adapter les \u00e9l\u00e9ments avec un auto-layout<\/h4>\n\n\n\n<p>Pour que vos \u00e9l\u00e9ments s\u2019adaptent entre eux, vous devez appliquer un auto-layout sur l\u2019ensemble des \u00e9l\u00e9ments concern\u00e9s.<\/p>\n\n\n\n<p>Commencez par s\u00e9lectionner l\u2019ensemble des \u00e9l\u00e9ments qui doivent s\u2019ajuster les uns aux autres (1), vous pouvez faire une s\u00e9lection multiple en maintenant la touche \u00ab&nbsp;Shift&nbsp;\u00bb. Puis cliquez sur l\u2019option \u00ab&nbsp;Auto-layout&nbsp;\u00bb dans le panneau lat\u00e9ral de Figma (2).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/UGE-x6eX6NLEORv7uly4yxr0N9MZ2vx4WUfkLUdge9HmBIIVxst0Diim1ZeU18Vydi7W0VydFM6qj8_DAyzZG-J8hygXo2X9vOiVL0Jk34Z90HvMkPUH5ow9DBY9esrqfeOJ9EpLu_E201ogcfVkGQ\" alt=\"\" \/><\/figure>\n\n\n\n<p>Vos \u00e9l\u00e9ments seront alors contenus dans une \u00ab&nbsp;Frame&nbsp;\u00bb qui repr\u00e9sente l\u2019auto-layout pr\u00e9c\u00e9demment ajout\u00e9e. Vous pouvez retrouver l\u2019ensemble des \u00e9l\u00e9ments contenus dans l\u2019auto-layout en ouvrant l\u2019\u00e9l\u00e9ment&nbsp;\u00ab&nbsp;Frame&nbsp;\u00bb dans le panneau des \u00ab&nbsp;Layers&nbsp;\u00bb de Figma.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/enqjNYjukO7aLYR3d96nJmsvYDcPdsI_803dLjJTw1DBHkf6BWuJYT_3H2ef7KLtvIqCNdR8t7en7xHxGVwl7iRf-A8L0KHXDykHMRw34HW7YaGzkQpmG8IPfDY5Bq206pqYMgCJyBshAu8bh9dfWg\" alt=\"\" \/><\/figure>\n\n\n\n<p>Comme vous pouvez le voir, les \u00e9l\u00e9ments dans la \u00ab&nbsp;Frame&nbsp;\u00bb ne se superposent plus, comme nous avons pu le voir dans la partie pr\u00e9c\u00e9dente qui \u00e9voque le probl\u00e8me d\u2019un design non-responsive, mais le sous-titre s\u2019est adapt\u00e9 au titre situ\u00e9 au-dessus.<\/p>\n\n\n\n<p>Cependant, si nous r\u00e9duisons la largeur du conteneur, \u00e0 savoir l\u2019\u00e9l\u00e9ment \u00ab&nbsp;Frame&nbsp;\u00bb, alors les \u00e9l\u00e9ments contenus dedans d\u00e9passeront s\u2019ils ont une largeur plus grande. Ce que nous souhaitons, c\u2019est que l\u2019ensemble des \u00e9l\u00e9ments du conteneur s\u2019adaptent aux modifications du conteneur. Si sa largeur change, la largeur maximale des \u00e9l\u00e9ments devra changer aussi.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/vJ8ycvT5LXFVXlTyNF0zazCUcCJg9xQrFlQ3X7q28MxOcn9UwCeImnzcHzPAPUwMO3ZY0HOC7o6q-ZiI_VCBBaEIKSrMR0ZFgidXQGncR3Q05Nqh_pLUask1v5z17oyZMa9SB9-SLaUoez5FTE9lRQ\" alt=\"\" \/><\/figure>\n\n\n\n<p>Pour cela, il va falloir modifier les param\u00e8tres de l\u2019auto-layout pour chaque \u00e9l\u00e9ment de votre conteneur par \u00ab&nbsp;Fill Container&nbsp;\u00bb.<\/p>\n\n\n\n<p>S\u00e9lectionnez un \u00e9l\u00e9ment de votre conteneur (1) puis dans les options d\u2019auto-layout, vous pouvez modifier les valeurs qui sont par d\u00e9faut sur \u00ab&nbsp;Hug&nbsp;\u00bb (2) pour \u00ab&nbsp;Hug contents&nbsp;\u00bb par \u00ab&nbsp;Fill Container&nbsp;\u00bb (3) qui se raccourcira en \u00ab&nbsp;Fill&nbsp;\u00bb.<\/p>\n\n\n\n<p>R\u00e9p\u00e9tez cette op\u00e9ration pour l\u2019ensemble des \u00e9l\u00e9ments de votre conteneur qui doivent s\u2019adapter aux changements qui lui sont apport\u00e9s.<\/p>\n\n\n\n<p>Avec l\u2019option \u00ab&nbsp;Fill container&nbsp;\u00bb sur la largeur, les \u00e9l\u00e9ments vont s\u2019adapter au conteneur. Par cons\u00e9quent, si la largeur du conteneur diminue, la largeur maximale des \u00e9l\u00e9ments contenus \u00e0 l\u2019int\u00e9rieur diminuera aussi (4), alors qu\u2019avec l\u2019option \u00ab&nbsp;Hug contents&nbsp;\u00bb, la largeur des \u00e9l\u00e9ments est d\u00e9finie selon le contenu.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/sJo9SQnHuySwzoe5Ze9UiMdIurmgMf7_e6u7dO-VqFBIekaWmCY3VocvqfzKV1nNcD1GKzfkXpUdKTgVK2Ai68cAU8JYTshZpcnKg9kP6Em_6dv7bdliVSWAGoTJ12JW6CZPIPKRUarMd3ObLF4inQ\" alt=\"\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">2. Ajuster la taille des \u00e9l\u00e9ments avec des contraintes<\/h4>\n\n\n\n<p>Imaginons que vous souhaitiez ajouter une photo \u00e0 votre titre et au sous-titre. Sur Figma, vous allez ajouter une nouvelle frame avec l\u2019outil \u00ab&nbsp;Frame&nbsp;\u00bb ou la touche \u00ab&nbsp;F&nbsp;\u00bb et cr\u00e9er une frame aux dimensions souhait\u00e9es.<\/p>\n\n\n\n<p>Importez votre image dans Figma et int\u00e9grez-la dans le frame pr\u00e9c\u00e9demment cr\u00e9\u00e9, aux dimensions de la frame. Vous devriez avoir un r\u00e9sultat similaire \u00e0 celui-ci&nbsp;:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/utPf24aUoCgNN74FsTxyelFjyfQ3Ze7Wmwg7axjWhQyGNXCJ1WJ6m_4RrxtIXKokiaxBU9lwYpkFPd3wsLDTk_9TVj-K9QhcN0Fi4WSxEFnU204rKo0KIMJdrcHJmXS7NAuDYOyoxz2SzQrOdq1boA\" alt=\"\" \/><\/figure>\n\n\n\n<p>Le probl\u00e8me est que si vous souhaitez agrandir la taille de la frame de l\u2019image en largeur ou en hauteur, l\u2019image ne suivra pas ce changement et restera \u00e0 ses dimensions initiales&nbsp;:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/oJB_cK8I_o1Ujh3fLFuyFVNsOZBPX-0kLmEbyJiqLOyupsPFDrKAYyX7MeYNf49xuf-Q05vEaH8G8DWzEJ589FBQH29y1Eg-fmLQL6FW3YrrZUCluW6Q-l7ZgEFj7NJteYpqX_uWCb26cuute4QU7A\" alt=\"\" \/><\/figure>\n\n\n\n<p>La solution \u00e0 ce probl\u00e8me est relativement simple gr\u00e2ce \u00e0 la fonctionnalit\u00e9 de \u00ab&nbsp;Contraintes&nbsp;\u00bb ou \u00ab&nbsp;Constraints&nbsp;\u00bb sur Figma.&nbsp;<\/p>\n\n\n\n<p>Revenez quelques pas en arri\u00e8re, lorsque l\u2019image avait les m\u00eames dimensions que son conteneur. S\u00e9lectionnez l\u2019image qui doit s\u2019adapter \u00e0 son conteneur (1).<\/p>\n\n\n\n<p>Dans la section \u00ab&nbsp;Constraints&nbsp;\u00bb du panneau lat\u00e9ral droit de Figma, s\u00e9lectionnez la valeur \u00ab&nbsp;Scale&nbsp;\u00bb en horizontal et vertical pour que l\u2019image s\u2019adapte parfaitement aux redimensionnements de son conteneur.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/D0HY-kaeozu3TfHGz37ezuiaBXUTfc0_c7pCYXWZdjJzWvptlDjlvy79EIb-Q5SDojt6axaOTGQzEvo3Fdgfs7OOA8Uci-afxGM8vl4B9pDg5vAXE-NmJnClkSMNCtZ18Mce4COG90IOhTAsuyA7Jg\" alt=\"\" \/><\/figure>\n\n\n\n<p>Essayez de changer les valeurs de largeur et hauteur du conteneur et vous pourrez voir que l\u2019image est bien redimensionn\u00e9e de la m\u00eame mani\u00e8re.<\/p>\n\n\n\n<p>En reprenant l\u2019exemple utilis\u00e9 dans la partie pr\u00e9c\u00e9dente sur l\u2019auto-layout, vous pouvez int\u00e9grer le conteneur \u00ab&nbsp;Frame&nbsp;\u00bb de votre image dans le conteneur de votre titre et sous-titre (1). Puis, s\u00e9lectionnez le conteneur de votre image pour d\u00e9finir les valeurs d\u2019auto-layout sur \u00ab&nbsp;Fill Container&nbsp;\u00bb ou \u00ab&nbsp;Fill&nbsp;\u00bb pour la largeur et la hauteur (2).<\/p>\n\n\n\n<p>De cette mani\u00e8re, vous aurez un bloc contenant une image, un titre et un sous-titre enti\u00e8rement responsive que vous pouvez redimensionner \u00e0 votre guise et dont les \u00e9l\u00e9ments s\u2019adapteront automatiquement (3).<\/p>\n\n\n\n<p>On imagine vite qu\u2019un tel bloc peut \u00eatre utilis\u00e9 en introduction d\u2019un article de blog et vous pouvez rapidement r\u00e9aliser la mise en page pour ordinateur \u00e0 l\u2019horizontale ou pour mobile \u00e0 la verticale.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/3bPchjJDr61qu7B1SlelfSmzupxiIWiaRKGCU7IlaU2hiGyblLuIVa9Eir1V-pWDO3ypmfSzlwTrQORAE-v2WH-CqWY0FljxSI_ND-baWCumH2_k7Or8GU0PwrGya63Gxrqoev8dwaNl0WDIyL-vnA\" alt=\"\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Notre astuce pour cr\u00e9er des designs responsives sur Figma<\/h2>\n\n\n\n<p>En suivant ce tutoriel, vous aurez appris \u00e0 cr\u00e9er simplement et efficacement un design responsive sur Figma qui vous servira pour cr\u00e9er des maquettes pour toutes les tailles d\u2019\u00e9cran&nbsp;!<\/p>\n\n\n\n<p>Si vous pr\u00e9f\u00e9rez d\u00e9l\u00e9guer la cr\u00e9ation des maquettes de votre site ou de votre application, n\u2019h\u00e9sitez pas \u00e0 poster une annonce gratuite sur Graphiste.com pour trouver rapidement l\u2019aide d\u2019un <a href=\"https:\/\/graphiste.com\/softwares\/figma\/users\">graphiste sp\u00e9cialiste de Figma<\/a> qui pourra concevoir sur Figma les maquettes dont vous avez besoin.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cr\u00e9er des sites et applications avec un design responsive est devenu essentiel. En effet, de plus en plus d\u2019utilisateurs y acc\u00e8dent en utilisant une grande vari\u00e9t\u00e9 d\u2019appareils avec des tailles d\u2019\u00e9crans diff\u00e9rentes. Avec Figma, vous pouvez cr\u00e9er des designs responsives car cet outil offre des fonctionnalit\u00e9s avanc\u00e9es pour la conception d&#8217;interfaces utilisateur responsives. Si vous [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":49502,"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-49500","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 des designs responsives sur Figma&nbsp;? - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Cr\u00e9er des sites et applications avec un design responsive est devenu essentiel. En effet, de plus en plus d\u2019utilisateurs y acc\u00e8dent en utilisant une\" \/>\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\/figma-responsive-design\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment cr\u00e9er des designs responsives sur Figma&nbsp;? - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Cr\u00e9er des sites et applications avec un design responsive est devenu essentiel. En effet, de plus en plus d\u2019utilisateurs y acc\u00e8dent en utilisant une\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/figma-responsive-design\/\" \/>\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-04-20T06:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-06T08:13:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/03\/figma-responsive-design.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=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/figma-responsive-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/figma-responsive-design\/\"},\"author\":{\"name\":\"Laura Michaud\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2\"},\"headline\":\"Comment cr\u00e9er des designs responsives sur Figma&nbsp;?\",\"datePublished\":\"2023-04-20T06:30:00+00:00\",\"dateModified\":\"2024-03-06T08:13:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/figma-responsive-design\/\"},\"wordCount\":1717,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/figma-responsive-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/03\/figma-responsive-design.png\",\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/figma-responsive-design\/\",\"url\":\"https:\/\/graphiste.com\/blog\/figma-responsive-design\/\",\"name\":\"Comment cr\u00e9er des designs responsives sur Figma&nbsp;? - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/figma-responsive-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/figma-responsive-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/03\/figma-responsive-design.png\",\"datePublished\":\"2023-04-20T06:30:00+00:00\",\"dateModified\":\"2024-03-06T08:13:17+00:00\",\"description\":\"Cr\u00e9er des sites et applications avec un design responsive est devenu essentiel. En effet, de plus en plus d\u2019utilisateurs y acc\u00e8dent en utilisant une\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/figma-responsive-design\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/figma-responsive-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/figma-responsive-design\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/03\/figma-responsive-design.png\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/03\/figma-responsive-design.png\",\"width\":1024,\"height\":618,\"caption\":\"figma-responsive-design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/figma-responsive-design\/#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 des designs responsives 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 des designs responsives sur Figma&nbsp;? - Graphiste Blog","description":"Cr\u00e9er des sites et applications avec un design responsive est devenu essentiel. En effet, de plus en plus d\u2019utilisateurs y acc\u00e8dent en utilisant une","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\/figma-responsive-design\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment cr\u00e9er des designs responsives sur Figma&nbsp;? - Graphiste Blog","og_description":"Cr\u00e9er des sites et applications avec un design responsive est devenu essentiel. En effet, de plus en plus d\u2019utilisateurs y acc\u00e8dent en utilisant une","og_url":"https:\/\/graphiste.com\/blog\/figma-responsive-design\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2023-04-20T06:30:00+00:00","article_modified_time":"2024-03-06T08:13:17+00:00","og_image":[{"width":1024,"height":618,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/03\/figma-responsive-design.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":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/figma-responsive-design\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/figma-responsive-design\/"},"author":{"name":"Laura Michaud","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2"},"headline":"Comment cr\u00e9er des designs responsives sur Figma&nbsp;?","datePublished":"2023-04-20T06:30:00+00:00","dateModified":"2024-03-06T08:13:17+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/figma-responsive-design\/"},"wordCount":1717,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/figma-responsive-design\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/03\/figma-responsive-design.png","articleSection":["Webdesign"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/figma-responsive-design\/","url":"https:\/\/graphiste.com\/blog\/figma-responsive-design\/","name":"Comment cr\u00e9er des designs responsives sur Figma&nbsp;? - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/figma-responsive-design\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/figma-responsive-design\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/03\/figma-responsive-design.png","datePublished":"2023-04-20T06:30:00+00:00","dateModified":"2024-03-06T08:13:17+00:00","description":"Cr\u00e9er des sites et applications avec un design responsive est devenu essentiel. En effet, de plus en plus d\u2019utilisateurs y acc\u00e8dent en utilisant une","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/figma-responsive-design\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/figma-responsive-design\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/figma-responsive-design\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/03\/figma-responsive-design.png","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2023\/03\/figma-responsive-design.png","width":1024,"height":618,"caption":"figma-responsive-design"},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/figma-responsive-design\/#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 des designs responsives 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\/49500","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=49500"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/49500\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/49502"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=49500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=49500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=49500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}