10 raccourcis clavier Figma à connaître absolument

Souhaitez-vous créer un site d’e-commerce aux graphismes irrésistibles ? Une application web ou mobile offrant une expérience 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 à Adobe XD, Photoshop et Sketch de plus en plus prisé par les webdesigners.

Si vous souhaitez gagner du temps sur Figma, voici le top 10 des combinaisons de touches à connaître.

Sommaire

Qu’est-ce que Figma et pourquoi vous devez absolument l’utiliser ?
10 raccourcis clavier Figma qui vont vous faire gagner du temps
1 – Copier un élément en tant que PNG
2 – Définir l’opacité d’un élément
3 – Dupliquer des éléments
4 – Étirer un Frame en conservant ses proportions
5 – Copier le lien de votre canevas
6 – Naviguer entre les calques et les composants
7 – Basculer du mode design au mode prototype (et vice-versa)
8 – Copier / Coller le style d’un composant vers un autre
9 – Exporter des éléments de votre Canva
10 – Masquer les curseurs des membres de votre équipe

Qu’est-ce que Figma et pourquoi vous devez absolument l’utiliser ?

Incontournable des passionnés de graphisme web, Figma est un logiciel de conception d’interfaces graphiques et de wireframes.

Mais limiter Figma à un logiciel de traitement d’image comme Canva serait une erreur. Voici un aperçu des fonctionnalités offertes par Figma :

• la création de prototype et de maquettes graphiques interactives ;
• la possibilité de mener des tests utilisateurs sur vos différentes interfaces graphiques via un simple lien ;
• la création d’un site internet avec un design minimaliste ou non ;
• une messagerie collaborative comparable à Slack qui concentre vos interactions avec vos équipes web sur une seule plateforme.

Dernier atout de Figma : la plateforme gère automatiquement les versions de vos conceptions graphiques. Par conséquent, c’est un incontournable si vous devez travailler avec un webdesigner sur une longue période (ou sur plusieurs projets).

Hélas, vous vous en doutez, prendre en main un outil aussi complexe, surtout si vous n’êtes pas un pro du graphisme, risque de s’avérer… compliqué.

Raison pour laquelle nous avons dressé une liste des 10 raccourcis-claviers à connaître absolument (et qui vous éviteront au passage des moments gênants lors des présentations Zoom).

10 raccourcis clavier Figma qui vous feront gagner du temps

Sans plus tarder, voici les 10 raccourcis clavier Figma indispensables de tout utilisateur de Figma.

1 – Copier un élément en tant que PNG

Commande : Maj + CTRL + C

Effet : transformer un élément en PNG pour le partager facilement sur vos autres plateformes

Un élément de votre maquette fil-de-fer a attiré votre attention et vous souhaitez le partager ? Figma a pensé à vous.

Sélectionnez le calque ou les calques qui vous plaisent, maintenez la touche shift enfoncée et appuyez sur la touche CTRL puis sur « C ». Tous les éléments sélectionnés seront aplatis et convertis en une image PNG.

En prime, Figma chargera immédiatement votre nouvelle image dans votre presse-papiers. Vous n’aurez alors plus qu’à la copier où vous voulez via un CTRL + V.

2 – Définir l’opacité d’un élément

Commande : toutes les touches du pavé numérique.

Effet : ajuster l’opacité de l’élément sélectionné.

Souhaitez-vous modifier le degré de transparence d’un calque pour mettre en valeur son arrière-plan ? Si c’est votre cas, faites un clic droit sur l’image puis appuyez sur une touche de votre clavier numérique.

• La touche « 0 » définit un niveau d’opacité à 100 %, parfait pour masquer tout ce qui est derrière l’image ;
•  « 1 » définit un niveau d’opacité à 10 % ;
• « 2 » définit un niveau d’opacité à 20 %.

Vous voyez le principe.

Pour éditer le degré d’opacité avec des valeurs plus précises, appuyez sur une touche puis sur une autre. Ainsi, un degré d’opacité à 56 % nécessite que vous appuyiez sur la touche “5” puis sur la touche “6”.

3 – Dupliquer des éléments

Commande : CTRL + D

Effet : dupliquer un élément dans la cellule active

Cette commande vous permet de dupliquer un élément au sein de la cellule active.

4 – Étirer un Frame en conservant ses proportions

Commande : CTRL + Étirer (Windows) ou Cmd + Étirer (macOS)

Effet : étirer un frame sans modifier l’emplacement de ses éléments

Souhaiteriez-vous voir votre belle mise en forme gâchée à cause d’une résolution que vous avez oubliée ?

Certainement pas.

Raison pour laquelle dans Figma, tous vos cadres de travail sont soumis à des contraintes graphiques. Ce sont elles qui permettent à votre image d’être responsive design sur iPad, mobile, Smart TV et autres.

Il peut arriver que vous souhaitez redimensionner votre frame sans que ces règles changent l’agencement des éléments. Heureusement, c’est chose facile sous Figma : utilisez la touche CTRL pendant que vous redimensionnez votre frame.

5 – Copier le lien de votre canevas

Commande : CTRL + L

Effet : créer un lien qui redirige immédiatement le destinataire vers votre toile

Un élément de votre canevas a attiré votre attention et vous souhaitez le partager avec vos collaborateurs ?

Dans ce cas, créez un lien qui redirige vers immédiatement vers cet élément précis.

Sélectionnez le composant ou le canva de votre choix, et effectuez la combinaison de touches CTRL + L et le tour est joué.

Une fois que vos destinataires cliqueront sur le lien, votre Canva s’ouvrira dans une nouvelle fenêtre de leur navigateur.

NB : certaines versions de Google Chrome peuvent ne pas supporter cette fonction.

6 – Naviguer entre les calques et les composants

Commande : Touche Alt +1 ou Option + 1 → Touche Alt + 2 ou Option + 2

Effet : accéder rapidement à un composant de votre UI

Parfois, vous serez confronté à des fichiers .fig ou .sketch constitués d’un enchevêtrement de calques et de layout.

Et vous devrez naviguer entre tous ces calques.

Pour éviter de verrouiller/déverrouiller un calque par erreur, et provoquer la colère de votre graphiste, utilisez les raccourcis listés plus haut.

Ils ouvriront un nouvel onglet au sein duquel vous pourrez naviguer entre les différents calques via les touches de direction. Et si jamais vous craignez d’avoir modifié les propriétés de verrouillage d’un élément, regardez l’icône de verrouillage dudit élément.

7 –  Basculer du mode design au mode prototype (et vice-versa)

Commande : MAJ + E

Effet : Alterner entre le mode design et le mode prototype

Si vous souhaitez optimiser votre tunnel de vente via un site web ou une application, le mode prototype de Figma est votre meilleur allié.

Pour l’activer, vous n’avez qu’à utiliser le raccourci clavier MAJ + « E ». Immédiatement, un menu contextuel contenant les options de prototypage de Figma s’ouvrira au sein de la fenêtre active.

8 – Copier / Coller le style d’un composant vers un autre

Commande pour macOS : Option + Commande + C → Option + Commande + V

Commande pour Windows : Ctrl + Maj + C → Ctrl + Maj + V

Effet : Appliquer les éléments de style (couleurs, italique, taille de la police, etc.) d’un élément à un autre

Si vous avez des préférences pour le style d’un élément, que dites-vous de l’utiliser sur un autre ?

Cliquez sur l’élément qui vous intéresse, 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écédente appliqué à l’élément sélectionné.

9 – Exporter des éléments de votre Canva

Commande : Commande + Maj + E (Mac) ou CTRL + MAJ + E (clavier Windows)

Effet : Exporter des icônes et des images

Ça y est !

Vous êtes satisfait de la maquette graphique de votre (future) application web ou logiciel.

Maintenant, il ne vous reste plus qu’à la partager avec vos développeurs web.

Pour cela, rien de plus simple, utilisez le raccourci clavier CTRL + MAJ + E et le tour est joué.

Et si jamais vous souhaitez exporter un calque ou un composant spécifique, sélectionnez le et exécutez la même combinaison.

10 – Masquer les curseurs des membres de votre équipe

Commande : ALT + cmd + “/” sous mac Os ou CTRL + ALT “/” sous Windows

Effet : Masquer les curseurs des autres utilisateurs

Cette fonctionnalité est un must lorsque vous faites du design collaboratif. En effet, voir les curseurs des autres se balader sur son écran peut vite devenir agaçant.

Exécutez cette commande et il ne restera qu’un seul curseur : le vôtre.