Comment installer et utiliser Figma sur PC ?

Que permet de faire Figma ?

Figma permet de concevoir des interfaces utilisateur, de créer des prototypes interactifs, de collaborer en temps réel avec d'autres membres d'une équipe, de gérer des bibliothèques de composants réutilisables, et de faciliter la transmission des designs aux développeurs. Il est largement utilisé pour la conception d'applications mobiles, de sites web et d'autres produits numériques.

Comment le télécharger ?

Rendez-vous sur la page dédiée à Figma sur la logithèque

Comment installer et utiliser Figma ?

Figma peut être utilisé directement dans un navigateur web, mais il propose également une application de bureau pour Windows et macOS, offrant une expérience plus native et des fonctionnalités hors ligne.

Installation de l'application de bureau Figma sur PC (Windows) :

1. Télécharger le fichier d'installation :
2. Lancer l'installation : Une fois le téléchargement terminé, localisez le fichier d'installation dans votre dossier de téléchargements et double-cliquez dessus pour lancer le processus d'installation.
3. Suivre les instructions : L'installateur vous guidera à travers les étapes nécessaires. Il est possible que vous deviez déplacer l'icône Figma de votre dossier de téléchargements vers votre dossier d'applications, selon votre système d'exploitation.
4. Lancer l'application : Une fois l'installation terminée, ouvrez l'application Figma. Vous serez invité à vous connecter ou à créer un compte. Si vous êtes déjà connecté via le navigateur, l'application peut se synchroniser automatiquement.

Utilisation de l'interface de Figma :

L'interface de Figma est généralement divisée en plusieurs zones principales :

• Barre d'outils supérieure : Contient les outils principaux de sélection, de déplacement, de création de formes (rectangles, lignes, ellipses, etc.), d'outils de texte, et d'autres fonctionnalités.
• Barre latérale gauche : Affiche la hiérarchie de votre projet, y compris les pages, les cadres (frames) et les calques.
• Zone de travail centrale (Canvas) : C'est ici que vous créez et manipulez vos designs.
• Barre latérale droite : Affiche les propriétés et les options de configuration de l'élément sélectionné, comme les dimensions, la couleur, la typographie, les effets, et les options d'auto-layout.

Fonctionnalités principales et leur utilisation :

• Frames (Cadres) : Ce sont les conteneurs principaux pour vos designs, représentant les écrans d'une application ou d'un site web.
  • Utilisation : Sélectionnez l'outil "Frame" dans la barre d'outils supérieure et choisissez un préréglage (comme MacBook Pro, iPhone) ou dessinez une frame personnalisée dans la zone de travail. Vous pouvez ajuster ses dimensions et sa position dans la barre latérale droite.
• Outils de forme et de dessin vectoriel : Figma est basé sur des graphiques vectoriels, ce qui permet de créer des designs évolutifs.
  • Utilisation : Utilisez les outils de forme (Rectangle, Ligne, Ellipse, etc.) dans la barre d'outils supérieure. Pour des formes plus complexes, l'outil "Plume" (Pen tool) permet de créer des tracés personnalisés.
• Texte : Ajoutez du texte à vos designs.
  • Utilisation : Sélectionnez l'outil "Texte" (T) dans la barre d'outils. Cliquez sur la zone de travail pour commencer à taper, ou cliquez et faites glisser pour créer une zone de texte. Les options de formatage (police, taille, couleur, espacement) se trouvent dans la barre latérale droite.
• Composants : Créez des éléments réutilisables (boutons, icônes, cartes) pour maintenir la cohérence de votre design.
  • Utilisation : Créez un élément, puis cliquez sur l'icône "Create Component" (ou utilisez le raccourci clavier) dans la barre d'outils supérieure. Les instances de ce composant peuvent ensuite être utilisées dans tout votre projet. Les modifications apportées au composant maître se répercutent sur toutes ses instances.
• Auto Layout : Permet de créer des mises en page flexibles qui s'adaptent automatiquement lorsque le contenu change.
  • Utilisation : Sélectionnez un groupe d'éléments ou une frame, puis activez "Auto Layout" dans la barre latérale droite. Vous pouvez définir l'espacement, l'alignement et la direction des éléments.
• Prototypage : Transformez vos maquettes statiques en prototypes interactifs.
  • Utilisation : Passez en mode "Prototype" (souvent en haut à droite de la barre latérale droite). Sélectionnez un élément (par exemple, un bouton) et créez des interactions en le reliant à une autre frame (par exemple, une autre page de l'application). Vous pouvez définir les déclencheurs (clic, survol) et les animations.
• Collaboration en temps réel : Plusieurs utilisateurs peuvent travailler sur le même fichier simultanément.
  • Utilisation : Les modifications apportées par les collaborateurs sont visibles en temps réel. Vous pouvez également laisser des commentaires directement sur le design pour fournir du feedback.
• Plugins : Étendez les fonctionnalités de Figma avec des extensions créées par la communauté.
  • Utilisation : Accédez au panneau "Plugins" (souvent via la barre latérale gauche ou un menu dédié) pour rechercher et installer des plugins qui peuvent automatiser des tâches, ajouter des données fictives, optimiser votre flux de travail, etc..
• Styles (Couleur, Typographie, Effets) : Créez et appliquez des styles réutilisables pour garantir la cohérence visuelle.
  • Utilisation : Dans la barre latérale droite, lorsque vous modifiez une couleur, une typographie ou un effet, vous verrez une option pour créer un nouveau style. Ces styles peuvent ensuite être appliqués facilement à d'autres éléments.

Configuration :

La plupart des configurations se font dans la barre latérale droite. Vous pouvez ajuster :

• Dimensions et positionnement : Pour les frames et les éléments individuels.
• Remplissage et contour : Couleurs, épaisseurs et styles des bordures.
• Fonds : Couleurs, dégradés ou images pour les frames.
• Effets : Ombres portées, flous.
• Texte : Polices, tailles, poids, alignement, interlettrage.
• Grilles et Layout Grids : Pour structurer votre espace de travail et aligner les éléments.

Télécharger Figma gratuitement