{"id":288,"date":"2023-03-15T14:30:36","date_gmt":"2023-03-15T14:30:36","guid":{"rendered":"https:\/\/poyesis.fr\/blogs\/?p=288"},"modified":"2025-02-27T23:23:51","modified_gmt":"2025-02-27T23:23:51","slug":"top-10-raccourcis-clavier-figma","status":"publish","type":"post","link":"https:\/\/poyesis.fr\/blogs\/top-10-raccourcis-clavier-figma\/","title":{"rendered":"10 raccourcis clavier Figma \u00e0 conna\u00eetre absolument"},"content":{"rendered":"<p>Souhaitez-vous <a href=\"https:\/\/poyesis.fr\/blog\/3-manieres-creer-site-ecommerce-shopify\/\" target=\"_blank\" rel=\"noopener\">cr\u00e9er un site d\u2019e-commerce<\/a> aux graphismes irr\u00e9sistibles ? Une application web ou mobile offrant une exp\u00e9rience utilisateur qui laissera vos visiteurs sans voix ?<\/p>\n<p>Alors ne cherchez plus : Figma est fait pour vous (et surtout pour votre graphiste web).<\/p>\n<p>Ce logiciel made in USA est une alternative \u00e0 Adobe XD, Photoshop et Sketch de plus en plus pris\u00e9 par les webdesigners.<\/p>\n<p>Si vous souhaitez gagner du temps sur Figma, voici le top 10 des combinaisons de touches \u00e0 conna\u00eetre.<\/p>\n<p><strong>Sommaire<\/strong><\/p>\n<p>Qu\u2019est-ce que Figma et pourquoi vous devez absolument l\u2019utiliser ?<br \/>\n10 raccourcis clavier Figma qui vont vous faire gagner du temps<br \/>\n1 &#8211; Copier un \u00e9l\u00e9ment en tant que PNG<br \/>\n2 &#8211; D\u00e9finir l\u2019opacit\u00e9 d\u2019un \u00e9l\u00e9ment<br \/>\n3 \u2013 Dupliquer des \u00e9l\u00e9ments<br \/>\n4 \u2013 \u00c9tirer un Frame en conservant ses proportions<br \/>\n5 \u2013 Copier le lien de votre canevas<br \/>\n6 \u2013 Naviguer entre les calques et les composants<br \/>\n7 &#8211; Basculer du mode design au mode prototype (et vice-versa)<br \/>\n8 \u2013 Copier \/ Coller le style d\u2019un composant vers un autre<br \/>\n9 \u2013 Exporter des \u00e9l\u00e9ments de votre Canva<br \/>\n10 \u2013 Masquer les curseurs des membres de votre \u00e9quipe<\/p>\n<h2><b>Qu\u2019est-ce que Figma et pourquoi vous devez absolument l\u2019utiliser ?<\/b><\/h2>\n<figure id=\"attachment_291\" aria-describedby=\"caption-attachment-291\" style=\"width: 525px\" class=\"wp-caption aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" class=\"size-large wp-image-291\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/03\/nubelson-fernandes-MuukuDZu3Vs-unsplash-1-819x1024.jpg\" alt=\"designer devant une interface Figma\" width=\"525\" height=\"656\" \/><figcaption id=\"caption-attachment-291\" class=\"wp-caption-text\">webdesigner devant une interface Figma<\/figcaption><\/figure>\n<p>Incontournable des passionn\u00e9s de graphisme web, Figma est un logiciel de conception d\u2019interfaces graphiques et de <a href=\"https:\/\/poyesis.fr\/blog\/les-6-avantages-importants-du-wireframing\/\">wireframes<\/a>.<\/p>\n<p>Mais limiter Figma \u00e0 un logiciel de traitement d\u2019image comme Canva serait une erreur. Voici un aper\u00e7u des fonctionnalit\u00e9s offertes par Figma :<\/p>\n<ul>\n<li aria-level=\"1\">la cr\u00e9ation de prototype et de maquettes graphiques interactives ;<\/li>\n<li aria-level=\"1\">la possibilit\u00e9 de mener des <a href=\"https:\/\/poyesis.fr\/blog\/de-limportance-du-test-utilisateur\/\" target=\"_blank\" rel=\"noopener\">tests utilisateurs<\/a> sur vos diff\u00e9rentes interfaces graphiques via un simple lien ;<\/li>\n<li aria-level=\"1\">la cr\u00e9ation d\u2019un site internet avec un design minimaliste ou non ;<\/li>\n<li aria-level=\"1\">une messagerie collaborative comparable \u00e0 Slack qui concentre vos interactions avec vos \u00e9quipes web sur une seule plateforme.<\/li>\n<\/ul>\n<p>Dernier atout de Figma : la plateforme g\u00e8re automatiquement les versions de vos conceptions graphiques. Par cons\u00e9quent, c\u2019est un incontournable si vous devez<a href=\"https:\/\/poyesis.fr\/blog\/7-conseils-pour-travailler-avec-un-webdesigner\/\" target=\"_blank\" rel=\"noopener\"> travailler avec un webdesigner<\/a> sur une longue p\u00e9riode (ou sur plusieurs projets).<\/p>\n<p>H\u00e9las, vous vous en doutez, prendre en main un outil aussi complexe, surtout si vous n\u2019\u00eates pas un pro du graphisme, risque de s\u2019av\u00e9rer\u2026 compliqu\u00e9.<\/p>\n<p>Raison pour laquelle nous avons dress\u00e9 une liste des 10 raccourcis-claviers \u00e0 conna\u00eetre absolument (et qui vous \u00e9viteront au passage des moments g\u00eanants lors des pr\u00e9sentations Zoom).<\/p>\n<h2><b>10 raccourcis clavier Figma qui vous feront gagner du temps<br \/>\n<\/b><\/h2>\n<figure id=\"attachment_293\" aria-describedby=\"caption-attachment-293\" style=\"width: 525px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-large wp-image-293\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/03\/girl-with-red-hat-Z6SXt1v5tP8-unsplash-681x1024.jpg\" alt=\"Clavier color\u00e9\" width=\"525\" height=\"789\" \/><figcaption id=\"caption-attachment-293\" class=\"wp-caption-text\">Clavier color\u00e9<\/figcaption><\/figure>\n<p>Sans plus tarder, voici les 10 raccourcis clavier Figma indispensables de tout utilisateur de Figma.<\/p>\n<h3><b>1 &#8211; Copier un \u00e9l\u00e9ment en tant que PNG<\/b><\/h3>\n<p><b>Commande :<\/b> Maj + CTRL + C<\/p>\n<p><b>Effet :<\/b> transformer un \u00e9l\u00e9ment en PNG pour le partager facilement sur vos autres plateformes<\/p>\n<p>Un \u00e9l\u00e9ment de votre maquette fil-de-fer a attir\u00e9 votre attention et vous souhaitez le partager ? Figma a pens\u00e9 \u00e0 vous.<\/p>\n<p>S\u00e9lectionnez le calque ou les calques qui vous plaisent, maintenez la touche shift enfonc\u00e9e et appuyez sur la touche CTRL puis sur \u00ab C \u00bb. Tous les \u00e9l\u00e9ments s\u00e9lectionn\u00e9s seront aplatis et convertis en une image PNG.<\/p>\n<p>En prime, Figma chargera imm\u00e9diatement votre nouvelle image dans votre presse-papiers. Vous n\u2019aurez alors plus qu\u2019\u00e0 la copier o\u00f9 vous voulez via un CTRL + V.<\/p>\n<h3><b>2 &#8211; D\u00e9finir l\u2019opacit\u00e9 d\u2019un \u00e9l\u00e9ment<\/b><\/h3>\n<p><b>Commande :<\/b> toutes les touches du pav\u00e9 num\u00e9rique.<\/p>\n<p><b>Effet :<\/b> ajuster l\u2019opacit\u00e9 de l\u2019\u00e9l\u00e9ment s\u00e9lectionn\u00e9.<\/p>\n<p>Souhaitez-vous modifier le degr\u00e9 de transparence d\u2019un calque pour mettre en valeur son arri\u00e8re-plan\u202f? Si c\u2019est votre cas, faites un clic droit sur l\u2019image puis appuyez sur une touche de votre clavier num\u00e9rique.<\/p>\n<ul>\n<li aria-level=\"1\">La touche \u00ab 0 \u00bb d\u00e9finit un niveau d\u2019opacit\u00e9 \u00e0 100 %, parfait pour masquer tout ce qui est derri\u00e8re l\u2019image ;<\/li>\n<li aria-level=\"1\">\u00a0\u00ab 1 \u00bb d\u00e9finit un niveau d\u2019opacit\u00e9 \u00e0 10 % ;<\/li>\n<li aria-level=\"1\">\u00ab 2 \u00bb d\u00e9finit un niveau d\u2019opacit\u00e9 \u00e0 20 %.<\/li>\n<\/ul>\n<p>Vous voyez le principe.<\/p>\n<p>Pour \u00e9diter le degr\u00e9 d\u2019opacit\u00e9 avec des valeurs plus pr\u00e9cises, appuyez sur une touche puis sur une autre. Ainsi, un degr\u00e9 d\u2019opacit\u00e9 \u00e0 56 % n\u00e9cessite que vous appuyiez sur la touche \u201c5\u201d puis sur la touche \u201c6\u201d.<\/p>\n<h3><b>3 \u2013 Dupliquer des \u00e9l\u00e9ments<\/b><\/h3>\n<p><b>Commande : <\/b>CTRL + D<\/p>\n<p><b>Effet :<\/b> dupliquer un \u00e9l\u00e9ment dans la cellule active<\/p>\n<p>Cette commande vous permet de dupliquer un \u00e9l\u00e9ment au sein de la cellule active.<\/p>\n<h3><b>4 \u2013 \u00c9tirer un Frame en conservant ses proportions<\/b><\/h3>\n<h3><img decoding=\"async\" class=\"aligncenter size-large wp-image-296\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/03\/pine-watt-pF3BfaLGhqw-unsplash.jpg\" alt=\"\" width=\"1\" height=\"1\" \/><\/h3>\n<p><b>Commande :<\/b> CTRL + \u00c9tirer (Windows) ou Cmd + \u00c9tirer (macOS)<\/p>\n<p><b>Effet :<\/b> \u00e9tirer un frame sans modifier l\u2019emplacement de ses \u00e9l\u00e9ments<\/p>\n<p>Souhaiteriez-vous voir votre belle mise en forme g\u00e2ch\u00e9e \u00e0 cause d\u2019une r\u00e9solution que vous avez oubli\u00e9e ?<\/p>\n<p>Certainement pas.<\/p>\n<p>Raison pour laquelle dans Figma, tous vos cadres de travail sont soumis \u00e0 des contraintes graphiques. Ce sont elles qui permettent \u00e0 votre image d\u2019\u00eatre responsive design sur iPad, mobile, Smart TV et autres.<\/p>\n<p>Il peut arriver que vous souhaitez redimensionner votre frame sans que ces r\u00e8gles changent l\u2019agencement des \u00e9l\u00e9ments. Heureusement, c\u2019est chose facile sous Figma : utilisez la touche CTRL pendant que vous redimensionnez votre frame.<\/p>\n<h3><b>5 \u2013 Copier le lien de votre canevas<\/b><\/h3>\n<p><b>Commande :<\/b> CTRL + L<\/p>\n<p><b>Effet :<\/b> cr\u00e9er un lien qui redirige imm\u00e9diatement le destinataire vers votre toile<\/p>\n<p>Un \u00e9l\u00e9ment de votre canevas a attir\u00e9 votre attention et vous souhaitez le partager avec vos collaborateurs ?<\/p>\n<p>Dans ce cas, cr\u00e9ez un lien qui redirige vers imm\u00e9diatement vers cet \u00e9l\u00e9ment pr\u00e9cis.<\/p>\n<p>S\u00e9lectionnez le composant ou le canva de votre choix, et effectuez la combinaison de touches CTRL + L et le tour est jou\u00e9.<\/p>\n<p>Une fois que vos destinataires cliqueront sur le lien, votre Canva s\u2019ouvrira dans une nouvelle fen\u00eatre de leur navigateur.<\/p>\n<p>NB :<a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360040035734-Update-Chrome-to-avoid-Networking-Issues\" target=\"_blank\" rel=\"noopener\"> certaines versions de Google Chrome<\/a> peuvent ne pas supporter cette fonction.<\/p>\n<h3><b>6 \u2013 Naviguer entre les calques et les composants<\/b><\/h3>\n<p><b>Commande<\/b> : Touche Alt +1 ou Option + 1 \u2192 Touche Alt + 2 ou Option + 2<\/p>\n<p><b>Effet :<\/b> acc\u00e9der rapidement \u00e0 un composant de votre UI<\/p>\n<p>Parfois, vous serez confront\u00e9 \u00e0 des fichiers .fig ou .sketch constitu\u00e9s d\u2019un enchev\u00eatrement de calques et de layout.<\/p>\n<p>Et vous devrez naviguer entre tous ces calques.<\/p>\n<p>Pour \u00e9viter de verrouiller\/d\u00e9verrouiller un calque par erreur, et provoquer la col\u00e8re de votre graphiste, utilisez les raccourcis list\u00e9s plus haut.<\/p>\n<p>Ils ouvriront un nouvel onglet au sein duquel vous pourrez naviguer entre les diff\u00e9rents calques via les touches de direction. Et si jamais vous craignez d\u2019avoir modifi\u00e9 les propri\u00e9t\u00e9s de verrouillage d\u2019un \u00e9l\u00e9ment, regardez l\u2019ic\u00f4ne de verrouillage dudit \u00e9l\u00e9ment.<\/p>\n<h3><b>7 &#8211;\u00a0 Basculer du mode design au mode prototype (et vice-versa)<\/b><\/h3>\n<figure id=\"attachment_292\" aria-describedby=\"caption-attachment-292\" style=\"width: 525px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-292 size-large\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/03\/daniel-korpai-pKRNxEguRgM-unsplash-819x1024.jpg\" alt=\"Ecran avec mode affichage et code de la page web\" width=\"525\" height=\"656\" \/><figcaption id=\"caption-attachment-292\" class=\"wp-caption-text\">Ecran avec mode affichage et code de la page web<\/figcaption><\/figure>\n<p><b>Commande :<\/b> MAJ + E<\/p>\n<p><b>Effet :<\/b> Alterner entre le mode design et le mode prototype<\/p>\n<p>Si vous <a href=\"https:\/\/poyesis.fr\/blog\/loptimisation-dun-funnel-de-ventes\/\" target=\"_blank\" rel=\"noopener\">souhaitez optimiser votre tunnel de vente<\/a> via un site web ou une application, le mode prototype de Figma est votre meilleur alli\u00e9.<\/p>\n<p>Pour l\u2019activer, vous n\u2019avez qu\u2019\u00e0 utiliser le raccourci clavier MAJ + \u00ab E \u00bb. Imm\u00e9diatement, un menu contextuel contenant les options de prototypage de Figma s\u2019ouvrira au sein de la fen\u00eatre active.<\/p>\n<h3><b>8 \u2013 Copier \/ Coller le style d\u2019un composant vers un autre<\/b><\/h3>\n<p><b>Commande pour macOS :<\/b> Option + Commande + C \u2192 Option + Commande + V<\/p>\n<p><b>Commande pour Windows :<\/b> Ctrl + Maj + C \u2192 Ctrl + Maj + V<\/p>\n<p><b>Effet :<\/b> Appliquer les \u00e9l\u00e9ments de style (couleurs, italique, taille de la police, etc.) d\u2019un \u00e9l\u00e9ment \u00e0 un autre<\/p>\n<p>Si vous avez des pr\u00e9f\u00e9rences pour le style d\u2019un \u00e9l\u00e9ment, que dites-vous de l\u2019utiliser sur un autre ?<\/p>\n<p>Cliquez sur l\u2019\u00e9l\u00e9ment qui vous int\u00e9resse, faites CTRL + MAJ + C et rendez-vous sur la page suivante et faites un CTRL + MAJ + V. Vous verrez alors le style de la page pr\u00e9c\u00e9dente appliqu\u00e9 \u00e0 l\u2019\u00e9l\u00e9ment s\u00e9lectionn\u00e9.<\/p>\n<h3><b>9 \u2013 Exporter des \u00e9l\u00e9ments de votre Canva<\/b><\/h3>\n<p><b>Commande :<\/b> Commande + Maj + E (Mac) ou CTRL + MAJ + E (clavier Windows)<\/p>\n<p><b>Effe<\/b>t : Exporter des ic\u00f4nes et des images<\/p>\n<p>\u00c7a y est !<\/p>\n<p>Vous \u00eates satisfait de la maquette graphique de votre (future) application web ou logiciel.<\/p>\n<p>Maintenant, il ne vous reste plus qu\u2019\u00e0 la partager avec vos d\u00e9veloppeurs web.<\/p>\n<p>Pour cela, rien de plus simple, utilisez le raccourci clavier CTRL + MAJ + E et le tour est jou\u00e9.<\/p>\n<p>Et si jamais vous souhaitez exporter un calque ou un composant sp\u00e9cifique, s\u00e9lectionnez le et ex\u00e9cutez la m\u00eame combinaison.<\/p>\n<h3><b>10 \u2013 Masquer les curseurs des membres de votre \u00e9quipe<\/b><\/h3>\n<p><b>Commande :<\/b> ALT + cmd + \u201c\/\u201d sous mac Os ou CTRL + ALT \u201c\/\u201d sous Windows<\/p>\n<p><b>Effet :<\/b> Masquer les curseurs des autres utilisateurs<\/p>\n<p>Cette fonctionnalit\u00e9 est un must lorsque vous faites du design collaboratif. En effet, voir les curseurs des autres se balader sur son \u00e9cran peut vite devenir aga\u00e7ant.<\/p>\n<p>Ex\u00e9cutez cette commande et il ne restera qu\u2019un seul curseur : le v\u00f4tre.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Souhaitez-vous cr\u00e9er un site d\u2019e-commerce aux graphismes irr\u00e9sistibles ? Une application web ou mobile offrant une exp\u00e9rience utilisateur qui laissera vos visiteurs sans voix ? Alors ne cherchez plus : Figma est fait pour vous (et surtout pour votre graphiste web). Ce logiciel made in USA est une alternative \u00e0 Adobe XD, Photoshop et Sketch [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":289,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":{"format":"standard","override":[{"template":"7","single_blog_custom":"553","parallax":"1","fullscreen":"1","layout":"no-sidebar-narrow","sidebar":"default-sidebar","second_sidebar":"default-sidebar","sticky_sidebar":"1","share_position":"floatbottom","share_float_style":"share-normal","show_share_counter":"1","show_view_counter":"1","show_featured":"1","show_post_meta":"1","show_post_author":"1","show_post_author_image":"1","show_post_date":"1","post_date_format":"default","post_date_format_custom":"Y\/m\/d","show_post_category":"1","post_reading_time_wpm":"300","post_calculate_word_method":"str_word_count","show_zoom_button":"0","zoom_button_out_step":"2","zoom_button_in_step":"3","number_popup_post":"1","show_post_related":"1"}],"image_override":[{"single_post_thumbnail_size":"crop-500","single_post_gallery_size":"crop-500"}],"trending_post_position":"meta","trending_post_label":"Trending","sponsored_post_label":"Sponsored by","disable_ad":"0","subtitle":""},"jnews_primary_category":[],"jnews_override_bookmark_settings":{"override_bookmark_button":"0","override_show_bookmark_button":"0"},"jnews_override_counter":{"view_counter_number":"0","share_counter_number":"0","like_counter_number":"0","dislike_counter_number":"0"},"footnotes":""},"categories":[36,173],"tags":[90,81,91,92,54],"class_list":["post-288","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech","category-webdesign","tag-conception-graphique","tag-developpement-web","tag-figma","tag-maquette-graphique","tag-webdesign"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/posts\/288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/comments?post=288"}],"version-history":[{"count":1,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/posts\/288\/revisions"}],"predecessor-version":[{"id":1241,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/posts\/288\/revisions\/1241"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/media\/289"}],"wp:attachment":[{"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/media?parent=288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/categories?post=288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/tags?post=288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}