Conseils Figma pour démarrer votre flux de travail de conception
Dans cet article, examinons de plus près ce que Figma a réellement à offrir. Voici 20 conseils pour travailler plus vite et mieux avec cet outil de conception d'interface bien connu et collaboratif:
J'ai basculé vers Figma il y a près de deux ans et je n'ai aucun regret à ce jour. Dans un de mes précédents articles de blog sur le sujet, j’ai réalisé une analyse en profondeur de Figma et je suis heureux de pouvoir aider d’autres concepteurs à faire la transition. Après deux ans d'utilisation de cet outil, je le connais très bien et j'aimerais maintenant partager avec vous vingt astuces que j'utilise tous les jours et qui m'aident à travailler un peu plus vite et à être plus efficace.
Raccourcis
La plupart des raccourcis sont écrits pour Windows et Mac, où la touche Ctrl sous Windows correspond à la touche Cmd sur Mac et à Alt . utilisé pour Alt (Windows) et Option / Alt (Mac).
Par exemple, Ctrl / Cmd + Alt + C est . Ctrl + Alt + C sous Windows et Cmd + Alt / Option + C sur le Mac.
Note : Cet article est destiné aux designers qui le souhaitent. essayez Figma ou explorez déjà certaines de ses fonctionnalités. Pour tirer le meilleur parti de l’article, il serait bon d’avoir une expérience de Figma Design, mais ce n’est pas nécessaire.
1. Importation simultanée de plusieurs images
Nous utilisons constamment des images et des images dans nos conceptions. Il serait donc très utile de pouvoir modifier plus facilement et plus facilement les images uniques et multiples.
Dans Figma, vous avez la possibilité d'importer plusieurs images (à l'aide du raccourci de Ctrl / Cmd + Shift + K ), puis de les placer une par une dans les calques (objets) dans lesquels vous voulez qu'ils apparaissent. Ceci est très pratique car vous pouvez voir les images importées puis placées en temps réel.
Aperçu rapide de la procédure d'importation de plusieurs images dans Figma ( Grand aperçu )
2. Options de renommage mieux en utilisant la fonction de changement de nom par lot de couches
Parfois (et je veux vraiment dire plusieurs fois !), Nous devons renommer un groupe de couches lorsque nous devons préparer notre conception pour l'exportation (exportation). ou simplement comme un ensemble d’images), ou juste au moment où nous devons effectuer un processus de «nettoyage en profondeur» dans un fichier de dessin.
Dans Figma, vous avez la possibilité de renommer par lots les couches (et cadres) qui est une fonctionnalité très pratique. Vous pouvez renommer le nom complet ou seulement une partie de celui-ci. Vous pouvez également rechercher et renommer un caractère spécifique dans un nom de calque et vous pouvez ajouter un numéro différent à chaque calque qui sera ultérieurement exporté sous forme de fichier séparé. Vous pouvez également effectuer une recherche et un remplacement en tapant simplement dans le champ «Correspondance».
Je trouve cette fonctionnalité extrêmement utile.
Un rapide coup d'œil sur la façon de renommer par lots des couches dans Figma ( Grand aperçu )
Remarque sur les calques: Si vous êtes relativement nouveau dans Figma, la page d'aide suivante Figma apportera des éclaircissements sur les calques, les cadres et les objets. , groupes d'objets, etc.
3. Utilisation d'un Emoji dans le nom de l'image pour afficher son état de travail actuel
Depuis que nous avons commencé à utiliser Figma dans notre équipe de conception, notre flux de travail est plus collaboratif, car nous travaillons généralement sur les mêmes fichiers de conception, et parfois même sur ceux-ci.
Pour savoir quel cadre ou écran est encore en cours et lequel est prêt (variante finale terminée), nous ajoutons un emoji (raccourci Windows: Touche Win + ou touche Win +; / Mac raccourci: Cmd + Ctrl + espace ) devant le nom du cadre pour que tout le monde puisse voir d'un coup d'œil l'état actuel du cadre.
Un exemple d'état emoji en cours J'utilise dans mes projets ( Grand aperçu )
4. Réorganisation des éléments
L’une des grandes caractéristiques de Figma est la possibilité de réorganiser des éléments dans un cadre. Il est très pratique lorsqu'il est utilisé sur des icônes, des listes ou des onglets, comme indiqué ci-dessous:
Présentation rapide de la réorganisation de vos éléments dans Figma ( Grand aperçu ) ] Utilisez des noms propres pour organiser vos styles (textes, couleurs, effets)
Les styles locaux sont l’une des meilleures fonctionnalités de Figma. Il vous permet de créer un système de conception ou des directives pour tous les composants afin de pouvoir les réutiliser facilement. Et si vous modifiez le style principal, il modifie tous les composants qui lui sont liés. Super puissant! Cependant, vous pouvez vous perdre avec tous vos styles si vous ne les nommez pas et ne les catégorisez pas correctement. Je partagerai avec vous la structure de mes styles dans Figma – Continuez la lecture!
5. Dénomination des styles de texte
Vous pouvez organiser vos styles de texte en sous-catégories en ajoutant un “/”. Par exemple, j'ajouterais les mots " Heading " et " / ", de sorte que tous mes titres figurent dans la catégorie " Heading ". Il est plus facile de naviguer lorsque vous avez beaucoup de tailles de polices différentes. Travaux pour Textes et aussi Couleurs .
Ma liste des styles de convention de nommage ( Grand aperçu ) [19659035] Liste des styles de texte nommés dans Figma « /> Ma liste de conventions de nommage des styles de texte ( Image agrandie )
6. Ajout d'une description pour chaque style en tant que guide
Il peut être pratique de savoir où utiliser différents composants en ajoutant une description rapide de la manière d'utiliser le style et où, en particulier lorsque vous avez une équipe de concepteurs. Vous pouvez ajouter une description lors de la modification du style de texte, du style de couleur ou de tout composant.
Comment ajouter une description pour chaque style ( Grand aperçu )
7. Comment changer d'instance depuis la barre latérale
Souvent, nous nous retrouvons avec de nombreux composants, icônes, etc., de sorte que le menu déroulant permettant de changer d'instance n'est probablement pas la meilleure façon de le faire. Le petit truc, c’est que vous pouvez, depuis la barre latérale, faire glisser le composant en maintenant enfoncé Alt + Ctrl / Cmd sur le composant que vous souhaitez activer. Plus facile et plus rapide!
Comment passer instance de la barre latérale ( Grand aperçu )
8. Comment copier / coller toutes les propriétés
Lors de la duplication d'un élément ou lorsque je veux simplement copier le style d'un élément, je peux rapidement copier les propriétés de l'élément ( Ctrl / Cmd + Alt + C ) collez-les ( Ctrl / Cmd + V ) sur un nouvel élément. C'est assez pratique pour les images et les éléments de style ayant plusieurs propriétés, par exemple, un remplissage et un contour, etc.
donne un aperçu de la fonction copier / coller de la propriété ( Grand aperçu )
9. Comment copier / coller une propriété unique
Un autre raccourci que j'ai trouvé très utile est la possibilité de copier une propriété unique – et vous pouvez sélectionner la propriété à copier! Sélectionnez la propriété dans le panneau de droite (comme indiqué dans la vidéo) et avec un simple Ctrl / Cmd + C puis Ctrl / Cmd + V collez-la sur un autre objet. J'ai trouvé cela très utile pour les images.
Vous pouvez sélectionner une seule propriété à copier, comme indiqué dans cette vidéo. ( Grand aperçu )
10. Recherche d'éléments avec les mêmes propriétés, instance, style, etc.
Lorsque vous avez un fichier de dessin complexe ou que vous voulez simplement ranger votre système de dessin, il est assez pratique de pouvoir rechercher des éléments avec le même propriété (une couleur spécifique, par exemple), puis remplacez la couleur par un Style de couleur . Très utile une fois que vous êtes installé dans le système de design et que vous avez besoin de mieux organiser tous les composants!
Le menu ‘Même propriétés’ de Figma vous aide à tout sélectionner. ( Grand aperçu )
11. Utiliser l'outil Echelle pour redimensionner des objets et leurs propriétés
J'ai trouvé utile de pouvoir mettre à l'échelle un élément et ses propriétés (trait, effets appliqués à l'objet, etc.) simultanément. avec l'outil Echelle ( K ). J'ai trouvé Figma un peu plus facile que Sketch à cet égard, car vous n'avez pas à sélectionner la taille de l'objet. Lorsque vous redimensionnez l’objet, ses dimensions et ses propriétés sont redimensionnées proportionnellement. Et en tenant Shift vous conserverez également le ratio tout en agrandissant ou en réduisant l’objet.
Note: Si vous devez modifier la taille d’un objet sans change ses propriétés (contour, effets, etc.), utilisez l'outil Sélectionner pour sélectionner l'objet, puis redimensionnez-le à l'aide du panneau Propriétés. Si vous utilisez l'outil Mise à l'échelle et redimensionnez l'objet, la taille et les propriétés de l'objet seront redimensionnées.
Différence entre le redimensionnement normal et l'outil Mise à l'échelle ( Grand aperçu )
12. Redimensionnement d'un cadre sans redimensionnement des couches qu'il contient
Lorsque vous concevez des résolutions d'écran différentes, vous souhaitez pouvoir redimensionner le cadre de l'écran sans avoir à redimensionner tous les éléments qu'il contient. Pour ce faire, maintenez la touche Ctrl / Cmd pendant que vous effectuez l'opération de redimensionnement. Magic!
Aperçu rapide du redimensionnement du cadre sans redimensionner les calques internes ( Grand aperçu )
13. Créer des graphiques / arc en secondes
Avec Figma, vous pouvez créer des graphes / arc en quelques secondes! Plus de chemins de coupe sur un cercle pour créer un graphique personnalisé. Voici comment créer un arc de chargement – et toutes ces valeurs peuvent être contrôlées avec précision à partir du panneau Propriétés situé à droite.
Présentation rapide de la création de graphiques en quelques secondes ( Grand aperçu )
14. Modifier l’espacement en déplacement
J'aime la fonction de Figma, qui permet de modifier l’espacement pour un groupe d’éléments. Il est très facile de disposer un groupe d’éléments autour de votre écran. J'utilise cette fonctionnalité pour plusieurs éléments, mais également pour des éléments simples.
Aperçu rapide sur la façon de modifier l'espacement entre les objets ( Grand aperçu )
15 . Mots clés des composants pour Easy Search
Lorsque vous commencez à avoir beaucoup de composants, il devient parfois difficile de trouver un composant spécifique dans votre bibliothèque. C’est à ce moment que les mots-clés de composant sont utiles. Vous pouvez ajouter des mots-clés à n’importe quel composant. Ainsi, même si le nom du composant est différent, vous aurez les mots-clés qui vous permettront de le trouver plus facilement. Vous trouverez un exemple ci-dessous:
Ajoutez des mots-clés dans les composants pour faciliter la recherche ( Grand aperçu )
16. Restauration d'une version antérieure d'un fichier de dessin ou partage du lien vers une version antérieure
J'aime la fonctionnalité pour pouvoir revenir à une version précédente du fichier sur lequel je travaille actuellement.
Quelle que soit la raison ( vous avez fait une erreur ou un client vous a demandé de passer à une version antérieure, etc.), il est très pratique de pouvoir revenir à une version précédente. De plus, Figma vous permet également de copier le lien vers la version précédente afin que vous n'ayez pas à supprimer la version la plus récente du fichier. Smart!
Remonter dans le temps dans votre version historique ( Grand aperçu )
17. Bibliothèques de kits d'interface utilisateur pour démarrer vos projets
J'utilise souvent les bibliothèques de kits d'interface utilisateur pour lancer mes projets. Par exemple, j'utilise le kit Wireframy chaque fois que je dois concevoir des structures filaires. Je dois juste activer la bibliothèque et je suis prêt à partir! J'utilise aussi souvent Bootstrap Grid et Figma Redlines . ( Il existe une tonne de ressources gratuites disponibles – vérifiez-les et choisissez ceux dont vous avez besoin.)
L’un des kits d’UI «Wireframy» que j’utilise. ( Grand aperçu )
18. Utiliser les GIF dans les prototypes
Figma vient d'ajouter la possibilité d'ajouter des fichiers GIF à vos prototypes, ajoutant ainsi la possibilité d'ajouter des animations d'interaction utilisateur dans vos prototypes. Voici un aperçu de Aris Acoba:
Un rapide coup d'œil sur la fonction «Rangement» de Figma ( Image agrandie )
20. Afficher les paramètres
Il m'a fallu un peu de temps pour trouver ces paramètres, mais ils sont très utiles lorsque vous savez où ils se trouvent. Vous pouvez configurer votre façon de voir votre lieu de travail dans le menu déroulant «Paramètres» dans le coin supérieur droit de la fenêtre. Vous permettant d'afficher Rulers la Grid activez / désactivez « Aligner sur la grille de pixels » (ce qui est parfois un peu gênant), mais masque également l'autre curseurs des joueurs (concepteurs) lorsque vous voulez vous concentrer un peu et que vous ne voulez pas être distrait par d’autres.
)
21. Conseil bonus: plugins Figma
Figma a récemment lancé sa nouvelle fonction de plug-in qui permettra aux utilisateurs de créer des plug-ins personnalisés adaptés à leurs propres flux de travail.
Je pense que les plugins ajouteront beaucoup de valeur au l’ensemble de l’écosystème Figma et améliorera nos flux de travail de conception. Parmi les meilleurs plugins que j'ai essayés jusqu'à présent, citons:
(mb, yk, il)