Le Guide du
Le Guide du
Le Guide du
Handoff™
Handoff™
Handoff™
Les meilleures pratiques pour vos transfers de maquettes.
Les meilleures pratiques pour vos transfers de maquettes.
Les meilleures pratiques pour vos transfers de maquettes.
Bienvenue sur Le Guide du Handoff !
Grâce à ce guide, vous découvrirez comment fonctionne la phase de Handoff dans la conception d'interfaces et comment elle est est une étape clé dans laquelle les designers passent le relais aux développeurs front-end pour donner vie à leurs conceptions.
Au-delà d'un simple transfert de fichiers, cette phase nécessite une communication et une collaboration étroites entre les deux équipes. Les designers doivent exprimer leurs intentions clairement, tandis que les développeurs apportent leur expertise technique pour créer des interfaces captivantes et fonctionnelles.
Cet ouvrage explore donc les bonnes pratiques et les outils essentiels pour optimiser cette étape cruciale du développement.
Bienvenue sur Le Guide du Handoff !
Grâce à ce guide, vous découvrirez comment fonctionne la phase de Handoff dans la conception d'interfaces et comment elle est est une étape clé dans laquelle les designers passent le relais aux développeurs front-end pour donner vie à leurs conceptions.
Au-delà d'un simple transfert de fichiers, cette phase nécessite une communication et une collaboration étroites entre les deux équipes. Les designers doivent exprimer leurs intentions clairement, tandis que les développeurs apportent leur expertise technique pour créer des interfaces captivantes et fonctionnelles.
Cet ouvrage explore donc les bonnes pratiques et les outils essentiels pour optimiser cette étape cruciale du développement.
Sommaire
Sommaire
Bien comprendre comment les conteneurs Figma fonctionnent & dans quels contextes les utiliser.
Pourquoi ne pas attendre la fin de la conception de ses design pour mettre en place les composants.
Pour mieux comprendre comment vos designs sont utilisés et mis en forme, il faut comprendre comment un développeur fonctionne.
Des descriptions complètes d'outils modernes qui vous accompagnent tout au long de votre phase de Handoff.
Votre développeur, lors de l’inspection de vos designs, aura tendance à observer la hiérarchie des calques et le type que vous leur aurez donné.
Il est donc important de connaître ces quelques notions utiles sur les différences entre les types de calques que Figma propose et leur différents modes d’utilisation.
Les groupes
Un groupe est un conteneur qui permet de grouper un seul ou plusieurs éléments. Un groupe ne dispose pas d'une taille définie, il s’adapte automatiquement au contenu qu’il contient. Les groupes sont par ailleurs limités, ils ne se sont pas capables d’avoir un fond ou une bordure.
Les groupes sont utiles le plus souvent pour lier quelques objets adjacents ou lors de la création d’illustrations simples.
Il est préférable, lorsqu’on est à deux doigts d’appuyer sur ⌘ + G, de se demander "Est-ce-que ce groupe ne devrait pas plutôt être un frame ?", de manière à anticiper d'éventuelles évolutions sur notre design.
Les frames
Les frames, à l’instar des groupes, sont des conteneurs disposant de plusieurs propriétés et options supplémentaires :
Leur taille est définie.
Elles peuvent avoir un fond.
Elles peuvent être dotées de bordures.
Leurs coins peuvent être arrondis
Des aides à la disposition sous forme de grilles, colonnes ou de rangées peuvent être ajoutées.
Elles peuvent être jouées en tant que prototypes.
Les frames sont l’option supérieure aux groupes. En revanche, il n’est pas toujours nécéssaire d’opter pour leur utilisation. Si les éléments que vous avez envie de réunir dans un conteneur sont voués à une utilisation simple, il pourrait être préférable d’opter pour un groupe plutôt qu’une frame.
Les frames dotées d’auto-layout
Il y a maintenant 4 ans de cela, Figma annonçait l’auto-layout. Un nouveau mode d'organisation automatique, disponible dans les frames uniquement. Ce dernier apporte un équivalent du design web responsif dans Figma.
Les frames ayant l’auto-layout activées se voient la possibilité de :
Changer de taille en fonction de la taille de leur contenu.
Gérer l’espacement de leur contenu.
Ajouter des marges intérieures de différentes tailles pour chacun de leur côtés.
Gérer la direction de leur contenu.
Gérer l’alignement de leur contenu.
Ce fut à l'époque une révolution dans le monde des designers qui utilisaient Figma.
Cette nouvelle fonctionnalité, apportait enfin la possibilité de prototyper des composants responsifs sans avoir à créer de variantes pour chaque tailles d'écrans.
Les contraintes
Si il y a bien une des fonctions de base que je vois rarement être utilisée par mes collègues et qui pourtant est une des plus utiles, ce sont les contraintes.
Avant que l’auto-layout débarque, les contraintes étaient la manière par défaut de gérer le changement de taille des éléments qui composaient vos planches.
En définissant le mode de vos contraintes, vous pouvez explicitement dire à votre élément comment celui-ci doit réagir au changement de taille de son parent.
Malgré l'existence de l'auto-layout, les contraintes sont toujours une manière très efficace de gérer le re-positionnement et le re-taillage de vos éléments.
Leur utilisation est très simple à prendre en main, et si bien intégrée dans votre flow, vous permettra de perdre un minimum de temps lorsque vous n'en aurez pas pour proprement implémenter des composants responsifs.
Si parfois on est tenté de ne pas perdre de temps à créer des composants dans les première phases de conception, il est bien souvent contre-productif de ne pas le faire. Évidemment, les cas sont variés, et ne sont pas tout le temps les mêmes.
Si nous partons du principe que le service vendu par votre entreprise est de nature moderne, il est bon d’assumer que les technologies utilisées pour son développement le sont aussi.
Une chose que les multiples frameworks & librairies modernes de développement ont en commun, est l’utilisation de composants.
Si on prend l’exemple de la création d'une landing page pour un site lambda, cette dernière comportera bien souvent des boutons, des cartes riches en informations, des carousels, etc.
Tous ces éléments pourraient, bien sûr, être complètement statiques dans votre design.
Mais imaginons le scénario suivant :
Vous concevez une landing page, et ne prenez pas le temps de créer de composants.
Le client valide votre version et vous accorde le lancement de la phase de développement.
Vous envoyez la maquette à votre développeur, qui recréé la page, fidèle à votre version.
Le client, en voyant la version en production, se rends compte qu’il n’est pas satisfait.
Dans ce cet exemple, vous devrez modifier :
La taille de la typographie des boutons.
Les arrondis des cartes.
Ces changements, étants éparpillés à plusieurs endroits sur votre page, il vous faudra tout modifier à la main. Ce qui équivaut à une perte de temps considérable pour vous & votre employeur.
Le client valide cette version corrigée.
Vous envoyez cette nouvelle version à votre développeur, qui lui, doit maintenant jouer au jeu des 7 différences, n’ayant (probablement) pas de système de contrôle de versions de vos designs. Perte de temps elle aussi considérable pour votre développeur.
Grâce à ce "worst-case scenario" chaotique, on comprends qu'il soit préférable d’implémenter les composants le plus tôt possible. Une fois le phase de wireframing terminée, bien entendu.
Cet exemple ne prends que le cas d'une agence travaillant pour un petit client, nécessitant des retouches sur une seule page. Mais on imagine facilement la multiplication des problèmes qui subviendraient si votre travail était la création d’une application complexe, dotée d'une multitude de pages et d'encore plus de composants.
Si vous avez l'habitude de côtoyer vos collègues développeurs, vous vous serez rendu compte qu'ils ne réfléchissent pas forcément tout le temps de la même manière qu’un designer.
Cette section vise à clarifier le workflow d'analyse et de conception que les développeurs suivent généralement.
Ce sujet étant complexe & dense en informations, les exemples d'étapes citées ici ont été réduites afin d'aider à la compréhension.
Prenons l’exemple de la conception d’un composant indicateur de performances.
Les étapes par lesquelles votre développeur va passer sont généralement les suivantes :
1
Lecture des spécifications techniques
Ces dernières sont le plus souvent rédigées sous forme textuelle, de manière à pouvoir récapituler le fonctionnement de votre création avec le plus de précision possible. Grâce à ces dernières, le développeur pourra s’informer sur le composant à créer, avant même que vous ayez terminé la phase de design.
2
Visualisation & inspection des spécifications
Ces spécifications peuvent être générées de différentes manières: à la main, automatiquement avec le nouveau Dev Mode de Figma, avec un plugin générateur de spécifications ou même encore avec un service externe comme Zeplin.
Cette phase de compréhension de votre composant est primordiale. C’est dans celle-ci que votre développeur découvrira la structure qu’il devra réutiliser.
Il est donc utile de bien nommer ses calques, d’utiliser les styles de votre design system, et, si vos variantes utilisent des variables, que celles-ci soient elles aussi nommées de la bonne manière.
Pour savoir les bonnes conventions de nommage et d’organisation de vos calques, n’hésitez pas à en discuter directement avec vos collègues développeurs. Ne travaillant pas tous de la même manière, il est bon de communiquer avec les siens pour savoir, comment eux, fonctionnent.
3
Création du squelette du composant
Dans cette étape, le développeur recréera la hiérarchie de vos calques le plus fidèlement qu'il le puisse. Il est possible qu'il vienne à modifier cette dernière pour se faciliter la tâche ou pour tout simplement optimiser la structure mise en place.
4
Ajout des propriétés
En développement moderne, les composants utilisent des propriétés. Ces dernières sont importées, analysées & réutilisées pour créer un composant dynamique.
Dans le cadre de ce composant "indicateur de performances", certains textes (le nom, la valeur en pourcentage, etc) devront être changés dynamiquement, en fonction des données mises à disposition par le serveur.
5
Mise en forme
C’est dans cette étape que les couleurs, les styles de typographies et autres propriétés nécéssaires à la mise en forme visuelle de votre composant seront ajoutées.
6
Validation
Si tout s’est correctement passé, votre développeur vous communiquera l'intégration du composant dans un environnement de test. Ce dernier peut être un Storybook ou une importation du composant dans une page de test, sur une de vos instances de développement.
Lors de cette étape, soyez précis et n'hésitez pas à être minutieux dans vos retours. Vos collègues apprécient tout autant que vous un produit propre, consistant & cohérent.
En cherchant "figma handoff" sur Google et Product Hunt, vous risquez de faire face à un nombre impressionnant de plugins et de logiciels d'aide au Handoff.
Pas de panique ! J'ai testé pour vous les candidats les mieux référencés et dont les louanges étaient chantés par leur référencement sur les moteurs de recherche.
Locofy
Outil de design to code intelligent
J'ai pour la première fois découvert cet outil en me baladant sur Product Hunt, ce dernier se veut être un "outil de design to code intelligent", alors en voici mon avis.
Locofy est dense, très dense. C'est une des raison pour lesquelles on peut être très vite surpris lors de la première prise en main. En effet, la première fois qu'on ouvre le plugin Figma, on risque d'avoir l'impression d'être débordé. Heureusement, Heureusement, l'équipe derrière Locofy l'a bien compris et a réalisé une vidéo de prise en main de 10mins. Cette dernière est très utile et clarifie énormément le fonctionnement du logiciel.
Ce outil propose un workflow de design to code qui fonctionne en plusieurs étapes.
-> Vous commencerez par nettoyer vos frames grâce à l'aide de leur inspecteur intelligent. Ce dernier vous conseillera sur les erreurs à réparer (noms de calques manquants, composants oubliés, éléments masqués, etc).
-> Une fois vos frames nettoyées, il sera temps d'étiqueter vos éléments, là aussi, intelligemment, avec une reconnaissance automatique des items (optionnelle).
-> La dernière étape que vous effectuerez à l'intérieur de Figma, accompagnée du plugin, sera celle de la vérification de la responsivité de votre design. Durant celle-ci, l'assistant vous permettra de visualiser votre design sous différents breakpoints pour réparer les erreurs éventuelles qui subviendrait lors du redimensionnement de votre page.
-> Et enfin, vous pourrez générer votre design avec le framework de votre choix.
Locofy est un outil que je recommanderais à un designer qui connaît le monde du développement. Il dispose d'une interface web complète, permettant de réviser les changements et de modifier le code si besoin.
Bien qu'il puisse être utilisé dans de grandes entreprises, je recommande plus fortement son utilisation dans les startups et petites entreprises qui ne font appel qu'à une seule et même personne pour le design et l'intégration de leurs services web.
Quelques autres points notables sont :
Gratuit pendant la durée de la beta.
Génère du code qui fonctionne avec beaucoup de frameworks différents (react, next, angular, gatsby, vue, etc).
Propose l’utilisation de librairies pour les composants (Material, Ant, etc).
Permet de versionner les fichiers. Très utile dans pour les entreprises où le suivi des versions est important.
Permet de synchroniser intelligemment les projets sur vos dépôts git.
Anima
Outil de design to code
Anima est un outil de design to code, similaire à Locofy, mais qui propose une palette de fonctionnalités plus réduite.
Anima n'est pas doté uniquement de fonctionnalités "design to code", ce dernier permet aussi de faciliter la gestion de vos design systems avec une conversion automatique de vos composants Storybook en composants Figma.
Point notables :
Génère du code dans 3 frameworks différents : React, Vue ou HTML basique.
S'intègre au Dev Mode de Figma pour exporter les composants dans votre framework préféré encore plus rapidement.
Permet de convertir des composants Storybook en composants Figma.
Très centré sur la partie visuelle du Handoff (mise en place des animations, des vidéos, des effets au hover, etc).
Pour générer des versions responsives de vos design, Anima utilise un workflow basé sur l’analyse de vos frames, déclinées pour chaque breakpoints (une frame pour la version desktop, une pour le mobile & une pour les tablettes, à la manière de Framer).
À l'avenir, Anima devrait pouvoir vous permettre de gérer les tokens de vos designs.
Zeplin
Spécifications & flows pour vos livrables
Zeplin se présente comme un des outils phares du processus de Handoff des designs. Ce dernier permet de générer facilement des spécifications visuelles pour vos composants et autres éléments.
À l'instar des deux premiers outils, Zeplin n'est pas un outil de "design to code". Son but principal est de générer une documentation de vos styles, qui sera ensuite partagée en interne dans votre entreprise.
Comme beaucoup d'outils modernes, Zeplin propose aussi une génération automatique des tokens à partir de vos styles, permettant à vos développeurs de récupérer vos styles Figma et de les garder automatiquement à jour dans leur code source.
Zeplin permet aussi de dessiner vos flows utilisateurs directement depuis leur outil, le tout étant mis en place grâce à un système de gestion des versions, apportant plus de sécurité lors de la validation et du transfert de vos designs.
Bien que la partie "inspection des spécifications" ne soit plus entièrement nécéssaire aujourd'hui grâce au Dev Mode de Figma, son utilisation pour l'écriture de lignes directrices est fortement appréciée.
Je recommande grandement son utilisation dans les entreprises de moyenne à grande taille, là où la communication cross-team peut parfois être difficile.
Marvel
Prototypage & spécifications
Marvel est un outil permettant la conception de prototypes interactifs, sans la complexité à laquelle on peut parfois avoir à faire avec Figma. Cet outil se concentre principalement sur une utilisation vouée à la présentation de prototypes à des clients, des dirigeants ou à des équipes internes.
Si autrefois Marvel aurait pu être très utile dans la création de spécifications pour vos designs, aujourd'hui, avec le Dev Mode de Figma, il n'a plus vraiment de grande utilité.
Ses fonctionnalités de création de prototypes sont elles aussi semblables à ce que Figma propose nativement. Son utilisation est donc peut être recommandée dans le cas où certains membres de votre entreprise sont réticents à l'utilisation de Figma pour la lecture de prototypes et de spécifications.
Overlay
Outil de components to code
Overlay est un outil de "design to code", mais attention, ce dernier se veut être utile uniquement pour l'exportation de vos composants en code. Avec lui, vous n'aurez pas la possibilité d'exporter vos design entiers d'une seule traite.
Si Overlay peut être perçu comme trop simple par certains, il a apportera à d'autres un vent de simplicité là où les autres outils de ce domaine se veulent parfois trop complexes. Il permet d'exporter vos composants dans 3 frameworks différents : React, Vue & HTML basique.
Un développeur sachant utiliser Figma est primordial pour l'utilisation d'Overlay. Ce dernier sera utile pour l'ébauche rapide de la hiérarchie de vos composants et leur mise en place.
Designer, prototyper et coder sont des compétences qui sont grandement appréciées des recruteurs. Si vous êtes un designer d'interfaces qui a des bases solides en programmation, je vous recommande fortement l'utilisation d'Overlay pour optimiser votre temps de pré-développement.
Bienvenue sur Le Guide du Handoff !
Grâce à ce guide, vous découvrirez comment fonctionne la phase de Handoff dans la conception d'interfaces et comment elle est est une étape clé dans laquelle les designers passent le relais aux développeurs front-end pour donner vie à leurs conceptions.
Au-delà d'un simple transfert de fichiers, cette phase nécessite une communication et une collaboration étroites entre les deux équipes. Les designers doivent exprimer leurs intentions clairement, tandis que les développeurs apportent leur expertise technique pour créer des interfaces captivantes et fonctionnelles.
Cet ouvrage explore donc les bonnes pratiques et les outils essentiels pour optimiser cette étape cruciale du développement.
Sommaire
Bien comprendre comment les conteneurs Figma fonctionnent & dans quels contextes les utiliser.
Pourquoi ne pas attendre la fin de la conception de ses design pour mettre en place les composants.
Pour mieux comprendre comment vos designs sont utilisés et mis en forme, il faut comprendre comment un développeur fonctionne.
Des descriptions complètes d'outils modernes qui vous accompagnent tout au long de votre phase de Handoff.
Votre développeur, lors de l’inspection de vos designs, aura tendance à observer la hiérarchie des calques et le type que vous leur aurez donné.
Il est donc important de connaître ces quelques notions utiles sur les différences entre les types de calques que Figma propose et leur différents modes d’utilisation.
Les groupes
Un groupe est un conteneur qui permet de grouper un seul ou plusieurs éléments. Un groupe ne dispose pas d'une taille définie, il s’adapte automatiquement au contenu qu’il contient. Les groupes sont par ailleurs limités, ils ne se sont pas capables d’avoir un fond ou une bordure.
Les groupes sont utiles le plus souvent pour lier quelques objets adjacents ou lors de la création d’illustrations simples.
Il est préférable, lorsqu’on est à deux doigts d’appuyer sur ⌘ + G, de se demander "Est-ce-que ce groupe ne devrait pas plutôt être un frame ?", de manière à anticiper d'éventuelles évolutions sur notre design.
Les frames
Les frames, à l’instar des groupes, sont des conteneurs disposant de plusieurs propriétés et options supplémentaires :
Leur taille est définie.
Elles peuvent avoir un fond.
Elles peuvent être dotées de bordures.
Leurs coins peuvent être arrondis
Des aides à la disposition sous forme de grilles, colonnes ou de rangées peuvent être ajoutées.
Elles peuvent être jouées en tant que prototypes.
Les frames sont l’option supérieure aux groupes. En revanche, il n’est pas toujours nécéssaire d’opter pour leur utilisation. Si les éléments que vous avez envie de réunir dans un conteneur sont voués à une utilisation simple, il pourrait être préférable d’opter pour un groupe plutôt qu’une frame.
Les frames dotées d’auto-layout
Il y a maintenant 4 ans de cela, Figma annonçait l’auto-layout. Un nouveau mode d'organisation automatique, disponible dans les frames uniquement. Ce dernier apporte un équivalent du design web responsif dans Figma.
Les frames ayant l’auto-layout activées se voient la possibilité de :
Changer de taille en fonction de la taille de leur contenu.
Gérer l’espacement de leur contenu.
Ajouter des marges intérieures de différentes tailles pour chacun de leur côtés.
Gérer la direction de leur contenu.
Gérer l’alignement de leur contenu.
Ce fut à l'époque une révolution dans le monde des designers qui utilisaient Figma.
Cette nouvelle fonctionnalité, apportait enfin la possibilité de prototyper des composants responsifs sans avoir à créer de variantes pour chaque tailles d'écrans.
Les contraintes
Si il y a bien une des fonctions de base que je vois rarement être utilisée par mes collègues et qui pourtant est une des plus utiles, ce sont les contraintes.
Avant que l’auto-layout débarque, les contraintes étaient la manière par défaut de gérer le changement de taille des éléments qui composaient vos planches.
En définissant le mode de vos contraintes, vous pouvez explicitement dire à votre élément comment celui-ci doit réagir au changement de taille de son parent.
Malgré l'existence de l'auto-layout, les contraintes sont toujours une manière très efficace de gérer le re-positionnement et le re-taillage de vos éléments.
Leur utilisation est très simple à prendre en main, et si bien intégrée dans votre flow, vous permettra de perdre un minimum de temps lorsque vous n'en aurez pas pour proprement implémenter des composants responsifs.
Si parfois on est tenté de ne pas perdre de temps à créer des composants dans les première phases de conception, il est bien souvent contre-productif de ne pas le faire. Évidemment, les cas sont variés, et ne sont pas tout le temps les mêmes.
Si nous partons du principe que le service vendu par votre entreprise est de nature moderne, il est bon d’assumer que les technologies utilisées pour son développement le sont aussi.
Une chose que les multiples frameworks & librairies modernes de développement ont en commun, est l’utilisation de composants.
Si on prend l’exemple de la création d'une landing page pour un site lambda, cette dernière comportera bien souvent des boutons, des cartes riches en informations, des carousels, etc.
Tous ces éléments pourraient, bien sûr, être complètement statiques dans votre design.
Mais imaginons le scénario suivant :
Vous concevez une landing page, et ne prenez pas le temps de créer de composants.
Le client valide votre version et vous accorde le lancement de la phase de développement.
Vous envoyez la maquette à votre développeur, qui recréé la page, fidèle à votre version.
Le client, en voyant la version en production, se rends compte qu’il n’est pas satisfait.
Dans ce cet exemple, vous devrez modifier :
La taille de la typographie des boutons.
Les arrondis des cartes.
Ces changements, étants éparpillés à plusieurs endroits sur votre page, il vous faudra tout modifier à la main. Ce qui équivaut à une perte de temps considérable pour vous & votre employeur.
Le client valide cette version corrigée.
Vous envoyez cette nouvelle version à votre développeur, qui lui, doit maintenant jouer au jeu des 7 différences, n’ayant (probablement) pas de système de contrôle de versions de vos designs. Perte de temps elle aussi considérable pour votre développeur.
Grâce à ce "worst-case scenario" chaotique, on comprends qu'il soit préférable d’implémenter les composants le plus tôt possible. Une fois le phase de wireframing terminée, bien entendu.
Cet exemple ne prends que le cas d'une agence travaillant pour un petit client, nécessitant des retouches sur une seule page. Mais on imagine facilement la multiplication des problèmes qui subviendraient si votre travail était la création d’une application complexe, dotée d'une multitude de pages et d'encore plus de composants.
Si vous avez l'habitude de côtoyer vos collègues développeurs, vous vous serez rendu compte qu'ils ne réfléchissent pas forcément tout le temps de la même manière qu’un designer.
Cette section vise à clarifier le workflow d'analyse et de conception que les développeurs suivent généralement.
Ce sujet étant complexe & dense en informations, les exemples d'étapes citées ici ont été réduites afin d'aider à la compréhension.
Prenons l’exemple de la conception d’un composant indicateur de performances.
Les étapes par lesquelles votre développeur va passer sont généralement les suivantes :
1
Lecture des spécifications techniques
Ces dernières sont le plus souvent rédigées sous forme textuelle, de manière à pouvoir récapituler le fonctionnement de votre création avec le plus de précision possible. Grâce à ces dernières, le développeur pourra s’informer sur le composant à créer, avant même que vous ayez terminé la phase de design.
2
Visualisation & inspection des spécifications
Ces spécifications peuvent être générées de différentes manières: à la main, automatiquement avec le nouveau Dev Mode de Figma, avec un plugin générateur de spécifications ou même encore avec un service externe comme Zeplin.
Cette phase de compréhension de votre composant est primordiale. C’est dans celle-ci que votre développeur découvrira la structure qu’il devra réutiliser.
Il est donc utile de bien nommer ses calques, d’utiliser les styles de votre design system, et, si vos variantes utilisent des variables, que celles-ci soient elles aussi nommées de la bonne manière.
Pour savoir les bonnes conventions de nommage et d’organisation de vos calques, n’hésitez pas à en discuter directement avec vos collègues développeurs. Ne travaillant pas tous de la même manière, il est bon de communiquer avec les siens pour savoir, comment eux, fonctionnent.
3
Création du squelette du composant
Dans cette étape, le développeur recréera la hiérarchie de vos calques le plus fidèlement qu'il le puisse. Il est possible qu'il vienne à modifier cette dernière pour se faciliter la tâche ou pour tout simplement optimiser la structure mise en place.
4
Ajout des propriétés
En développement moderne, les composants utilisent des propriétés. Ces dernières sont importées, analysées & réutilisées pour créer un composant dynamique.
Dans le cadre de ce composant "indicateur de performances", certains textes (le nom, la valeur en pourcentage, etc) devront être changés dynamiquement, en fonction des données mises à disposition par le serveur.
5
Mise en forme
C’est dans cette étape que les couleurs, les styles de typographies et autres propriétés nécéssaires à la mise en forme visuelle de votre composant seront ajoutées.
6
Validation
Si tout s’est correctement passé, votre développeur vous communiquera l'intégration du composant dans un environnement de test. Ce dernier peut être un Storybook ou une importation du composant dans une page de test, sur une de vos instances de développement.
Lors de cette étape, soyez précis et n'hésitez pas à être minutieux dans vos retours. Vos collègues apprécient tout autant que vous un produit propre, consistant & cohérent.
En cherchant "figma handoff" sur Google et Product Hunt, vous risquez de faire face à un nombre impressionnant de plugins et de logiciels d'aide au Handoff.
Pas de panique ! J'ai testé pour vous les candidats les mieux référencés et dont les louanges étaient chantés par leur référencement sur les moteurs de recherche.
Locofy
Outil de design to code intelligent
J'ai pour la première fois découvert cet outil en me baladant sur Product Hunt, ce dernier se veut être un "outil de design to code intelligent", alors en voici mon avis.
Locofy est dense, très dense. C'est une des raison pour lesquelles on peut être très vite surpris lors de la première prise en main. En effet, la première fois qu'on ouvre le plugin Figma, on risque d'avoir l'impression d'être débordé. Heureusement, Heureusement, l'équipe derrière Locofy l'a bien compris et a réalisé une vidéo de prise en main de 10mins. Cette dernière est très utile et clarifie énormément le fonctionnement du logiciel.
Ce outil propose un workflow de design to code qui fonctionne en plusieurs étapes.
-> Vous commencerez par nettoyer vos frames grâce à l'aide de leur inspecteur intelligent. Ce dernier vous conseillera sur les erreurs à réparer (noms de calques manquants, composants oubliés, éléments masqués, etc).
-> Une fois vos frames nettoyées, il sera temps d'étiqueter vos éléments, là aussi, intelligemment, avec une reconnaissance automatique des items (optionnelle).
-> La dernière étape que vous effectuerez à l'intérieur de Figma, accompagnée du plugin, sera celle de la vérification de la responsivité de votre design. Durant celle-ci, l'assistant vous permettra de visualiser votre design sous différents breakpoints pour réparer les erreurs éventuelles qui subviendrait lors du redimensionnement de votre page.
-> Et enfin, vous pourrez générer votre design avec le framework de votre choix.
Locofy est un outil que je recommanderais à un designer qui connaît le monde du développement. Il dispose d'une interface web complète, permettant de réviser les changements et de modifier le code si besoin.
Bien qu'il puisse être utilisé dans de grandes entreprises, je recommande plus fortement son utilisation dans les startups et petites entreprises qui ne font appel qu'à une seule et même personne pour le design et l'intégration de leurs services web.
Quelques autres points notables sont :
Gratuit pendant la durée de la beta.
Génère du code qui fonctionne avec beaucoup de frameworks différents (react, next, angular, gatsby, vue, etc).
Propose l’utilisation de librairies pour les composants (Material, Ant, etc).
Permet de versionner les fichiers. Très utile dans pour les entreprises où le suivi des versions est important.
Permet de synchroniser intelligemment les projets sur vos dépôts git.
Anima
Outil de design to code
Anima est un outil de design to code, similaire à Locofy, mais qui propose une palette de fonctionnalités plus réduite.
Anima n'est pas doté uniquement de fonctionnalités "design to code", ce dernier permet aussi de faciliter la gestion de vos design systems avec une conversion automatique de vos composants Storybook en composants Figma.
Point notables :
Génère du code dans 3 frameworks différents : React, Vue ou HTML basique.
S'intègre au Dev Mode de Figma pour exporter les composants dans votre framework préféré encore plus rapidement.
Permet de convertir des composants Storybook en composants Figma.
Très centré sur la partie visuelle du Handoff (mise en place des animations, des vidéos, des effets au hover, etc).
Pour générer des versions responsives de vos design, Anima utilise un workflow basé sur l’analyse de vos frames, déclinées pour chaque breakpoints (une frame pour la version desktop, une pour le mobile & une pour les tablettes, à la manière de Framer).
À l'avenir, Anima devrait pouvoir vous permettre de gérer les tokens de vos designs.
Zeplin
Spécifications & flows pour vos livrables
Zeplin se présente comme un des outils phares du processus de Handoff des designs. Ce dernier permet de générer facilement des spécifications visuelles pour vos composants et autres éléments.
À l'instar des deux premiers outils, Zeplin n'est pas un outil de "design to code". Son but principal est de générer une documentation de vos styles, qui sera ensuite partagée en interne dans votre entreprise.
Comme beaucoup d'outils modernes, Zeplin propose aussi une génération automatique des tokens à partir de vos styles, permettant à vos développeurs de récupérer vos styles Figma et de les garder automatiquement à jour dans leur code source.
Zeplin permet aussi de dessiner vos flows utilisateurs directement depuis leur outil, le tout étant mis en place grâce à un système de gestion des versions, apportant plus de sécurité lors de la validation et du transfert de vos designs.
Bien que la partie "inspection des spécifications" ne soit plus entièrement nécéssaire aujourd'hui grâce au Dev Mode de Figma, son utilisation pour l'écriture de lignes directrices est fortement appréciée.
Je recommande grandement son utilisation dans les entreprises de moyenne à grande taille, là où la communication cross-team peut parfois être difficile.
Marvel
Prototypage & spécifications
Marvel est un outil permettant la conception de prototypes interactifs, sans la complexité à laquelle on peut parfois avoir à faire avec Figma. Cet outil se concentre principalement sur une utilisation vouée à la présentation de prototypes à des clients, des dirigeants ou à des équipes internes.
Si autrefois Marvel aurait pu être très utile dans la création de spécifications pour vos designs, aujourd'hui, avec le Dev Mode de Figma, il n'a plus vraiment de grande utilité.
Ses fonctionnalités de création de prototypes sont elles aussi semblables à ce que Figma propose nativement. Son utilisation est donc peut être recommandée dans le cas où certains membres de votre entreprise sont réticents à l'utilisation de Figma pour la lecture de prototypes et de spécifications.
Overlay
Outil de components to code
Overlay est un outil de "design to code", mais attention, ce dernier se veut être utile uniquement pour l'exportation de vos composants en code. Avec lui, vous n'aurez pas la possibilité d'exporter vos design entiers d'une seule traite.
Si Overlay peut être perçu comme trop simple par certains, il a apportera à d'autres un vent de simplicité là où les autres outils de ce domaine se veulent parfois trop complexes. Il permet d'exporter vos composants dans 3 frameworks différents : React, Vue & HTML basique.
Un développeur sachant utiliser Figma est primordial pour l'utilisation d'Overlay. Ce dernier sera utile pour l'ébauche rapide de la hiérarchie de vos composants et leur mise en place.
Designer, prototyper et coder sont des compétences qui sont grandement appréciées des recruteurs. Si vous êtes un designer d'interfaces qui a des bases solides en programmation, je vous recommande fortement l'utilisation d'Overlay pour optimiser votre temps de pré-développement.
Hello, moi c'est Étienne !
UI & UX Designer basé à Bordeaux
Ce guide a été réalisé dans le cadre de ma fin d'études à l'ESD Bordeaux.
Je tiens à remercier l'école, les intervenants et tous mes camarades pour ces 5 années passées à leur côtés.
Une question ? Un retour ?
N'hésitez pas à me contacter par email ou via LinkedIn pour n'importe quelle demande. 😇