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

5 modèles Figma pour UX & UI Designer

Thomas Labonne
Thomas Labonne
September 3, 2022
capture d'écran de plusieurs modèles figma avec icône figma et icône power jaune digidop

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

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