Passation aux développeurs
Export de code et Dev Mode
Cliquez sur n’importe quel élément et copiez du code prêt à l’emploi en sept formats — CSS, React, Tailwind, SwiftUI, UIKit, Jetpack Compose et Android XML — directement depuis le design que votre équipe édite déjà .
- Sept formats de code, Ã un clic dans Dev Mode
- Inspectez espacements, couleurs et typographie exacts sur chaque élément
- Exportez PNG, JPEG, SVG et PDF — ZIP par lots compris
Toutes les surfaces de passation au même endroit
- CSS
- React
- Tailwind
- SwiftUI
- UIKit
- Jetpack Compose
- Android XML
- Inspection espacements et typographie
- Variables avec modes
- Annotations Ready-for-Dev
- Export PNG / JPEG / SVG / PDF
- Export ZIP par lots
- 7
- formats de code dans Dev Mode : CSS, React, Tailwind, SwiftUI, UIKit, Compose, Android XML
- 4
- formats d’assets en sortie d’éditeur : PNG, JPEG, SVG et PDF
- 0
- cote à retracer ni document de spec à écrire — le design lui-même est la spec
- $12
- par siège d’éditeur sur Professional débloque Dev Mode pour toute l’équipe
Une semaine de passation avec Dev Mode
Lundi — le design arrive
Une designer marque les frames terminées Ready-for-Dev. Personne n’écrit de document de spécification à part, parce que le fichier lui-même est sur le point de devenir la spec.
Mardi — les ingénieurs inspectent
Les développeurs ouvrent Dev Mode, parcourent les éléments et lisent espacements exacts, styles de texte et valeurs de variables. Personne ne mesure une capture d’écran à la règle.
Milieu de semaine — le code coule
Chaque composant est copié dans le format de l’équipe : Tailwind pour l’app web, SwiftUI et Compose pour le duo mobile — tous générés depuis le même design.
Vendredi — assets et automatisation
Icônes et images s’exportent en SVG et PNG dans un seul ZIP. L’outil en ligne de commande couvre les exports scriptés, et MCP laisse les agents IA générer du code depuis le même fichier.
Le design est la spec
La passation traditionnelle est une traduction avec pertes : le designer aplatit son intention en captures d’écran, le développeur rétro-conçoit les captures en nombres, et chaque étape ajoute sa marge d’erreur. Tuvi génère le code depuis le design lui-même — les mêmes paddings, couleurs, styles de texte et variables que le designer a définis — de sorte que ce que reçoit l’ingénierie, ce sont des données, pas une interprétation. Les frames en auto-layout ressortent comme le flexbox qu’elles sont déjà en pratique ; les variables avec modes restent des design tokens au lieu de s’effondrer en valeurs codées en dur.
Le cadrage honnête : le code généré est un point de départ fidèle, pas une fonctionnalité finie. Il élimine le travail de transcription — mesurer, retaper, les allers-retours « c’est 12 ou 16 ? » — et laisse aux ingénieurs la vraie ingénierie : brancher l’état, le comportement et les conventions. C’est exactement cette répartition qui fait que les équipes lui font confiance.
Une passation qui dépasse l’éditeur
Dev Mode est la surface interactive, mais la passation ne s’arrête pas au clic : un outil en ligne de commande exporte des rendus pour la documentation et la CI, et l’intégration MCP permet à un assistant de code IA de demander du vrai code au vrai design — un agent qui implémente un écran travaille ainsi depuis la même source de vérité que celle que vos designers éditent.
Autour du code, il y a le workflow : les annotations Ready-for-Dev marquent la stabilité, les commentaires portent le contexte que les nombres ne disent pas, et l’historique des versions répond à « qu’est-ce qui a changé depuis que j’ai construit ça ». La passation cesse d’être une réunion hebdomadaire et devient une propriété du fichier.
Questions fréquentes
Le code généré est-il prêt pour la production ?
Il est fidèle : vrais paddings, couleurs, styles de texte et variables, avec l’auto-layout exprimé en flexbox. Vous l’intégrez ensuite à vos composants, à votre nommage et à votre gestion d’état — Dev Mode supprime la transcription, pas l’ingénierie.
Quels plans incluent Dev Mode ?
Dev Mode et la génération de code arrivent avec Professional et Organization. L’export d’assets — PNG, JPEG, SVG, PDF et ZIP par lots — est disponible depuis l’éditeur sur chaque plan.
Les développeurs doivent-ils connaître un outil de design pour s’en servir ?
Non. Un développeur ouvre le fichier partagé dans le navigateur, clique sur l’élément qu’il construit et lit les valeurs exactes ou copie le code dans son format. Pas de logiciel supplémentaire, pas de licence Figma — et consulter les designs est gratuit sur chaque plan.
Des outils IA peuvent-ils piloter la génération de code ?
Oui. Via MCP, un assistant IA peut lire la structure du design et les propriétés des éléments, générer du code depuis n’importe quel élément et rendre un aperçu PNG pour vérifier son travail — le tout depuis le même fichier que votre équipe édite.
Comment les designers signalent-ils ce qui est prêt à construire ?
Avec les annotations Ready-for-Dev sur les frames, appuyées par des commentaires en contexte. Les ingénieurs voient un contrat explicite, frame par frame, au lieu de deviner quelles parties d’un fichier en cours sont stables.