ITSS DEV: Agence web Drupal à Paris

Figma : Bien plus qu'un outil de design Laura Homar mer 16/09/2026 - 11:52 Ajouter un commentaire Inclure dans drupal.fr Il y a encore quelques années, la conception d'une interface numérique ressemblait à un parcours du combattant. Le designer travaillait de son côté sur un logiciel lourd, exportait des dizaines de versions de maquettes (du fameux Maquette_VFinale_Definitive_V3.pdf), et les envoyait par e-mail aux développeurs et aux clients.  Puis Figma est arrivé et a bouleversé les codes. Souvent réduit à un simple « outil pour dessiner des interfaces », Figma est en réalité bien plus que cela. C'est aujourd'hui une plateforme de collaboration en temps réel, pensée pour centraliser le travail de toute une équipe : designers, développeurs, chefs de projet et clients. On vous en dit plus dans la suite de cet article. Le "google Docs" du design  La plus grande révolution de Figma repose sur sa nature : c'est un outil entièrement basé sur le cloud. Il n'y a plus de fichiers lourds à s'échanger ni de problèmes de versions.  Tout comme plusieurs personnes peuvent rédiger un document simultanément sur Google Docs, toute une équipe peut se connecter au même fichier Figma en temps réel. Vous pouvez voir les curseurs de vos collègues se déplacer sur l'écran, observer un designer ajuster une mise en page pendant qu'un rédacteur corrige un texte directement dans la maquette. Cette transparence accélère drastiquement les itérations et élimine la frustration des échanges asynchrones. Coté clients, cela permet de voir en temps réel le travail effectué par le designer.  Côté équipes, cela permet de travailler à plusieurs sur un seul et même fichier, pour maximiser les temps de réalisation.  La fin des allers-retours chaotiques Avant, recueillir les avis d'un client ou d'un chef de projet nécessitait de faire des captures d'écran, de les coller dans une présentation, et de tenter de déchiffrer des retours du type : « Peux-tu bouger le bouton bleu un peu plus en haut à gauche de l'image 3 ? ».  Figma a intégré un système de commentaires contextuels, permettant de simplifier les allers-retours. N'importe quel collaborateur et/ou client disposant du lien peut cliquer précisément sur un élément de l'interface (un bouton, un titre, une image) et y laisser une note. Le designer reçoit une notification, peut répondre dans le fil de discussion, et marquer le commentaire comme "résolu" une fois la modification effectuée. Tout l'historique des décisions est centralisé au même endroit. Le "Dev Mode" : l'outil révolutionnaire pour les développeurs Historiquement, le passage du design au développement (le handoff) a toujours été un moment de friction. Les développeurs devaient "deviner" les espacements ou utiliser des outils tiers pour extraire les couleurs et les typographies. Aujourd'hui, Figma intègre un Dev Mode (Mode Développeur) spécialement conçu pour les équipes techniques. En un clic, l'interface change :  Les développeurs peuvent inspecter n'importe quel composant pour en extraire instantanément le code (CSS, iOS, Android) Ils peuvent télécharger les assets (images, icônes) dans les bons formats  Ils accèdent directement aux variables du Design System (les fameux Design Tokens vus dans notre précédent article) pour s'assurer que l'intégration sera pixel-perfect  Prototypage intégré : tester avant de coder Pourquoi attendre qu'un site soit entièrement développé pour se rendre compte qu'un parcours utilisateur ne fonctionne pas ? Figma permet de lier les maquettes entre elles pour créer des prototypes interactifs et cliquables. Sans écrire une seule ligne de code, il est possible de simuler le comportement d'un menu déroulant, les transitions entre deux pages, ou des animations complexes. Cela permet de présenter un résultat ultra-réaliste aux clients ou de mener des tests auprès de vrais utilisateurs en amont du projet. Un gain de temps et d'argent inestimable. FigJam : un tableau blanc virtuel L'écosystème Figma s'est agrandi avec FigJam, un espace de tableau blanc interactif. Avant même de dessiner la première maquette, les équipes peuvent s'y réunir pour faire des brainstormings, cartographier des parcours utilisateurs (User Journeys), coller des post-its virtuels ou définir l'architecture de l'information du futur site.  C'est l'outil parfait pour les ateliers de co-création et de brainstormings, particulièrement pour les équipes en télétravail. Vous l'aurez compris, Figma n'est plus seulement le territoire exclusif des UX/UI designers. Il est devenu le hub central où gravite l'ensemble du cycle de vie d'un projet digital. En adoptant une plateforme qui favorise la transparence, fluidifie les retours et facilite le travail des développeurs, Figma transforme radicalement la façon dont les collaborateurs travaillent ensemble.  Quelle est la différence entre UX et UI design ? Les tendances webdesign à adopter pour votre site Drupal Comprendre le Design System

Comprendre le Design System Laura Homar lun 10/08/2026 - 16:39 Ajouter un commentaire Inclure dans drupal.fr Si vous vous intéressez à la conception de produits numériques, vous avez inévitablement croisé le terme « Design System ». Souvent confondu avec un UI Kit (bibliothèque de composants) ou une simple charte graphique, il désigne en réalité un concept beaucoup plus vaste et structurant.  Aujourd'hui, de la startup en hyper-croissance aux géants du web, toutes les équipes s'appuient sur cette méthode pour concevoir leurs interfaces. Mais de quoi s'agit-il exactement, et pourquoi cet outil est-il devenu la véritable colonne vertébrale des projets digitaux modernes ? Qu'est-ce qu'un design system ?  Un Design System (ou système de conception) est un référentiel centralisé et évolutif qui regroupe l'ensemble des règles, des composants et des bonnes pratiques permettant à une organisation de concevoir des produits de manière cohérente.  Là où une charte graphique traditionnelle fige des règles visuelles dans un document statique, le Design System sert de « source de vérité » unique et permanente entre le design et le code. Il s'assure que ce qui est dessiné est exactement ce qui est développé. Les 4 pilliers fondamentales Pour qu'un Design System soit efficace, il s'articule généralement autour de quatre éléments :  Les principes fondamentaux : La philosophie globale, les valeurs de la marque et les grands objectifs d'expérience utilisateur (UX). C'est ce qui donne une direction au design.  Les fondations visuelles (Design Tokens) : Les couleurs, les typographies, l'iconographie, les grilles de mise en page et les règles d'espacement. Ce sont les éléments de base de l'identité de la marque.  Les composants réutilisables : Des éléments d'interface concrets (boutons, champs de texte, menus). Ils sont dessinés, mais également traduits en code informatique, prêts à être déployés. La documentation : Le mode d'emploi exhaustif qui dicte comment, pourquoi et dans quel contexte utiliser chaque élément pour garantir l'accessibilité et la cohérence. Pourquoi adopter une approche systémique ?  Passer d'une création artisanale à une approche systémique demande un investissement initial, mais transforme radicalement la méthode de travail des organisations : Une cohérence d'expérience absolue : L'utilisateur interagit avec une interface familière et prévisible, quel que soit le produit ou le support (web, mobile). Cela réduit la friction cognitive et renforce la crédibilité de la marque.  Une productivité décuplée (Time-to-Market) : En mutualisant les ressources, les équipes n'ont plus à réinventer la roue à chaque fonctionnalité. Créer une nouvelle page devient un jeu de construction, ce qui accélère le développement.  Une collaboration fluidifiée : Le Design System établit un vocabulaire commun. Les concepteurs, les ingénieurs et les chefs de produit parlent le même langage, limitant considérablement les malentendus techniques.  Une maintenance centralisée : Si la direction décide de changer la typographie globale ou d'arrondir tous les boutons, la modification est effectuée à la racine du système. Elle se répercute ensuite automatiquement sur l'ensemble du produit. L'atomic design : La chimie au service de l'interface Pour concevoir et structurer efficacement ces fameux composants, la majorité des équipes s'appuie sur une méthodologie très populaire imaginée par Brad Frost : l'Atomic Design.  Inspirée de la chimie, cette approche propose de déconstruire les interfaces en éléments de plus en plus petits. Plutôt que de concevoir des pages web entières d'un seul bloc, on conçoit des éléments indépendants que l'on assemble selon cinq niveaux de complexité :  Les Atomes : Ce sont les éléments de base, indivisibles (un bouton, un champ de saisie, une icône) Les Molécules : L'assemblage de plusieurs atomes pour créer un petit bloc fonctionnel. Exemple : un formulaire de recherche composé d'un label, d'un champ et d'un bouton. Les Organismes : Des sections d'interface plus complexes et autonomes. Exemple : un en-tête de site (header) contenant un logo, un menu et une barre de recherche.  Les Templates (Gabarits) : Le squelette de la page. Il définit où et comment les organismes s'agencent entre eux, sans encore intégrer le contenu final.  Les Pages : L'aboutissement du système. Les templates sont remplis avec du contenu réel (textes, images) pour vérifier que le design est robuste en situation réelle.  Penser son Design System à travers ce prisme permet de garantir une évolutivité parfaite : si une molécule dysfonctionne, on sait exactement quel atome corriger à la source. Comment construire un design system de zéro ?  Créer un tel système ne se fait pas en un jour. Voici les 6 étapes clés pour poser des fondations solides :  L'audit de l'existant : Faites l'inventaire de toutes vos interfaces actuelles pour repérer les incohérences (combien de nuances de bleu ou de styles de boutons différents utilisez-vous ?) et prioriser le travail.  Définir les fondations (Tokens) : Fixez les variables globales de votre interface (palette de couleurs, typographies, grilles, espacements).  Créer la bibliothèque (UI Kit) : En vous basant sur l'Atomic Design, commencez à dessiner vos atomes, puis vos molécules, sur un outil de conception (comme Figma).  Traduire le design en code : Chaque composant validé doit être développé par l'équipe technique de manière propre et accessible, puis stocké dans un répertoire commun.  Rédiger la documentation : Expliquez l'anatomie de chaque composant, ses différents états (survol, clic, inactif), ses règles d'usage et intégrez les extraits de code pour l'utiliser. Établir une gouvernance : Nommez des garants (souvent un binôme designer/développeur) pour valider les évolutions du système, gérer les bugs et s'assurer qu'il reste cohérent. En conclusion : un écosystème vivant La plus grande erreur serait de percevoir le Design System comme un simple projet ponctuel. Il s'agit en réalité d'un produit à part entière, au service de vos autres produits.  Il doit être constamment testé, mis à jour et gouverné pour s'adapter aux évolutions des besoins et à la croissance de votre organisation. Si vos interfaces gagnent en complexité ou que vos équipes s'agrandissent, l'effort initial de création sera très largement récompensé par la vélocité, la sérénité et la cohérence qu'il apportera à vos futurs développements.  Cependant, se lancer dans un tel chantier demande du temps et une véritable expertise technique et méthodologique. C'est précisément là que chez ITSS, agence web Drupal, nous intervenons. Nos équipes de designers et de développeurs peuvent vous accompagner de A à Z dans la création, l'intégration et la pérennisation de votre Design System. De l'audit de votre existant jusqu'à l'implémentation des composants dans votre environnement de développement, nous mettons notre savoir-faire à votre disposition pour construire des fondations solides et évolutives pour tous vos projets digitaux. Quelle est la différence entre UX et UI design ? Les tendances webdesign à adopter pour votre site Drupal