Dev Mode sur le vrai frame
Mesurez les espacements, lisez les variables et copiez des extraits par couche. Les statuts Ready for dev, les annotations et la comparaison des modifications indiquent quoi construire ensuite.
Nouveau Connectez votre agent IA depuis Dev Mode Arrêtez de retaper les maquettes.
Arrêtez de retaper les maquettes.
Construisez à partir du vrai design.
Inlu met entre les mains des développeurs le frame approuvé lui-même : inspectez-le dans Dev Mode, copiez des extraits de code pour le web et le natif, exportez un projet React, HTML/CSS ou Vue, et laissez votre agent IA lire directement le design.
- Gratuit pendant l’accès anticipé
- Projets React, HTML/CSS et Vue
- Extraits de code pour SwiftUI, Jetpack Compose et plus encore
acme-ds / Billing / PlanCard● Ready for dev
Inspecter
- Largeur
- 320 Fill
- Marge intérieure
- 24
- Espacement
- 16
- Rayon
- 16
- Remplissage
- #FFFFFF
.plan-card {
display: flex;
flex-direction: column;
gap: 16px;
width: 320px;
padding: 24px;
border-radius: 16px;
background: #ffffff;
}
<div className="plan-card">
<div className="plan-card__top">
<span>Pro plan</span>
<span className="badge">Popular</span>
</div>
<p className="price">$24 <small>/ month</small></p>
<button>Choose plan</button>
</div>
VStack(alignment: .leading, spacing: 16) {
HStack {
Text("Pro plan")
Spacer()
Text("Popular")
}
Text("$24 / month")
Button("Choose plan") {}
}
.padding(24)
.frame(width: 320)
.background(Color.white, in: .rect(cornerRadius: 16))
Column(
modifier = Modifier
.width(320.dp)
.background(Color.White, RoundedCornerShape(16.dp))
.padding(24.dp),
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
Text("Pro plan")
Text("$24 / month")
Button(onClick = {}) { Text("Choose plan") }
}
Changez le langage de l’extrait : la même couche sélectionnée, générée pour chaque plateforme.
Export de code
- React
- HTML/CSS
- Vue
- Next.js
- SwiftUI
- UIKit
- Jetpack Compose
- Android XML
Conçu pour ceux qui le livrent
Le design, sous forme de données que vous pouvez vraiment exploiter.
Pas de captures d’écran ni d’annotations de mesures. Les développeurs travaillent à partir du même fichier que celui approuvé par les designers — chaque valeur, état et ressource est à un clic.
Des projets, pas seulement des extraits
Exportez un frame approuvé sous forme de projet React (TypeScript + CSS Modules), HTML/CSS ou Vue et téléchargez-le en ZIP.
Vos composants, mis en correspondance
Code Connect associe les composants de design aux composants de votre base de code, afin que Dev Mode affiche le composant que votre équipe utilise déjà.
Agents IA
Connectez votre agent IA depuis Dev Mode.
Inlu exécute un serveur MCP : des agents de code comme Claude Code ou Cursor peuvent ainsi lire le fichier sur lequel vous travaillez au lieu de deviner à partir d’une capture d’écran.
- Ouvrez Dev ModeSélectionnez le frame ou le composant que vous allez construire.
- Connectez votre agentUtilisez « Connect AI agent » dans Dev Mode et suivez la configuration de votre outil.
- Posez vos questions avec le contexteL’agent lit la structure, les variables, les annotations et le code généré pour cette sélection.
Ce que l’agent peut lire
- Structure du fichier et des frames
- Un nœud sélectionné et ses propriétés
- Code généré pour un nœud
- Variables
- Annotations et statut Ready for dev
- Images rendues d’un nœud
Disponible pendant l’accès anticipé. Les détails de configuration se trouvent dans Dev Mode.
API et webhooks
Branchez le design à votre outillage.
Une REST API pour les fichiers, commentaires, composants, styles, variables et images, avec OAuth. Les webhooks informent vos systèmes dès que quelque chose change.
Ressources REST
- /v1/files
- /v1/comments
- /v1/components
- /v1/styles
- /v1/variables
- /v1/versions
- /v1/images
- /v1/dev_resources
Événements webhook
- FILE_UPDATE
- FILE_VERSION_UPDATE
- FILE_DELETE
- LIBRARY_PUBLISH
- FILE_COMMENT
- DEV_MODE_STATUS_UPDATE
Même fichier, même salle
Faites la revue avec les designers là où se fait le travail.
Commentaires sur l’objet
Posez votre question sur un état ou une valeur directement sur la couche concernée.
Salons vocaux et mode suivi
Parcourez un flux ensemble, sans appel séparé ni partage d’écran.
Curseurs en direct
Voyez qui regarde quoi pendant la finalisation d’un frame.
Gratuit pendant l’accès anticipé.
Les forfaits pour développeurs figurent sur la page des tarifs. Les prix ne sont pas encore définitifs et rien n’est facturé pendant l’accès anticipé.
FAQ
Les questions que les ingénieurs posent en premier
Inlu écrit-il dans notre dépôt ?
Non. Vous copiez des extraits ou téléchargez un projet exporté et décidez de ce qui entre dans votre base de code. Inlu ne pousse rien dans vos dépôts.
Pouvons-nous modifier le code exporté ?
Oui. Les fichiers exportés sont du code source brut, sans runtime Inlu. Traitez-les comme la pull request d’un collègue : relisez-les, branchez de vraies données et adaptez-les.
Quels langages et frameworks sont pris en charge ?
L’export de code génère des projets React (TypeScript + CSS Modules), HTML/CSS et Vue. Les extraits Dev Mode couvrent CSS, HTML, React, Vue, SwiftUI, UIKit, Jetpack Compose et Android XML.
En quoi est-ce différent de Figma Dev Mode ?
Les deux affichent des extraits pour la couche inspectée. Inlu peut en plus exporter un frame entier sous forme de projet téléchargeable et ouvre vos fichiers .fig existants. Consultez la comparaison complète. Comparaison complète →
Les développeurs ont-ils besoin d’un siège payant ?
Pas pendant l’accès anticipé : tout est gratuit. Les forfaits et prix définitifs seront annoncés avant toute facturation.
Construisez votre prochain écran à partir du vrai design.
Ouvrez un fichier .fig, inspectez un frame dans Dev Mode et exportez-le. Gratuit pendant l’accès anticipé.