L'outil de webdesign Figma regroupe des centaines de modèles de fichiers à dupliquer gratuitement depuis la Figma Community. Dans cet article nous avons sélectionné 5 templates très utiles pour tout type de projet de webdesign.

1. Design Sprint

Le Design Sprint est une méthode utilisée par de nombreuses start-ups pour sortir des produits dans des temps records. Elle est composée de plusieurs étapes de design thinking et conditionnées par une contrainte temporelle.

Ce modèle de design sprint réalisé sur FigJam est divisé en 4 étapes réparties sur 5 jours

• Définir la problématique
• Trouver une solution
• Créer un prototype
• Tester des utilisateurs

Modèle de design sprint Figma

2. Design System

Un Design System regroupe l'ensemble des éléments UI liés à un projet de webdesign. Il intègre également les règles et styles liés à la maquette, tels que les couleurs, les typographies, les tailles, les espacements, etc.

L'objectif est de pouvoir centraliser et organiser au sein d'un même fichier tous les éléments qui seront nécessaires pour le développement du projet. Le design system est donc un outil indispensable pour travailler avec d'autres designers et au moment de la passation du projet aux développeurs web.

Ce modèle de design système est organisé en 11 types d'éléments :

• Les couleurs : primaires, secondaires, codes HEX
• Les typographies : tailles, familles de polices, espacement
• L'iconographie : toutes les icônes utilisées
• Les espacements : espaces utilisés entre les sections
• Les champs textes : l'ensemble des champs selon leurs statuts (à remplir, obligatoire, validé, etc.)
• Les sélecteurs : dropdown lists, toggle, radio buton, tabs, etc.
• Les boutons : l'ensemble des CTA selon leur statuts (actif, inactif, survolé, etc.)
• Les petits éléments : tous les autres éléments graphiques par exemple liés à des formulaires des boutons pour fermer une fenêtre etc.
• Les gros éléments : tels que les tableaux, les CTA, les dropdowns, etc.
• Les cartes : comme les cartes de blogs, les cartes de témoignages clients, etc.

Modèle de design system Figma

3. Charte Graphique

La charte graphique est un document de référence sur lequel vous allez définir les règles d'identité graphique d'une marque. Ce modèle de charte graphique vous donne un première base pour établir la direction artistique de vos projets :

• Moodboard
• Couleurs
• Typographies
• Logothèque
• Projections web

Modèle de charte graphique Figma

4. Eléments UX

L'UX d'une maquette est l'étape de conception durant laquelle vous allez construire la structure du site. Vous pourrez définir chaque section de chaque page du site, pour commencer à construire votre expérience utilisateur. Les éléments utilisés lors de l'UX se différencient de ceux de l'UI car aucune notion de design n'entre en jeu. Ce sont donc des zones avec des emplacement pour du texte, des images, des CTA, etc.

Voici un modèle Figma regroupant des dizaines d'éléments UI que vous pourrez réutiliser pour vos wireframe.

• Navbars
• Footers
• Headers
• Galeries
• Sections contact
• Sections prix
• Témoignages
• FAQ
• Section blogs
• Landing page
• etc.

Modèle d'éléments UX Figma

Lisez notre article pour en savoir plus sur l'utilisation de la Relume Library.

5. Composants UI

Les composants Figma sont des types d'éléments graphiques que vous pourrez identifier grâce à trois types de propriétés :

1. ils sont intégrés à plusieurs endroits sur vos maquettes et projets
2. ils sont liés à un ou plusieurs éléments "enfants" : des instances
3. ils peuvent avoir un ou plusieurs variants

L'objectif est donc de pouvoir définir des éléments que vous pourrez facilement ré-utiliser sur un ou plusieurs projets. Ce modèle Figma est une première base regroupant des centaines de composants UI à réutiliser sur tous vos projets. 

• Boutons
• Icônes
• Typographies
• Layouts
• Navigation (menus, dropdown, pagination, étapes, etc.)
• Formulaires
• Checkbox, Radio buton, Switch, etc.
• Badges
• Avatars
• Cartes
• etc.

Modèle de composants UI Figma