Top 11 des raccourcis clavier Figma pour Windows et Mac

Figma a gagné du terrain dans l'espace de conception. Les logiciels d'esquisse dominent principalement l'industrie de la conception UI/UX. Mais les dernières offres de Adobe (Adobe XD) et Figma avec des prix flexibles, un partage transparent et une disponibilité multiplateforme changent l'équation pour les concepteurs UI/UX.

La disponibilité de Figma sur le Web, Windows et macOS, associée à son excellent plan de démarrage (3 projets et 2 éditeurs), en fait un choix idéal pour concevoir, prototyper et maîtriser les compétences en conception d'interface utilisateur. La société a récemment introduit le support très attendu des plugins pour cela. Si vous débutez dans l'espace de conception UI/UX et que vous commencez votre aventure avec Figma, vous voudrez peut-être mémoriser un tas de raccourcis clavier Figma essentiels pour Windows et Mac.

Dans cet article, nous couvrirons onze meilleurs raccourcis clavier Figma que vous pouvez utiliser sur un PC Windows et un Mac. Commençons.

Visitez Figma

1. Capacités de zoom maître

Vous ne pouvez pas utiliser Figma ou tout autre logiciel de conception UI/UX sans maîtriser les raccourcis clavier de Zoom. Ce seront les raccourcis clavier les plus utilisés au cours de votre flux de travail.

Pour Windows et Mac, vous pouvez utiliser Shift + 1 pour adapter les calques à l'écran. Maj + 2 pour zoomer dans le cadre sélectionné (mon raccourci clavier le plus utilisé car il me permet de visualiser rapidement les détails du composant sélectionné), et Maj + 0 pour zoomer à 100 %.

2. Afficher/Masquer les règles et Afficher/Masquer les grilles de mise en page

Je n'utilise généralement pas les règles dans Figma, mais si vous prévoyez de les utiliser lors de la conception de l'interface utilisateur, vous pouvez utiliser le raccourci clavier Shift + R sur PC ou Mac pour afficher/masquer les règles.

J'utilise les grilles de mise en page tout le temps. Il vous permet d'organiser les composants, les icônes avec la même distance, vous permet d'organiser le texte et d'autres éléments. Utilisez le raccourci clavier Ctrl + G sur Mac pour afficher/masquer les grilles de mise en page.

Aussi sur Guiding Tech

3. Outil stylo, déplacement et texte

Figma propose un outil Stylo puissant et personnalisable. Vous obtiendrez ce que je veux dire après avoir joué avec pendant quelques minutes. Au cours de votre workflow de conception, vous utiliserez beaucoup ces trois outils.

Vous pouvez toujours les choisir dans le menu du haut ou utiliser la touche P pour Pen, V pour Déplacer et T pour Texte sous Windows et Mac.

4. Se déplacer entre les calques et les composants

Ces deux raccourcis clavier sont très pratiques lorsque vous travaillez sur un projet de conception avec trop de couches et de composants. Vous devrez peut-être vous déplacer constamment entre eux. Vous pouvez utiliser Option + 1 pour Mac ou Alt + 1 pour Windows pour accéder au panneau des calques. Utilisez ensuite Option + 2 pour Mac ou Alt + 2 pour Windows pour accéder au menu Composants.

5. Ouvrir le sélecteur de couleurs

Cette fonction est utile lorsque vous souhaitez extraire la couleur d'une image ou d'une icône ou de tout autre composant. Vous pouvez utiliser le raccourci clavier « I » sur Mac ou Windows pour ouvrir le sélecteur de couleurs. Passez le sélecteur de couleurs sur une image ou une icône et copiez le code de couleur à partir du pipette à couleurs menu.

6. Copier/Coller le style actuel

Celui-ci est un vrai gain de temps. Vous voulez copier rapidement la couleur/le design actuel d'un composant vers un autre texte ou icône? Vous pouvez sélectionner l'élément actuel et utiliser Option + Commande + C pour Mac ou Ctrl + Maj + C pour Windows pour copier son style. Sélectionnez maintenant l'autre élément et utilisez Option + Commande + V pour Mac ou Ctrl + Maj + V pour Windows pour coller le style.

7. Grouper/Dissocier la sélection

Le regroupement et le dégroupage sont l'une des parties les plus importantes de tout logiciel de conception. Après avoir ajouté des formes, des icônes, du texte, vous souhaiterez peut-être les regrouper pour les déplacer ou les modifier facilement. Vous pouvez sélectionner les éléments et utiliser Commande + G pour Mac ou Ctrl + G pour Windows pour créer un groupe.

Pour les dissocier, utilisez la commande + Shift + G pour Mac ou Ctrl + Shift + G pour Windows.

Aussi sur Guiding Tech

8. Basculer le verrouillage et le déverrouillage

Lorsque vous créez un design avec trop de couches et composants, le canevas Figma peut devenir très chargé pour vous. Dans ces scénarios, vous ne voudrez pas déplacer accidentellement une icône, du texte ou un composant. Dans de tels cas, vous pouvez sélectionner l'élément et utiliser Commande + Maj + L pour Mac ou Ctrl + Maj + L pour Windows pour les verrouiller.

Il est représenté par une petite icône de verrouillage dans le menu Calques. Pour déverrouiller, utilisez le même raccourci clavier.

9. Créer des composants

Les composants sont le cœur et l'âme de l'expérience Figma. Vous souhaiterez peut-être réutiliser les mêmes éléments dans toute l'interface utilisateur de conception. Certains exemples peuvent être un menu hamburger, un menu de la barre inférieure, des boutons, etc., que vous souhaitez également réutiliser pour d'autres écrans.

Vous pouvez regrouper les icônes et le texte à l'aide de l'outil Groupe, puis utiliser Option + Commande + K pour Mac ou Ctrl + Alt + K pour Windows pour créer un composant. Maintenant, accédez-y à partir du menu Composants (contrôle n°4).

10. Afficher la bibliothèque de l'équipe

Savez-vous que Figma est également appelé le Google Docs de l'industrie du design? Le logiciel est livré avec des options de partage transparentes qui vous permettent d'ajouter des éditeurs à l'équipe.

Pour les grands projets, chaque membre de l'équipe se voit confier une tâche distincte pour la conception. Lors de la création de la conception dans un groupe, vous souhaiterez peut-être visiter la bibliothèque de l'équipe, qui se compose de composants et d'icônes communs aux membres. Vous pouvez ouvrir le menu en utilisant Commande + Option + O sur Mac ou Ctrl + Alt + O sur Windows pour ouvrir le menu de la bibliothèque d'équipe.

11. Exporter la conception

Une fois la conception terminée, vous souhaiterez peut-être utiliser l'option d'exportation pour extraire des icônes et des images de la conception afin de pouvoir les envoyer aux développeurs pour qu'ils les implémentent. Vous pouvez sélectionner le calque et utiliser Commande + Maj + E pour Mac ou Contrôle + Maj + E pour Windows pour exporter les détails.

Aussi sur Guiding Tech

Utilisez Figma comme un pro

Figma est un excellent outil pour les concepteurs UI/UX. C'est gratuit pour les débutants, permet le partage et est livré avec des tonnes de raccourcis clavier pour permettre un flux de travail fluide. Implémentez ces raccourcis clavier dans votre flux de travail et créez de superbes conceptions d'interface utilisateur comme un pro.