Les outils de conception sont essentiels pour améliorer l'apparence de tout produit web. Cependant, la plupart de ces outils sont des logiciels si gourmands en ressources qu'ils exigent des performances élevées de l'appareil de l'utilisateur et consomment une grande partie de la mémoire vive. De plus, l'accès à toutes leurs fonctionnalités est souvent conditionné par l'achat de versions premium onéreuses. Pour pallier ces problèmes, les développeurs ont besoin de logiciels légers et abordables, compatibles avec les appareils aux performances moyennes.
Introduction
Figma est une solution très pratique qui répond à tous les besoins des développeurs. Cet outil de conception gratuit, basé sur un navigateur, gagne en popularité auprès des développeurs. Il offre une expérience utilisateur très fluide grâce à ses fonctionnalités à la fois performantes et intuitives.
Nous allons ici aborder un guide complet pour utiliser Figma et exploiter pleinement ses fonctionnalités.
Auparavant, les concepteurs et les développeurs devaient communiquer uniquement par courriel. Ce processus fastidieux impliquait de nombreuses pièces jointes et leur gestion s'avérait particulièrement pénible. Puis, de nombreux outils modernes ont fait leur apparition, simplifiant considérablement le travail des concepteurs et des développeurs. Cependant, la synchronisation des fichiers de projet entre les différents outils restait un défi majeur. Un processus beaucoup plus efficace était donc toujours nécessaire.
Puis est arrivé Figma, avec son interface intuitive. Étant un outil basé sur un navigateur, il est accessible à tous, quel que soit leur système d'exploitation. Les utilisateurs n'ont plus besoin d'installer de programmes inutiles pour utiliser l'outil de conception. De plus, étant un outil cloud, Figma offre toujours la dernière version des créations à chaque utilisateur. La collaboration et la communication sont également grandement facilitées grâce à cet outil.
Figma propose également ses services sous forme d'application de bureau pour Windows et macOS. Cette application est multiplateforme, à l'instar de Slack et Visual Studio Code. Bien que les deux versions offrent des fonctionnalités quasi identiques, l'application de bureau prend en charge nativement l'utilisation des polices locales, contrairement à la version web qui nécessite l'installation de Figma Font Helper.
Pour offrir un espace de travail bien organisé, Figma propose une interface divisée en trois parties principales : une grande zone de travail centrale, une barre latérale à gauche et une barre d'outils à droite. La zone de travail centrale permet de visualiser tous les éléments graphiques. La barre latérale gauche contient les ressources, les calques et les pages du fichier. Enfin, la barre d'outils droite regroupe toutes les informations relatives aux éléments du fichier.
Un fichier Figma se compose généralement de plusieurs pages, chacune comportant un canevas. Les graphistes utilisent ces pages pour organiser les différentes parties du fichier. Par conséquent, tout nouvel utilisateur de Figma devrait se familiariser avec ces différentes pages afin de travailler de manière plus organisée.
Navigation dans Figma
- Maintenir la touche Ctrl/Cmd enfoncée et faire défiler vers le haut/bas ou appuyer sur les touches + et – vous permettra de zoomer ou de dézoomer.
- Maintenir la barre d'espace enfoncée et faire glisser la souris permet de faire défiler horizontalement la zone de dessin.
Il existe de nombreux autres raccourcis pratiques pour optimiser votre utilisation de Figma. Mais inutile de tous les mémoriser : vous pouvez les consulter en appuyant sur Ctrl/Cmd + Maj + ?
Sélection des styles de projet
Dans la barre latérale droite, vous pouvez sélectionner les couleurs, la typographie, les grilles et autres styles de votre mise en page. Pour annuler votre sélection, cliquez n'importe où dans la zone de travail ou appuyez sur la touche Échap. Pour consulter les informations relatives au style d'un élément, cliquez sur l'icône d'édition située à côté.
Lire : Comment migrer de Drupal vers WordPress : Guide complet
Sélectionner les éléments de style
Vous pouvez sélectionner un calque spécifique en maintenant la touche Commande enfoncée tout en cliquant, ou en cliquant avec le bouton droit sur l'élément pour ouvrir le menu de tous les calques imbriqués et sélectionner celui souhaité.
Après avoir sélectionné un élément, ses informations CSS sont disponibles dans l'onglet « Code » de la barre latérale droite. Cependant, ce code CSS est généré automatiquement et ne doit pas être copié-collé dans votre projet principal.
Quelques étapes plus importantes
- Maintenir la touche « Alt » enfoncée et survoler un élément avec la souris permet de mesurer les espaces entre les éléments et de les positionner correctement.
- Pour exporter une ressource, vous devez la marquer comme exportable. Vous pouvez ensuite utiliser le raccourci Maj + Cmd / Ctrl + E pour exporter toutes les ressources marquées pour l'exportation.
- Vous pouvez utiliser l'onglet « Prototype » dans la barre latérale droite pour consulter les informations relatives à chaque animation.
- Cliquer sur l'icône de bulle de chat dans la barre d'outils supérieure ou appuyer sur la touche « C » vous permettra d'accéder à l'interface de commentaires et de rédiger un commentaire sur n'importe quel élément en cliquant n'importe où dans le design.
Voici un guide succinct des principales étapes à suivre pour une utilisation optimale de Figma. Chez Seahawk Media , nous mettons tout en œuvre pour vous fournir les informations les plus pertinentes et faciliter ainsi son utilisation. Pour bénéficier de nos services , n'hésitez pas à nous contacter . Consultez également notre blog pour en savoir plus sur nos produits web.
