Guide de la Figma pour les débutants

Dans Figma, vous pouvez concevoir des éléments d'interface, créer des sites web interactifs et des prototypes d'applications, créer des illustrations et travailler avec des graphiques vectoriels. De nombreux concepteurs l'utilisent également pour créer des mises en page de sites web pour Tilda.

• Interface pour applications mobiles-FigmaiOS UI kit.
• Prototype du panneau de commande de la Tesla Model 3 et de ses éléments d'interface.

Par exemple, les chefs de projet et les entrepreneurs peuvent utiliser des modèles de diagramme de Gantt pour la planification, ou créer des publicités pour les médias sociaux à l'aide de préréglages pour Facebook et d'autres plateformes.

• Multiplateforme

• Basé sur l'informatique en nuage

• Retour d'information intégré

Toute personne y ayant accès peut commenter une mise en page et obtenir un retour d'information directement sur la conception. Cela permet d'accélérer le processus d'approbation et d'éviter que des notes importantes ne soient noyées dans des fils de discussion.

Après vous être inscrit, vous verrez deux espaces de travail principaux :

1. Le gestionnaire de fichiers, où vous pouvez créer des projets et ajuster les paramètres de votre profil.
2. L'éditeur graphique lui-même.

Figma Community est une fonction relativement nouvelle qui fonctionne comme une plateforme de médias sociaux au sein de l'outil principal. Elle permet aux utilisateurs de partager et de découvrir des ressources de conception telles que des modèles, des kits d'interface utilisateur et des plugins. Pour y accéder, cliquez sur l'icône du globe.

Les plugins sont essentiellement des outils tiers et des extensions qui élargissent les fonctionnalités de Figma. Ils permettent d'accélérer les flux de travail, d'améliorer l'efficacité et de fournir des fonctionnalités supplémentaires telles que des bibliothèques d'images, des icônes, etc.

Par exemple, si vous installez le plugin Unsplash, vous pourrez insérer des images de stock sans quitter Figma, tandis qu'Iconify vous donne accès à plus de 40 000 icônes vectorielles.

Les utilisateurs peuvent développer et ajouter eux-mêmes des plugins, adaptant ainsi les fonctionnalités de Figma à leurs besoins spécifiques.

Depuis que Figma a introduit Figma Community, les plugins font partie de cette interface. Tu peux y trouver et parcourir tous les plugins disponibles.

Une fois que vous avez connecté les plugins souhaités, ils sont accessibles via la barre d'outils inférieure, dans l'onglet Plugins et widgets.

L'écran d'un nouveau fichier contient trois zones principales : Le canevas, la barre d'outils et deux barres latérales. La barre latérale gauche contient le panneau des calques. Voici quelques éléments clés de l'interface :

Par défaut, toutes les formes nouvellement ajoutées sont colorées en gris. Pour modifier la couleur, sélectionnez "Choisir la couleur" dans le menu déroulant Édition. Cela ouvrira le sélecteur de couleurs, qui vous permet de choisir une nouvelle couleur en identifiant toute couleur déjà utilisée sur le canevas.

L'option "Sélectionner tout avec..." met en évidence tous les éléments partageant les mêmes propriétés, le même remplissage, les mêmes polices ou les mêmes effets, ce qui facilite les modifications par lots.

Ce menu vous aide à configurer le canevas, ce qui facilite la navigation dans la mise en page. Vous pouvez activer la grille de pixels, afficher les règles, effectuer un zoom avant ou arrière, etc.

Pour optimiser l'espace de travail, vous pouvez masquer le panneau des calques et l'interface à l'aide des options correspondantes.

Les objets placés sur le cadre sont répertoriés en tant que "couches" sur la gauche. Vous pouvez également regrouper des objets (par exemple, en plaçant un numéro de téléphone et une adresse électronique dans le pied de page). Alignez les éléments à l'intérieur du cadre à l'aide du panneau de droite ou regroupez-les à l'aide de la commande Objet → Sélection de groupe(Ctrl/Cmd + G).

Définissez le nombre de colonnes, réglez la transparence de leur couleur et personnalisez la largeur de la gouttière. Vous pouvez également choisir le type de grille : affichage sous forme de grille, de colonnes ou de lignes.

• Utilisez les paramètres situés en haut du panneau Propriétés pour déplacer et mettre à l'échelle les objets sur les axes X et Y.
• Utilisez le paramètre Rayon d'angle sous "Apparence" pour arrondir les angles d'une forme, par exemple pour que les bords supérieurs d'un rectangle ressemblent à un signet. Par défaut, le rayon s'applique à tous les coins. Pour arrondir uniquement certains coins, cliquez sur le paramètre Coins individuels en regard des champs de valeur.

• Pour régler l'épaisseur du trait, utilisez le paramètre "Trait" - entrez une valeur ou faites glisser le curseur. Pour masquer le remplissage, cliquez sur l'icône de l'œil ou du moins sous "Remplissage".

• Pour que le rectangle ressemble à un drapeau, prolongez son bord inférieur. Double-cliquez sur la forme pour modifier ses points.

• "L'outil de courbure vous permet d'adoucir les angles ou les courbes.
• Le "seau à peinture" permet de remplir un chemin fermé.

• Remplissage: l'image est mise à l'échelle pour couvrir complètement le cadre, en veillant à ce qu'il ne reste aucun espace vide. Si le rapport hauteur/largeur de l'image diffère de celui du cadre, des parties de l'image peuvent être recadrées pour maintenir une couverture complète.

• Ajuster: Affiche l'intégralité de l'image dans le cadre, en préservant son rapport hauteur/largeur d'origine. Il peut en résulter un espace vide (remplissage) si l'image et le cadre ont des proportions différentes.

• Recadrage: permet d'ajuster manuellement la partie de l'image visible dans le cadre. Vous pouvez repositionner et redimensionner l'image pour vous concentrer sur une zone spécifique, en coupant le reste. Les zones recadrées sont masquées mais non supprimées, ce qui permet une édition non destructive.

• Carreau: Répète l'image sous forme de motif.

Les paramètres disponibles vous permettent également d'effectuer des corrections sur l'image - réglage de la luminosité, du contraste, de la saturation, etc. ou même d'éditer une partie spécifique de la photo.

1. Placez un calque de forme sous le calque de photo.
2. Sélectionnez les deux couches.
3. Allez dans Objet → Utiliser comme masque (raccourci : Ctrl + Alt + M sous Windows, ou Cmd + Opt + M sous macOS).

Figma permet d'importer des fichiers SVG. Vous pouvez les faire glisser depuis votre ordinateur ou les copier-coller directement depuis Illustrator ou Fresco. Ces fichiers s'affichent souvent sous forme de cadres. Dans le panneau Calques, vous pouvez grouper des objets vectoriels en appuyant sur Ctrl + G (Windows) ou Cmd + G (macOS) et les déplacer au-dessus du calque du cadre.

• Solide : le type de remplissage par défaut, qui applique une seule couleur à l'objet.
• Linéaire : Crée un dégradé le long d'une ligne droite entre deux points.
• Radial : Génère un gradient circulaire rayonnant à partir d'un point central.
• Angulaire : Applique un dégradé qui tourne autour d'un point central, créant ainsi un effet de tarte.
• Diamant : Produit un dégradé en forme de diamant, rayonnant à partir du centre.
• Image : Remplit l'objet d'une image (ou d'une vidéo).

En modifiant les positions des extrémités du dégradé, vous pouvez contrôler la direction et l'intensité de la transition de couleur.

Pour plus de créativité, essayez de superposer des formes et d'appliquer plusieurs dégradés. Vous pouvez utiliser les modes de fusion pour empiler des formes ou des images de manière unique.

Si le lien entre un composant parent et un composant enfant est rompu, vous pouvez rétablir la connexion en sélectionnant le composant enfant et en cliquant sur l'icône Réinitialiser ou Revenir en arrière. Cette action annule tous les paramètres modifiés manuellement et rétablit le lien avec le composant parent.

Enregistrez toutes les variations dans un cadre dédié, puis appliquez-les à vos calques de texte si nécessaire.

• Détachez l'instance enfant de son parent en utilisant l'option "Détacher l'instance".
• Appliquer la mise en page automatique.

• Fixe: Maintient la largeur/hauteur statique en fonction des paramètres saisis manuellement.
• Accolade: Le cadre se redimensionne automatiquement pour s'adapter au contenu.
• Remplir: l'élément remplit la largeur ou la hauteur du conteneur parent.

• Envelopper: Dispose les éléments en plusieurs lignes ou colonnes dans un cadre. Les objets circulent horizontalement et passent à la ligne suivante lorsque l'espace est limité.
• Min/Max: définit les dimensions minimales et maximales des cadres et des éléments enfants, afin d'éviter qu'ils ne deviennent trop grands ou trop petits.

Ce plugin vous permet de parcourir plus de 40 000 icônes vectorielles d'Iconify, y compris des collections comme Material Design, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji, etc., et de les insérer rapidement dans votre design.

• Windows : Ctrl + Shift + E
• macOS : Cmd + Shift + E

• SVG: idéal pour les objets vectoriels tels que les icônes et les graphiques simples, en raison de son évolutivité et de sa netteté quelle que soit la taille.
• JPEG: mieux adapté aux photographies et aux images avec des dégradés, il offre un bon équilibre entre la compression et la qualité.
• PNG: préféré pour les images nécessitant de la transparence ou les images avec du texte et des bords nets, car il prend en charge la compression sans perte.
• PDF: Utile pour les documents et les mises en page qui doivent préserver les éléments vectoriels et être modulables sans perte de qualité.

• Discutez de vos projets : Collaborez en temps réel avec des chats vocaux et des commentaires, et intégrez même de la musique. FigJam propose des fonctions d'intelligence artificielle (actuellement en version bêta) telles que "Trier", qui organise automatiquement les notes autocollantes par sujet, et "Résumer", qui fournit une vue d'ensemble rapide de toutes les notes.
• Prenez des notes et analysez les entretiens avec les clients : Les concepteurs peuvent utiliser un modèle intégré pour enregistrer les entretiens avec les utilisateurs, puis créer des personas d'utilisateur sur la base des données collectées.
• Élaborer des cartes de parcours client: Visualisez les parcours des utilisateurs - décrivez les actions qu'ils entreprennent, leurs attentes, leurs émotions et leurs points de douleur. Améliorez chaque étape du parcours de l'utilisateur à l'aide d'outils tels que des notes autocollantes, des émojis et d'autres gadgets.

• Redémarrage nécessaire pour ajouter des polices locales : Il ne suffit pas d'installer une police sur votre ordinateur. Vous devrez redémarrer Figma pour la charger.
• Imprécisions possibles à l'exportation : Figma ajoute parfois de manière aléatoire quelques pixels de trait ou déforme les illustrations linéaires lors de l'exportation de fichiers PNG, JPG ou SVG.
• Pas de protection intégrée des droits d'auteur : Avec le plan Starter gratuit, il n'y a aucun moyen d'empêcher quelqu'un de dupliquer votre fichier et d'éditer sa propre copie.
• Nécessite une connexion internet stable : Comme Google Docs ou tout autre service basé sur le cloud, Figma ne permet pas l'édition hors ligne. Si vous perdez votre connexion, les modifications ne seront pas sauvegardées jusqu'à ce que vous soyez de nouveau en ligne.
• Pas de raccourcis clavier personnalisés : Les raccourcis disponibles dans Figma sont fixes, mais vous pouvez utiliser des outils tiers comme AutoHotkey pour réaffecter les touches.
• Pas de versions multilingues : Figma n'est actuellement disponible qu'en anglais et en japonais. Si vous avez besoin d'une version dans une autre langue, le seul moyen est d'utiliser l'extension Google Translate pour Chrome. Si vous avez de l'expérience avec des éditeurs graphiques comme Photoshop ou si vous avez suivi ce guide, il vous sera plus facile de vous familiariser avec Figma.

• Éditeur graphique en ligne: toute votre équipe peut travailler simultanément sur le même fichier, toutes les mises à jour étant sauvegardées dans le nuage.
• Historique des versions: Figma enregistre chaque changement de version, de sorte que vous pouvez facilement revenir en arrière si nécessaire.
• Aucune contrainte de système d'exploitation: Figma fonctionne directement dans un navigateur, de sorte qu'aucune installation complexe n'est nécessaire et qu'il fonctionne même sur des ordinateurs portables modestes. Toutefois, si vous le souhaitez, vous pouvez également installer l'application de bureau.
• Modèle Freemium: Le plan Starter gratuit prend en charge jusqu'à deux rédacteurs, ce qui est parfait pour de nombreux indépendants ou de petites équipes.
• Idéal pour les prototypes simples: Le concept général et l'interface sont conçus pour la création d'interfaces web et d'applications. Cependant, pour des illustrations ou des retouches photo plus avancées, vous devrez peut-être utiliser un autre outil.
• L'écosystème des plugins: Avec des centaines de plugins disponibles (et la possibilité de créer les vôtres), Figma peut s'adapter à la plupart des flux de travail.