Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

Fonctionnalités et outils de l'interface du designer Figma

Thomas Labonne
Thomas Labonne
September 2, 2022
interface du designer figma avec plusieurs zones entourées de couleurs différentes et icone power jaune digidop

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

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

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

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

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

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

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

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

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

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

Ajoutez des commentaires et interagissez à plusieurs sur vos fichiers Figma.

Composants

plusieurs losanges blancs sur noir de la fonctionnalité composant de figmaz

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

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

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

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

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

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

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

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

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

Une première colonne qui regroupe l'ensemble des propriétés liées aux éléments que vous avez sélectionné.

  1. Emplacement sur les axes X et Y
  2. Largeur, longueur, bordure, et inclinaison
  3. Contraintes de l'élément graphique
  4. Propriétés liées au layer
  5. Typographie : famille de police, style, taille, couleur, etc.
  6. Fond : couleur, opacité
  7. Lignes : couleur, largeur, style
  8. Effets : ombrage, floutage, etc.
  9. Export : PNG, SVG, JPG, PDF

Prototype

fonctionnalité de création de prototype dans figma

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

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.

Vous méritez un site Webflow qui fait l'effet " Wahouu " !

Prenez contact avec nous aujourd'hui. L'équipe fantastique de Digidop est prête pour vous aider à construire un site web qui répond à vos besoins 🚀

Site digidop.fr sur un écran d'ordinateur avec un badge de recommandations et des réactions