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

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

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

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‍

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 ‍

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

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

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

Ajoutez des blocs de texte n'importe où sur vos designs.

Gérez les polices, les styles, les couleurs, etc.

‍Ressources ‍

NOUVEAU !

‍Une nouveauté Figma, les ressources sont accessibles directement depuis la barre d'outils : components, plugins, et widgets.

‍Main

Déplacez vous facilement dans le canvas, sans toucher à vos éléments graphiques, à l'aide de l'outil Main.

‍Commentaires

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

‍Composants‍

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 ‍

Deux fonctionnalités qui vous permettront de gérer le rapport de superposition entre plusieurs éléments de design.

Edition d'objets‍

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

‍Lancez des appels d'équipe et échangez avec les autres personnes présentes sur votre fichier Figma.

Spotlight

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

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

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

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 ‍

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

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

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.