Figma s’est imposé comme un outil de référence pour imaginer, concevoir et spécifier des interfaces d’applications. Son principal atout réside dans son aspect collaboratif, qui en fait un choix idéal pour les équipes créant des outils numériques.
Chez 4SH, nos UX designers, UI designers et intégrateur·rices front l’utilisent au quotidien pour travailler main dans la main à concevoir des applications et expériences numériques. Et pour garantir l’efficacité de notre collaboration, tout en assurant cohérence et qualité dans nos créations, nous nous appuyons sur des UI Kit rigoureusement conçus par nos soins.
Cette série d’article vise à partager comment nous créons, structurons et utilisons nos UI Kit au sein de nos projets, et au passage, vous partager quelques astuces Figma que nous trouvons pertinentes pour sa fabrication.
Mais tout d’abord demandons à une IA célèbre de nous donner la définition de ce qu’est un UI Kit :
Un UI Kit est un ensemble de composants d’interface utilisateur (boutons, typographies, icônes, couleurs, etc.) prédéfinis et organisés de manière cohérente pour faciliter la conception d’interfaces. Il sert de bibliothèque visuelle et fonctionnelle, permettant aux designers et aux développeurs de créer des interfaces rapidement et de manière uniforme.
Cela peut-être donc vu comme une grosse boîte de LEGO qui regroupe tous les types de pièces nécessaires (composants) pour bâtir une application.
Création et maintenance d’un UI Kit : pourquoi et par qui ?
Chez 4SH, pour comprendre comment réaliser et mettre en place nos UI Kit intelligemment, nous avons engagé une réflexion sur la responsabilité de leurs créations et de leurs maintenances. Pour ce faire, il a bien fallu comprendre le rôle de chacun dans les étapes d’idéation et création d’un produit digital chez 4SH, et ainsi définir comment nous pouvons utiliser un UI Kit dans Figma, ensemble, en toute fluidité.
L’UX Designer chez 4SH cartographie l’expérience utilisateur, valide les périmètres fonctionnels, et conçoit les maquettes qui représentent l’ensemble. Il utilise Figma pour :
- Réaliser les maquettes fonctionnelles (wireframes),
- Créer les maquettes graphiques,
- Documenter les cas d’usage et les user flows.
L’UI Designer, quant à lui, définit l’orientation visuelle et veille à la cohérence graphique de l’ensemble du projet. Il utilise Figma pour :
- Définir l’identité visuelle et les règles graphiques,
- Structurer et réaliser les maquettes graphiques,
- Documenter le design system et les composants.
La particularité chez 4SH est que nos UI designers endossent également le rôle d’intégrateurs front-end. Cela leur confère une vision plus technique, ce qui est particulièrement précieux lors de la conception de l’UI Kit et du design system.
Cette spécificité nous a conduit à conclure que ce sont les UI Designers / Intégrateurs qui doivent se charger de la mise en place et de la maintenance de l’UI Kit. Leur double casquette leur permet d’anticiper les contraintes techniques dès la création des composants, ce qui simplifie et accélère les processus d’intégration des maquettes lors du développement.
Ainsi, ils fournissent aux UX designers les ressources nécessaires pour réaliser des maquettes fonctionnelles tout en facilitant le travail des développeur·ses lors de la phase d’intégration, en profitant de tout ce qu’apporte et propose Figma dans ce domaine.
Que retrouve-t-on dans un UI Kit ?
Un UI Kit embarque généralement :
- 🎨 Les fondations (bases), qui constitue les principes graphiques qui composent votre design system. Quelques exemples :
- Palettes de couleurs
- Typographie
- Iconographie
- Spacing system (règles et unité d’espacement)
- Radius system (règles et unité des radius)
- Shadow system
- …
- 🧱 Les composants (et ses variantes) qui constituent l’interface de votre application. Quelques exemples :
- Boutons
- Éléments de formulaire (Input, Select, Search bar, Datepicker, Checkbox…)
- Modales, Toast, Pop-up
- Onglets
- Tags, Status, Badges
- …
- 📐 Le layout qui correspond aux éléments qui structure vos pages. Quelques exemples :
- Structures globales des pages
- Navigation
- Header
- Footer
- Cards & Containers
- Séparateurs
- Grid System
- …
Chaque composant et élément de layout seront étroitement liés aux règles et valeurs fournies dans les fondations, ce qui garantira une cohérence de style entre chaque composant.
Exemples concrets
Prenons l’exemple des couleurs : dans les fondations de notre UI Kit, nous allons définir et organiser nos couleurs sous forme de palettes regroupant toutes les teintes nécessaires à notre application (ex : primary, secondary, highlight, error, success). Voici un schéma simple pour illustrer ce concept :
Vous l’aurez donc compris chaque composant (et leurs variantes) sont basées sur ces palettes couleurs, ce qui va permettre :
- un gain de temps considérable pour la maintenance des couleurs
- une cohérence visuelle garantie entre tous les composants et les écrans, assurant une uniformité dans l’expérience utilisateur.
*Nous aborderons plus en détail, dans un futur article, comment nous organisons et utilisons nos palettes de couleurs dans nos projets.
Autre exemple avec les radius : nous définissons une série de metrics prédéfinies, auxquelles sont rattachés les différents composants et éléments de notre UI Kit.
En centralisant ces règles et valeurs de base comme les couleurs, les typographies, les espacements, les radius, ombres, etc., chaque composant de l’interface respecte automatiquement ces principes, garantissant ainsi une uniformité visuelle et technique tout au long du cycle de vie du projet.
Pour conclure
Un UI Kit bien conçu, qui centralise toutes les valeurs communes (fondations), ainsi que les composants liés à celle-ci permet de :
- Simplifier et accélérer le travail d’idéation avec Figma des UX Designers : ils gagnent un temps précieux en utilisant des composants préconçus, ce qui leur permet de se concentrer sur la structure globale des écrans.
- Donner aux UI Designers un contrôle optimal sur la qualité visuelle : ils assurent la cohérence visuelle et fonctionnelle des composants et des écrans, tout en facilitant une transition fluide avec la phase d’intégration.
Pour aller plus loin…
🔗 Voici une pépite donnant une vision complète de ce qu’est un design system : https://thedesignsystem.guide/start-here
Vous avez également la possibilité de vous former grâce à nos formations design sur l’outil Figma.
Cet article a été publié dans 4SH Design.
