# 5 modèles Figma pour UX & UI Designer Documentation3 minPublié le Sep 03, 2022Dernière mise à jour le ![capture d'écran de plusieurs modèles figma avec icône figma et icône power jaune digidop](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671b55028b75715e19300073_64760069e93084646c9eec1b_6313207b35c1cb84d6c250a4_Open-Graph-mod%2525C3%2525A8le-UX-UI-designer-figma.webp)Sommaire [ Copied](#)[ ](#)[ ](#)[ ](#) - [H2 Example](#) Résumez cet article avec une IA[ ChatGPT](#)[ Claude](#)[ Grok](#)[ Perplexity](#)[ Google AI](#)Points clés de l'articleL'[outil de webdesign Figma](/fr/tools/figma) regroupe des centaines de modèles de fichiers à dupliquer gratuitement depuis la[ Figma Community](/fr/blog/comment-integrer-communaute-figma). Dans cet article nous avons sélectionné **5 templates très utiles pour tout type de **[**projet de webdesign**](/fr/services/webdesign). ## 1. Design Sprint ![modèle de design sprint à dupliquer sur figma community](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671b55038b75715e1930007e_64760069e93084646c9eec26_6313218161b5a00cb9dd8000_mod%2525C3%2525A8le-design-sprint-figjam.webp) Le [Design Sprint](https://academie.digidop.fr/glossaire/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](/fr/tools/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](https://www.figma.com/community/file/1126612575893680784) ## 2. Design System ![modèle de design system à dupliquer sur figma community](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671b55038b75715e19300087_64760069e93084646c9eec29_631321d2751b0682f4cdcbf8_mod%2525C3%2525A8le-design-system-figma.webp) Un [Design System](https://academie.digidop.fr/glossaire/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](https://www.figma.com/community/file/902569748938803801) ## 3. Charte Graphique ![modèle de charte graphique à dupliquer sur figma community](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671b55038b75715e1930007b_64760069e93084646c9eec2a_631321f535c1cb2dc4c2f247_mod%2525C3%2525A8le-charte-graphique-figma.webp) La [charte graphique](https://academie.digidop.fr/glossaire/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](https://www.figma.com/community/file/1090636617493057876) ## 4. Eléments UX ![modèle de composant UX à dupliquer sur figma community](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671b55038b75715e19300081_64760069e93084646c9eec28_631322326773ce01f57d9750_mod%2525C3%2525A8le-elements-UX-figma.webp) L'[UX](https://academie.digidop.fr/glossaire/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.](https://academie.digidop.fr/glossaire/wireframe) - **Navbars** - **Footers** - **Headers** - **Galeries** - **Sections contact** - **Sections prix** - **Témoignages** - **FAQ** - **Section blogs** - **Landing page** - **etc.** > [Modèle d'éléments UX Figma](https://www.figma.com/community/file/1078092050664989246) Lisez notre article pour [en savoir plus sur l'utilisation de la Relume Library](/fr/blog/creer-maquette-figma-client-first-relume-library). ## 5. Composants UI ![modèle de composant UI à télécharger depuis la figma community](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671b55038b75715e19300084_64760069e93084646c9eec27_6313236361b5a0833fdee9d7_mod%2525C3%2525A8le-composant-ui-figma.webp) Les **composants Figma sont des types d'éléments graphiques **que vous pourrez identifier grâce à trois types de propriétés : - ils sont** intégrés à plusieurs endroits** sur vos maquettes et projets - ils sont** liés à un ou plusieurs éléments "enfants" **: des instances - 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](https://www.figma.com/community/file/831698976089873405) [ ](#)![Thomas Labonne](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/678a45970e82f1635d9e4d7f_thomas-website%20(1).webp)Thomas LabonneCo-fondateur[ ](/fr/team/thomas-labonne)[ ](https://fr.linkedin.com/in/thomas-labonne-digidop)[ ](#)+1200 lecteurs ## Restez informé(e) Abonnez-vous à notre newsletter pour des conseils et actus exclusives. [S'inscrire ](https://digidopfr.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Prévisualiser la Newsletter ](https://digidopfr.substack.com/) ## Articles qui devraient vous intéresser ![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab92cc629d6018592f49d92_Best%20B2B%20SaaS%20Agencies%20in%202026_FR.webp)DocumentationTout voir ### Top 20 meilleures agences web et digitales pour SaaS B2B en 2026 [Top 20 meilleures agences web et digitales pour SaaS B2B en 2026](/fr/blog/top-agences-b2b-saas)Top 20 meilleures agences web et digitales pour SaaS B2B en 2026![Interface Webflow Source montrant les agents IA, l’édition de site et les Views par métier dans un espace de travail unifié.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDéveloppementTout voir ### Webflow lance Source. Notre avis sur ce shift. [Webflow lance Source. Notre avis sur ce shift.](/fr/blog/webflow-lance-source)Webflow lance Source. Notre avis sur ce shift.![Taux de citation par plateforme IA : ChatGPT 100 %, Perplexity 100 %, Gemini 67 % et Claude 0 %.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationIATout voir ### Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA [Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA](/fr/blog/comment-rendre-son-site-visible-chatgpt-perplexity-et-moteurs-ia)Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA[Voir tous les articles ](/fr/blog)Les meilleurs projets web commencent par une conversation[Discuter avec un expert ](/fr/contact)[Réserver un appel ](/fr/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)