Badge Webflow Award Winner 2023

5 modèles Figma pour UX & UI Designer

Publié le 
3/9/2022
Modifié le 
27/3/2023
Temps de lecture : 5 min
capture d'écran de plusieurs modèles figma avec icône figma et icône power jaune digidop
Écrit par
Thomas Labonne avec un T-shirt Digidop

Thomas Labonne

Co-fondateur

5 modèles Figma à dupliquer gratuitement pour vos projets de webdesign. Template de design sprint, design system, charte graphique, composant UX, composants UI.

Points clés à retenir

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

modèle de design sprint à dupliquer sur figma community

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

modèle de design system à dupliquer sur figma community

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

modèle de charte graphique à dupliquer sur figma community

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

modèle de composant UX à dupliquer sur figma community

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

modèle de composant UI à télécharger depuis la figma community

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
projet Flomodia by Digidop
projet Coudac by Digidop
projet Heka by Digidopprojet Flaw by Digidopprojet Morfo by Digidop