Voici une vue d'ensemble de toutes les fonctionnalités Figma, que vous retrouvez dans l'interface de vos designs files. Ces fonctionnalités vous permettront de créer des maquettes web et tout autre projets de design.
Dans cet article nous avons dissocié les fonctionnalités du designer en 4 grandes parties.
1. Canvas
Le Canvas est l'espace central du designer de Figma. C'est un arrière-plan sur lequel vous regroupez tous vos éléments de design tels que vos images, vos vecteurs, vos maquettes, vos illustrations, vos gifs, etc.
Cet arrière plan en 2D dispose d'une taille finie de -65 000 à +65 000 sur chaque axe.
2. Barre d'outils
![barre d'outil figma](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeeb9_6312654610336487ad5a530e_barre-outils-figma.webp)
Figma est un outil de webdesign, essentiellement conçu pour réaliser des maquettes web. La barre d'outils regroupe donc plusieurs fonctionnalités utiles pour ce type de projet. Nombreuses de ces fonctionnalités seront également disponibles depuis des raccourcis claviers.
Menu Figma
![Menu Figma](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeebc_6312616ca1f87f75241edbf0_menu-figma.webp)
Vous permet d'effectuer de nombreuses actions en lien avec le fichier, les objets qui s'y trouvent, les textes, vecteurs, plugins, etc. Vous pourrez par exemple exporter les éléments de votre fichier, changer la vue, accéder aux plugins et widgets, etc.
Déplacement et mise à l'échelle
![fonctionnalités move et scale de figma avec icones et lettres V et K en blanc sur fond noir](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeeb1_631261b910ff273c3f52b8a7_outils-move-scale-figma.webp)
Le raccourci V vous donnera directement accès au curseur "Move" pour sélectionner et déplacer des éléments sur votre maquette.
Le raccourci K de l'outil "Scale" vous permettra quant à lui de changer la taille des éléments tout en préservant leurs proportions.
Cadre et Tranche
![fonctionnalités frame et slice de figma](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeebd_6312623637aef91341b66c50_outils-frame-slice-figma.webp)
Le Frame est un cadre dans lequel vous allez intégrer vos créations. Il vous permet ainsi de définir une zone pour designer. La touche F vous permettra d'y accéder en un clic.
Le Slice, accessible avec la touche S vous permet de définir des zones du canvas, que vous pourrez par exemple exporter.
Eléments vectoriels
![fonctionnalité de formes vectorielles dans figma](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeeaa_6312628d2fe3c3ec87eb05c1_outils-formes-vectorielles-figma.webp)
Regroupe un ensemble de formes vectorielles prédéfinies, que vous pourrez utiliser pour créer des éléments graphiques sur Figma :
- rectangles,
- cercle,
- flèche,
- ligne,
- triangle,
- étoile,
- etc.
Stylo et Crayon
![fonctionnalités stylo et pinceau de figma, avec icones blanc sur noir](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeebb_631263e81eb5c7e014fd43a5_outils-pen-pencil-figma.webp)
Deux outils qui vous permettront de créer à partir de zéro des éléments vectorisés.
Le stylo vous permet de créer des vecteurs à partir de segments.
Le crayon crée quant à lui des vecteurs entièrement libres.
Texte
![icone T de la fonctionnalité texte de figma, en blanc sur noir](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeeae_6312643f1033643cc8599625_text-figma.webp)
Ajoutez des blocs de texte n'importe où sur vos designs.
Gérez les polices, les styles, les couleurs, etc.
Ressources
NOUVEAU !
![icones carré losange et plus de la fonctionnalité ressources de figa](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeeb3_6312649a6dbbe316398ad182_plug-in-widget-component-figma.webp)
Une nouveauté Figma, les ressources sont accessibles directement depuis la barre d'outils : components, plugins, et widgets.
Main
![fonctionnalité main de figma avec une main en blanc sur noir](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeeb4_63126586198e4d0ec8cbfbb8_hand-figma.webp)
Déplacez vous facilement dans le canvas, sans toucher à vos éléments graphiques, à l'aide de l'outil Main.
Commentaires
![fonctionnalité commentaires de figma avec une icone en blanc sur noir](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeeb5_631265c67f51f960ea49eeab_commentaire-figma.webp)
Ajoutez des commentaires et interagissez à plusieurs sur vos fichiers Figma.
Composants
![plusieurs losanges blancs sur noir de la fonctionnalité composant de figmaz](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeeb7_6312661889fac54c13b4e50f_composants-figma.webp)
Fonctionnalité vous permettant de faire de certains éléments graphiques des composants. Les composants sont des layers "parents", ayant plusieurs "enfants". Chaque enfant dispose des mêmes propriétés de design que son parent. Il vous suffira de modifier un parent pour que tous les enfants adoptent les nouvelles propriétés.
Masques et sélections
![cercle et carrés de la fonctionnalité masque de figma](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeeb0_6312668520902a45d1a97231_masque-selection-figma.webp)
Deux fonctionnalités qui vous permettront de gérer le rapport de superposition entre plusieurs éléments de design.
Edition d'objets
![carré avec angles entourés de la fonctionnalité édition de figma](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeeac_631266b49614c10792ac0a78_edition-object-figma.webp)
Vous permet d'éditer un vecteur, par exemple en ajoutant des courbures, des points de rupture, de nouveaux segments, des fonds, des couleurs, etc.
Conversation
![icone de casque blanc sur fond noir de la fonctionnalité appel de figma](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeebe_631266fe9614c1c891ac50fc_conversation.webp)
Lancez des appels d'équipe et échangez avec les autres personnes présentes sur votre fichier Figma.
Spotlight
![icone power jaune de digidop pour la fonctionnalité spotlight de figma](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeeba_63126756674e05736879d03f_Spotlight.webp)
La fonctionnalité Spotlight est accessible depuis votre l'icône de votre profil. Elle permet de proposer aux personnes de vous suivre sur le canvas.
Présentation
![icone play en blanc sur noir de la fonctionnalité présentation de figma](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeead_63126864dc8e2150393e08dd_pr%25C3%25A9sentation.webp)
Le mode présentation vous permet de vous projeter dans un frame. Vous pourrez ainsi présenter des maquettes en simulation sur différents types de supports : MacBook, iPhone, Tablettes, etc.
Partage
![bouton share bleu sur noir pour partager un fichier figma](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeeab_63126852db33b663546cc1f8_partage.webp)
Cette fonctionnalité vous permettra de partager l'ensemble de votre fichier Figma. Vous pourrez gérer les différentes restrictions pour permettre aux personnes d'éditer ou simplement voir le fichier.
3. Barre latérale gauche
Cet espace est organisé en deux colonnes : les layers et les assets
Layers
![interface du panneau de layers sur figma](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeeb6_63126a7c2d563c42331082d4_layers%2520figma.webp)
Regroupe et organise chaque éléments présents sur le canvas, tels que les Frame, les images, les composants, les instances, les groupes, les vecteurs, etc. Le panneau des layers vous permet également de voir comment les éléments sont liés les uns avec les autres.
Assets
![interface du panneau d'assets sur figma](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeeb8_63126aed9495e824d2e012e0_assets-figma.webp)
Les assets regroupent l'ensemble de vos composants créés sur le document et ceux partagés avec l'équipe.
Cette barre latérale vous indique également l'ensemble des pages du fichier, vous permet de les organiser, et d'en créer de nouvelles.
4. Barre latérale droite
La barre latérale droite est organisée en 3 colonnes.
Propriétés de design
![propriétés de design sur figma](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeeaf_63126bc87f51f959054db958_propri%25C3%25A9t%25C3%25A9-design-figma.webp)
Une première colonne qui regroupe l'ensemble des propriétés liées aux éléments que vous avez sélectionné.
- Emplacement sur les axes X et Y
- Largeur, longueur, bordure, et inclinaison
- Contraintes de l'élément graphique
- Propriétés liées au layer
- Typographie : famille de police, style, taille, couleur, etc.
- Fond : couleur, opacité
- Lignes : couleur, largeur, style
- Effets : ombrage, floutage, etc.
- Export : PNG, SVG, JPG, PDF
Prototype
![fonctionnalité de création de prototype dans figma](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeea9_63126c5eb5ecf566c8367cf4_fonctionnalit%25C3%25A9-prototype-figma.webp)
Une seconde colonne embarquant toutes les fonctionnalités pour créer des prototypes dans Figma. Vous permet ainsi de créer des interactions et animations avec les éléments graphiques.
Inspecteur
![](https://cdn.prod.website-files.com/64760069e93084646c9ee428/64760069e93084646c9eeeb2_63126c9e8e81e52404ffd6a1_fonctionnalit%25C3%25A9-inspect-developpeurs-figma.webp)
Une troisième colonne dédiée aux développeurs web. Affiche les propriétés des éléments avec leurs code CSS, iOS, Android pour faciliter la conversion d'une maquette Figma en site web.
Prêt(e) à avoir un site qui convertit ?
Améliorer votre visibilité en ligne grâce à l’experience, l’excellence et la réactivité de Digidop !