La collaboration entre designers et développeurs est parfois complexe. Entre méthodes de travails, langages, outils, etc. voici comment Figma a réussi à concilier le travail des designers et des développeurs.
Figma est un outil de design conçu pour créer tout type d'interfaces web : sites internet, landing page, applications, web app, plateformes, etc. Alternative à Sketch ou Adobe XD, Figma dispose de nombreuses fonctionnalités pensées pour les designers mais également les développeurs web. Un outil collaboratif, qui vise à concilier et simplifier le travail de toutes les équipes pour un rendu optimal.
Trouver un langage commun entre le design et le développement
L'enjeux des projets web se fait souvent au moment de la passation de la maquette du design au développement. Les outils et méthodes de travail sont souvent bien différentes, et les développeurs ont besoin d'informations liées aux langages CSS, Swift, XML ou encore Javascript. Il a donc été important d'apprendre à uniformiser et concilier ces méthodes de travail au cours du temps pour optimiser le travail de chacun.
Pour ce qui est de Figma, l'outil supporte et donne accès aux codes CSS, Swift et XML de chacun de ses éléments. Depuis le panneau de codage, les développeurs peuvent accéder aux informations détaillées de chaque élément graphique qu'ils sélectionnent : pixel en X, Y, W, H, corner radius, contraintes, fond, code HEX, mesure des marges, etc. Des fonctionnalités qui favorisent le développement "pixel perfect" de chaque designs et maquettes.
Prototype web, au plus proche de la version finale
Le webdesign n'est pas statique ! Entre simple interaction avec un bouton pour passer d'une page à l'autre et animations 3D, les mouvements se multiplient dans le web. Bien que la tendance se tourne de plus en plus vers des "sites accessibles" sans trop d'animations, chaque maquette comporte des interactions que les designers doivent retranscrire aux développeurs :
- Comprendre le maillage interne du site
- Animations sur boutons selon les états
- Dropdown
- Animations au scroll
- Onglets de tableaux
- etc.
La phase de prototypage permet de répondre à ce besoin, car c'est l'étape du design la plus représentative de l'interface finale. Elle comporte la structure issue de l'UX, l'ensemble des éléments graphiques de la phase d'UI, auxquels vient s'ajouter la possibilité d'interagir avec la maquette.
Figma dispose d'un panneau de configuration dédié à la création de prototypes web. Il est possible d'ajouter des interactions à chaque élément visuel, puis de tester et visualiser ces animations depuis le mode présentation de Figma.
Design system optimisé avec les components et styles
La création de styles et components dans Figma est un moyen de centraliser tous les éléments liés au design system.
Les styles permettent aux développeurs d'accéder en un clic à l'ensemble des informations liés aux couleurs, textes, effets, fonds, grilles, marges, etc. utilisés sur la maquette. Le code lié à chaque style est ainsi accessible depuis une même interface.
Les components Figma permettent quant à eux d'accéder en un clic à l'élément mère d'un design et tous les variants qui le composent.
Deux fonctionnalités très utiles qui viendront compléter et uniformiser le style guide pour les développeurs.
Fonctionnalités Figma dédiées aux développeurs
Une liste des fonctionnalités Figma exclusivement dédiée aux développeurs.
Inspection du code
Déjà abordé plus haut dans cet article, Figma permet d'accéder au code CSS, Swift et XML de chaque élément graphique, et de le copier en un clic : tailles, typographies, valeurs des couleurs, etc. Le langage Javascript n'est quant à lui pas supporté par l'outil.
Le panneau de codage propose deux types de formats :
- Format Tableau : copier coller chaque élément de manière distinct
- Format Code : copier coller l'ensemble du code en un clic
Mesure des marges
Une fois le panneau de codage activé, Figma débloque d'autres fonctionnalités dédiées aux développeurs, comme l'inspection des marges. Pour connaître la position d'un texte dans un bouton, il suffira ainsi de cliquer sur le texte pour afficher les espacements.
Visualiser les layout grid
Figma propose plusieurs modes de visualisation selon les besoins. Les développeurs pourront activer les layout grids de chaque Frame via un simple Cmd / Ctrl + G.
Accéder aux styles
Les développeurs peuvent accéder à l'ensemble des styles de couleurs, textes, effets, etc. utilisés sur la maquette.
Export PNG, SVG, CSS
Figma permet d'exporter des éléments graphiques de manière locale ou globale sur le projet.
- Export local : cliquez sur l'image, allez dans le panneau de codage et ouvrez l'URL du "File Name"
- Export global : le raccourci clavier Ctrl/Cmd + Shift + E vous permettra d'exporter en un clic tous les éléments graphiques contenus sur le fichier.
- Copier CSS, SVG ou PNG : clic droit sur l'élément, cliquez sur "Copy/Paste as" puis sélectionnez la méthode souhaitée.
