Zeplin est un outil en ligne de passation entre designers et développeurs. Le designer y publie ses maquettes depuis Figma, Sketch ou Adobe XD, et l’équipe technique récupère automatiquement mesures, couleurs, typographies, assets et extraits de code. Une version gratuite existe (un projet), les formules payantes sont facturées par siège.
Thank you for reading this post, don't forget to subscribe!Vous avez tapé zeplin zeplin et vous voulez comprendre à quoi sert cette application dont parlent vos collègues designers ? Zeplin n’est pas un logiciel de dessin : c’est l’étape d’après. Une fois les écrans validés, il sert de point de rendez-vous entre la création et le code. Les développeurs y trouvent chaque espacement, chaque teinte et chaque image prête à l’export, sans fouiller dans le fichier source. Créée en 2014 en Californie, la plateforme est utilisée par des équipes produit de toutes tailles, de la start-up à de très grands groupes. Voici comment elle fonctionne, ce qu’elle coûte et dans quels cas elle vaut vraiment le détour.
Zeplin, c’est quoi exactement ?
Le principe tient en une idée : séparer l’espace où l’on conçoit de l’espace où l’on livre. Dans Figma ou Sketch, un fichier évolue sans cesse, avec des pistes abandonnées, des variantes et des calques de travail. Le développeur qui ouvre ce fichier ne sait pas toujours quelle version fait foi. Zeplin règle ce problème en accueillant uniquement les écrans publiés, donc considérés comme prêts à être intégrés.
Chaque écran envoyé dans Zeplin devient une page consultable dans le navigateur ou dans l’application de bureau (macOS et Windows). Un clic sur un élément affiche ses dimensions, sa position, sa couleur, la police utilisée et la distance qui le sépare des éléments voisins. Les icônes et images se téléchargent dans les bons formats et les bonnes densités, ce qui évite les allers-retours du type « tu peux m’exporter ce logo en SVG ? ».
On parle souvent de design handoff, autrement dit de passation de design. Zeplin s’est positionné très tôt sur ce créneau, à une époque où les designers envoyaient encore des PDF annotés à la main.
Les fonctionnalités de Zeplin qui font gagner du temps
L’outil a beaucoup évolué depuis ses débuts. Au-delà de l’inspection des maquettes, il propose aujourd’hui un ensemble de briques pensées pour les équipes qui livrent régulièrement :
- Spécifications automatiques : marges, tailles, opacités, ombres et rayons d’arrondi sont lus directement sur la maquette.
- Extraits de code : CSS, Sass, Swift, Kotlin, React Native ou XML Android, selon la plateforme ciblée. Des extensions permettent d’adapter la sortie aux conventions de l’équipe.
- Styleguide centralisé : couleurs, styles de texte, espacements et composants sont regroupés et réutilisables d’un projet à l’autre.
- Historique des versions : chaque nouvelle publication d’un écran conserve les précédentes, avec la possibilité de comparer deux états.
- Commentaires et annotations : les questions se posent directement sur l’écran concerné, au bon endroit, au lieu de se perdre dans une messagerie.
- Flows : les écrans peuvent être reliés entre eux pour représenter un parcours utilisateur complet, utile pour expliquer une logique de navigation.
- Intégrations : Slack, Jira, Microsoft Teams ou Storybook pour relier les maquettes aux tickets et aux composants réellement codés.
La valeur ne vient pas d’une fonctionnalité isolée mais de leur combinaison. Quand un designer modifie un bouton, le développeur reçoit une notification, voit la différence dans l’historique et récupère la nouvelle valeur sans demander quoi que ce soit.
Comment utiliser Zeplin avec Figma, Sketch ou Adobe XD
La prise en main suit presque toujours le même chemin, quel que soit le logiciel de création. Il faut compter une quinzaine de minutes pour publier un premier écran.
- Créer un compte sur le site de Zeplin, puis un projet en choisissant la plateforme visée (web, iOS, Android ou macOS). Ce choix conditionne les unités et le code proposé.
- Installer le plugin correspondant à son outil de design : Figma, Sketch ou Adobe XD.
- Sélectionner les frames ou plans de travail terminés, puis lancer l’export vers le projet Zeplin.
- Inviter les développeurs, chefs de projet ou clients qui doivent consulter les écrans.
- Organiser les écrans en sections, ajouter les composants au styleguide et relier les pages en flows si besoin.
Une bonne pratique consiste à ne publier que des écrans réellement validés. Si Zeplin se remplit de brouillons, il perd son intérêt principal : être la source de vérité pour l’intégration. Certaines équipes utilisent des tags de statut (« en revue », « prêt », « livré ») pour clarifier les choses.
Côté développement, aucune installation n’est obligatoire. Le navigateur suffit, même si l’application de bureau reste plus confortable pour exporter rapidement des assets.
Prix de Zeplin : version gratuite et formules payantes
La tarification repose sur des abonnements par siège. Les montants évoluent régulièrement et diffèrent selon la facturation mensuelle ou annuelle : mieux vaut donc vérifier la grille à jour sur le site officiel avant de s’engager. La structure générale reste en revanche stable.
| Formule | Pour qui | Ce qu’elle apporte |
|---|---|---|
| Free | Freelance, test de l’outil | Un projet actif, fonctions d’inspection et d’export de base |
| Starter | Petite équipe | Plusieurs projets, collaboration élargie |
| Growth | Équipe produit en croissance | Projets illimités, styleguides partagés, intégrations avancées |
| Organization | Entreprise | SSO, gestion fine des permissions, support dédié |
Point important : Zeplin distingue les personnes qui publient et gèrent les projets de celles qui se contentent de consulter. Selon la formule, les sièges de consultation peuvent coûter moins cher, voire être inclus, ce qui change sensiblement le budget pour une équipe où les développeurs sont plus nombreux que les designers.
Zeplin face au Dev Mode de Figma et aux autres alternatives
La question revient dans presque toutes les équipes : pourquoi payer Zeplin si Figma propose déjà un mode développeur ? La réponse honnête est que les deux outils se recoupent largement, mais pas totalement.
Le Dev Mode de Figma permet d’inspecter une maquette dans le fichier même où elle est conçue. C’est rapide et cela évite un outil de plus. Le revers, c’est que le développeur travaille dans un document vivant, susceptible de bouger pendant qu’il intègre. Zeplin, à l’inverse, fige les écrans publiés et garde l’historique de chaque version, ce qui sécurise la livraison sur des projets longs ou à plusieurs équipes.
D’autres solutions existent, avec des approches différentes :
- Avocode a longtemps été le concurrent direct, mais le service a fermé ses portes en 2023.
- Sympli vise aussi la passation et l’inspection, avec un accent sur les équipes mobiles.
- Storybook ne remplace pas Zeplin mais le complète : il documente les composants codés, quand Zeplin documente les maquettes.
- Penpot, outil open source, intègre son propre mode d’inspection et attire les équipes soucieuses d’héberger leurs données.
En pratique, une petite équipe entièrement sur Figma peut souvent se passer de Zeplin. Une organisation qui gère plusieurs applications, des prestataires externes ou un design system partagé tirera davantage parti d’un espace de livraison dédié.
Avis sur Zeplin : points forts et limites
Les retours d’utilisateurs publiés sur les plateformes d’avis logiciels convergent sur plusieurs points. Côté positif, l’interface est jugée claire, la courbe d’apprentissage courte et la qualité des exports d’assets très appréciée. Les développeurs soulignent surtout la fin des captures d’écran annotées et des questions répétitives sur une valeur de marge.
Les critiques portent principalement sur trois aspects. D’abord le coût, qui grimpe vite quand l’équipe grandit. Ensuite la synchronisation, qui reste manuelle : si le designer oublie de republier, Zeplin affiche une version dépassée. Enfin, le code généré sert de base de travail plutôt que de code prêt à coller, surtout pour des mises en page complexes.
Notre lecture : Zeplin reste un excellent outil de discipline d’équipe. Il oblige à formaliser ce qui est validé, et c’est souvent ce cadre, plus que la technologie elle-même, qui fait gagner du temps.
Zeplin ou zeppelin : éviter la confusion
Le nom de l’application est un clin d’œil au dirigeable, avec une orthographe simplifiée. Les recherches mélangent donc parfois l’outil, les ballons dirigeables et le groupe Led Zeppelin. Si votre recherche concerne la conception d’interfaces, la collaboration entre designers et développeurs ou l’export de maquettes, c’est bien de Zeplin, le logiciel, qu’il s’agit. Le logo, un petit dirigeable jaune, entretient d’ailleurs volontairement ce jeu de mots.
Zeplin est-il gratuit ?
Oui, Zeplin propose une formule gratuite, limitée à un seul projet actif. Elle suffit pour tester l’outil ou gérer un petit projet personnel. Dès que l’équipe travaille sur plusieurs produits en parallèle, il faut passer à une offre payante, facturée par siège.
Zeplin fonctionne-t-il avec Figma ?
Oui. Un plugin Figma permet d’exporter des frames vers un projet Zeplin en quelques clics. Les styles, les composants et les assets sont récupérés automatiquement, puis les développeurs consultent les spécifications dans Zeplin sans avoir besoin d’un accès au fichier Figma.
Faut-il savoir coder pour utiliser Zeplin ?
Non. Le designer publie ses écrans sans écrire une ligne de code. Les extraits CSS, Swift, Kotlin ou React Native générés par l’outil s’adressent aux développeurs, mais un chef de projet peut naviguer dans les écrans, commenter et suivre les versions sans compétence technique.
Pourquoi certains écrivent zeplin zeplin ?
La répétition vient le plus souvent d’une saisie rapide ou d’une recherche qui veut distinguer l’application Zeplin du dirigeable zeppelin. Dans tous les cas, la personne cherche presque toujours l’outil de passation design vers développement édité par Zeplin, Inc.
Zeplin est-il encore utile si l’équipe utilise le Dev Mode de Figma ?
Cela dépend de la taille de l’équipe. Le Dev Mode couvre l’inspection des maquettes, mais Zeplin garde l’avantage d’un espace figé et versionné, séparé du fichier de travail des designers. Les organisations qui livrent plusieurs applications ou qui veulent un historique clair des écrans validés y trouvent encore un intérêt réel.
