Article original : What is Figma? A Design Crash Course
Figma est un outil de conception puissant qui vous aide à créer n'importe quoi : sites web, applications, logos, et bien plus encore.
En apprenant à utiliser Figma, vous ferez vos premiers pas dans la conception d'interface utilisateur et l'expérience utilisateur. Ces compétences sont essentielles pour construire un portfolio solide pour vous-même et potentiellement pour votre propre entreprise.
Dans ce cours accéléré sur Figma, j'utiliserai un projet de site web réel de Frontend Mentor que nous recréerons dans Figma. Apprendre en construisant un projet est un excellent moyen de consolider vos connaissances, donc je vous recommande de télécharger les ressources et de suivre le cours.
Je diviserai ce cours accéléré en plusieurs parties alors que nous explorerons différentes fonctionnalités de Figma, notamment :
Configuration du compte
Fichier de conception
Ressources de conception
Comment commencer – les bases
Cadres
Grilles de colonnes et de lignes
Formes
Importer des images
Étiquetage et regroupement
Texte
Barre de navigation
Conception de boutons
Titre d'en-tête et mise à l'échelle
Paramètres de texte supplémentaires
Section héroïque et calques Figma
Groupes et sections
Polices et couleurs Figma
Hauteur de ligne et espacement du texte
Alignement et magnétisme
Masquage avec formes et images
Copie de groupes et de sections
Mise à jour des sections
Sélecteur de couleurs et copie de sections (suite)
Sélection de couleurs et choix de la teinte correcte
Section de témoignages
Disposition automatique
Options de disposition automatique
Alignement de la disposition automatique
Contenu de la disposition automatique
Images de galerie
Redimensionnement des images
Pied de page
Modifications de couleur SVG et de superposition
Menu de pied de page avec disposition automatique
Barre d'outils des calques, masquer et verrouiller
Visionneuse de prototype
Cadres et pages
Interactions de prototype
Navigation des interactions de prototype vers la page
Partager, tester et prévisualiser les prototypes
Exporter des pages
Exporter des groupes ou des sections
Dans cet article, je vous donnerai un bref aperçu de certaines des principales parties du cours afin que vous puissiez commencer à concevoir dans Figma.
Introduction
Commençons par créer un compte sur le site web de Figma. Vous pouvez le faire ici : Figma.com.
Inscrivez-vous simplement avec un nouveau compte (e-mail ou connexion Google) – c'est complètement gratuit.
Ensuite, nous devons obtenir les ressources de conception à utiliser pour ce projet, que nous récupérerons depuis Frontend Mentor. Vous pouvez les télécharger ici :
Nous allons construire notre première page de brouillon. Jetez un coup d'œil à la disposition de conception par défaut avec laquelle nous allons travailler ci-dessous. Sélectionnez le signe +, ou sur le côté droit, créez une nouvelle page de conception.
Comment créer un cadre dans Figma
Tout d'abord, nous allons créer un cadre. C'est la même chose qu'une page, et c'est là que notre conception vivra. Vous pouvez dimensionner un cadre comme vous le souhaitez en fonction de vos besoins.
Cet exemple sera un site web, donc nous sélectionnerons le cadre Desktop – mais vous pouvez également créer des cadres pour des applications mobiles, ou même des cadres personnalisés.
Sélectionnez l'outil Cadre dans le menu supérieur
Sélectionnez la taille du cadre dans le panneau de droite
Comment ajouter des grilles et des colonnes dans Figma
Avant de commencer la conception, vous voudrez ajouter des grilles qui vous aident à garder l'alignement du contenu de votre page cohérent.
Vous pouvez ajouter des grilles à un cadre et les personnaliser. Par exemple, je préfère souvent 12 grilles car c'est la valeur par défaut pour le développement web.
Sélectionnez le cadre auquel vous souhaitez ajouter une grille
Sélectionnez Layout Grid dans le panneau de droite
Sélectionnez Colonnes et 12 unités
Comment utiliser les formes dans Figma
Utilisez les formes et les éléments dans Figma pour créer des carrés, des cercles, des lignes, et bien plus encore. Ce sont les bases pour créer une conception sur une page.
Je vais commencer par un simple rectangle que nous utiliserons pour créer notre section de navigation héroïque pour la partie supérieure de cette page d'accueil.
Sélectionnez l'outil Forme Carré
Créez un carré
Commencez à le façonner et à le dimensionner
Comment ajouter des images dans Figma
Vous pouvez ajouter des images depuis une source en ligne ou localement à votre page. Les images sont une partie importante de la conception d'un site web, surtout pour la section héroïque.
Ajoutons un logo comme première image que nous ajouterons en haut à gauche de l'écran.
Glissez-déposez une image depuis votre ordinateur local
Importez une image depuis l'option de téléchargement d'image des formes
Redimensionnez et placez l'image sur la conception
Comment ajouter du texte à une conception dans Figma
Pour ajouter du texte à une conception, sélectionnez l'outil texte et placez-le sur la page. La police sera par défaut Roboto, mais vous pouvez changer la famille de police, la taille et la couleur à tout moment.
Dans cet exemple, nous utiliserons le panneau de droite pour changer la couleur et la taille de la police, et plus tard la famille de police également.
Sélectionnez l'outil Texte
Ajoutez le texte "À propos" comme début de la navigation
Assurez-vous que la taille et la couleur sont 24 et blanc
Comment étiqueter les éléments et créer des groupes dans Figma
Travailler avec de nombreuses couches dans Figma peut devenir confus, donc étiquetez tous vos éléments dès que vous les créez. Encore mieux, regroupez différentes sections et formes avec des étiquettes telles que "Arrière-plan du héros" ou "Barre de navigation".
Sélectionnez vos élément(s) et faites un clic droit pour regrouper ou appuyez sur Ctrl + G
Nommez votre groupe
Placez les groupes à l'intérieur des groupes pour chaque section de votre page afin d'améliorer la lisibilité une fois que votre page devient grande
Conclusion
Figma est simple à utiliser, mais il y a beaucoup à apprendre pour l'utiliser à son plein potentiel. Avec les bases des formes, des images et du texte, vous pouvez facilement commencer à prototyper un site web, concevoir une application mobile, et bien plus encore.
Si vous souhaitez approfondir ces bases, je vous recommande de regarder et de suivre le cours accéléré vidéo complet qui examine chaque aspect plus en détail.
Vous pouvez consulter les résultats complets de la conception ci-dessous :
Ce processus fait partie de ce que j'essaie d'enseigner sur ma propre chaîne et fait également partie d'un cours/livre que j'écris sur la conception appelé Enhance UI. Le but est d'aider les développeurs à comprendre les fondamentaux de la conception. Consultez mon livre Enhance UI ci-dessous :
J'espère que vous avez apprécié cet article. Si vous ne savez pas qui je suis, je suis Adrian, d'Australie. J'ai une petite chaîne sur Twitter et YouTube, donc si vous voulez en savoir plus sur moi ou apprécier mon contenu, consultez-les un jour. 😉
YouTube : https://youtube.com/adriantwarog
Twitter : https://twitter.com/adrian_twarog