Une mise en page qui reste adaptative.
Les stacks et les contraintes bougent ensemble quand le frame est redimensionné.
Vous changez ? Votre fichier .fig s’ouvre avec ses composants intacts Concevez-le une fois.
Concevez-le une fois.
Livrez-le en code.
Tout ce que vous attendez d’un outil de design, plus l’étape que les autres outils laissent aux développeurs. Approuvez un frame et exportez un projet React, HTML/CSS ou Vue construit à partir de votre mise en page et de vos composants. Moins de passation, moins de reconstruction.
- Gratuit pendant l’accès anticipé
- Ouvre vos fichiers .fig existants
- Les développeurs inspectent le même fichier
import styles from "./BookingCard.module.css";
export function BookingCard({ stay }: { stay: Stay }) {
return (
<article className={styles.card}>
<img className={styles.image} src={stay.photo} alt="" />
<div className={styles.text}>
<h3 className={styles.title}>{stay.name}</h3>
<p className={styles.meta}>{stay.meta}</p>
</div>
<div className={styles.row}>
<strong className={styles.price}>{stay.total}</strong>
<button className={styles.button}>Reserve</button>
</div>
</article>
);
}
Généré à partir du frame approuvé · BookingCard.tsx
Exporter vers React HTML/CSS VueExtraits Dev Mode SwiftUI Jetpack ComposeOuvrir .fig
Changer d’outil
Vos fichiers emménagent. Rien n’est aplati.
Déposez un fichier .fig. Auto layout, composants, variantes, variables et liens de prototype arrivent sous forme d’objets modifiables, pas d’images. Gardez vos anciens fichiers comme archive aussi longtemps que vous le souhaitez.
Importer votre fichier .figmorrow-audio.figFichier d’exemple · 48 frames
Prêt- Frames en auto layout→ Stacks126
- Composants et variantes→ Composants32
- Variables · 2 modes→ Variables64
- Liens de prototype→ Connexions de flux18
Chiffres issus d’un fichier d’exemple. Vérifiez les frames les plus importants avant de migrer un projet entier.
La partie que les autres outils passent à quelqu’un d’autre
Approuvé signifie prêt pour le code.
Les développeurs ne mesurent pas et ne reconstruisent pas. Ils relisent un projet généré à partir du frame que vous avez approuvé : composants, styles et ressources, prêts à être branchés sur de vraies données.
Morrow Audio/Paiement · Desktop● Approuvé
Carte de paiement · 440 × auto · Auto layout ↓ 24PaiementÉtape 2 sur 3
- Casque Aero LiteViolet · ANC$128.00
- Étui de voyageBleu glacier$42.00
LivraisonStandard 3–5 joursGratuitExpress 1–2 jours$12.00
Code promo Appliquer- Sous-total
- $170.00
- Livraison
- $12.00
- Taxes
- $13.60
- Total
- $195.60
Cliquez sur n’importe quelle partie du design pour ouvrir son fichier
CheckoutCard.module.css
.card {
display: flex;
flex-direction: column;
gap: 24px;
padding: 32px;
width: 440px;
background: #ffffff;
border: 1px solid #dce3ff;
border-radius: 20px;
}
.header { display: flex; justify-content: space-between; }
.step { font-size: 13px; color: #6d6190; }
.items { display: flex; flex-direction: column; gap: 16px; }
.delivery { display: flex; flex-direction: column; gap: 8px; }
.summary { display: flex; flex-direction: column; gap: 8px; }
.total { font-weight: 700; }
.cta {
height: 48px;
border-radius: 12px;
background: #7c4dff;
color: #ffffff;
}
Construit à partir de vos calques
Frames, composants et textes arrivent sous forme d’éléments nommés et lisibles.
Un projet, pas un extrait
Téléchargez le frame en ZIP : composants, styles et ressources au même endroit.
Relire avant la mise en production
Traitez la sortie comme une pull request : lisez-la, branchez de vraies données, puis livrez.
Exemple de sortie, raccourci pour cette page.
Pourquoi changer
Tout ce que vous connaissez. Et la passation en plus, réglée.
Votre équipe garde le workflow qu’elle connaît déjà. Ce qui change, c’est ce qui se passe après l’approbation d’un frame.
FonctionnalitéAutres outils de designInlu
Multijoueur, curseurs en direct, commentairesAutres outils de design · OuiInlu · Oui
Composants, variantes, variables, modesAutres outils de design · OuiInlu · Oui
Auto layoutAutres outils de design · OuiInlu · Oui
Ouvrir vos fichiers .fig existantsAutres outils de design · Souvent uniquement leur propre formatInlu · .fig, structure intacte
Du code à partir d’un frame approuvéAutres outils de design · Inspecter les specs et copier des extraits, puis reconstruireInlu · Projets React, HTML/CSS et Vue, intégrés
Basé sur des outils de design populaires en octobre 2026 ; des plugins peuvent en couvrir une partie. Gardez votre ancien outil comme archive : n’importez que ce que vous voulez migrer.
Prototypes interactifs
Transformez des écrans en un flux fonctionnel.
Quatre écrans de paiement deviennent un flux cliquable en quatre étapes : connexions, variables, conditions et états, le tout sur le design source.
Quatre frames d’un paiement, conçus sur le même canevas.
Le prototype comme couche séparée
- Dupliquer Règlement pour Error et Loading → 6 frames
- Câbler à la main chaque frame et chaque variante → 7 liens
- Le total et le choix de livraison sont saisis en texte dans chaque frame
Dans Inlu
- Les états vivent dans un seul frame Règlement → 4 frames
- Une connexion par étape, une condition → 3 liens + 1 règle
- cartTotal et delivery sont conservés tout au long du flux
Tout ce sur quoi vous comptez
Rien de ce sur quoi vous comptez ne manque.
Auto layout, composants, variables et modes, comme votre équipe travaille déjà.
Radius · 12 · Gap · 16Un système. Tous les écrans.
Composants, variables et modes gardent alignées les décisions répétées.
La conversation reste attachée.
Les commentaires restent à côté de l’objet et de la décision qu’ils décrivent.
Collaboration
Designers et développeurs dans un seul fichier.
Curseurs en direct, salons vocaux, mode suivi et commentaires, avec des développeurs qui inspectent le vrai frame dans Dev Mode, pas une spec statique.
Salons vocaux
Parlez sans quitter le canevas.
Mode suivi
Voyez en direct la vue et la sélection d’un coéquipier.
Commentaires en contexte
Épinglez les retours à côté du travail qu’ils décrivent.
Tarifs
Commencez gratuitement. Grandissez avec votre équipe.
Un canevas pour le design, les prototypes et la sortie de code. Des offres pour les designers et pour les développeurs : voyez par où votre équipe commence.
Accès anticipé
Les prix et les limites ne sont pas encore définitifs. Tout ce qui figure sur cette page est gratuit tant qu'Inlu est en accès anticipé — parlez-nous-en si vous prévoyez un déploiement pour une équipe. Parlez-nous
Pour les designers et les équipes produit
Concevez, prototypez et relisez ensemble, puis transformez un frame approuvé en code.
Starter
Pour les particuliers et les petites équipes qui partent d'un canvas vierge — ou d'un fichier .fig qu'ils ont déjà.
Gratuit pendant l'accès anticipé
Commencer gratuitementInclus
- Un canvas vierge ou l'import de .fig
- Composants, variables et auto layout
- Prototypes sur le design source
- Curseurs en direct, salons vocaux et commentaires
Professional
Pour les équipes produit qui conçoivent ensemble chaque jour, du premier brouillon au frame approuvé.
Gratuit pendant l'accès anticipé
Commencer gratuitementTout Starter, plus
- Projets et fichiers illimités
- Dev Mode pour les développeurs de votre équipe
- Export de code : projets React, HTML/CSS et Vue
- Follow mode pour les revues et les présentations guidées
Pour les développeurs qui construisent à partir du design
Inspectez, copiez et exportez du code depuis le même fichier que celui de vos designers.
Free
Pour essayer Inlu sur un vrai projet et pour les projets personnels.
Gratuit pendant l'accès anticipé
Commencer gratuitementInclus
- Dev Mode : inspecter, mesurer et copier des extraits
- Export de code : React, HTML/CSS et Vue
- Connectez votre agent AI depuis Dev Mode
Pro
Pour les petites équipes qui livrent un seul produit.
Gratuit pendant l'accès anticipé
Commencer gratuitementTout Free, plus
- Projets et fichiers illimités
- REST API et webhooks
- Salons vocaux sur le canvas
Team
Pour les équipes avec un seul design system sur le web et les apps natives.
Gratuit pendant l'accès anticipé
Commencer gratuitementTout Pro, plus
- Bibliothèques partagées entre projets
- Code Connect : associez les composants de design à votre code
- Statuts « prêt pour le dev » et annotations
Enterprise
Pour les organisations avec revues de sécurité et processus d'achat.
Parlez-nous
Parlez-nousTout Team, plus
- Conditions sur mesure et facturation
- Onboarding avec l'équipe Inlu
- Revue de sécurité sur demande
FAQ
Des questions, des réponses directes.
Ce qu’il faut savoir avant de commencer.
Mes fichiers importés auront-ils le même rendu dans Inlu ?
Importez un fichier .fig qui vous appartient et Inlu vous montre ce qu’il a trouvé : les frames en auto layout, les composants et variantes, les variables et les liens de prototype arrivent sous forme d’objets modifiables, pas d’images aplaties. Vérifiez les frames les plus importants avant de migrer un projet entier.
Pouvons-nous essayer Inlu sans quitter notre outil actuel ?
Oui. Importez un projet, essayez-le avec votre équipe et laissez tout le reste où il est. Votre ancien outil peut rester l’archive.
Combien de temps faut-il à une équipe pour changer ?
Les frames, l’auto layout, les composants, les variables et les commentaires fonctionnent comme les designers les connaissent déjà : l’essentiel à apprendre, c’est donc la nouveauté, relire et exporter du code. Commencez par un projet et décidez ensuite.
Quel code Inlu exporte-t-il ?
L’export de code crée des projets React (TypeScript avec CSS Modules), HTML/CSS et Vue à partir d’un frame. Dev Mode ajoute des extraits par calque pour SwiftUI, UIKit, Jetpack Compose et Android XML.
Le code exporté est-il prêt pour la production ?
Traitez-le comme la pull request d’un coéquipier : il reprend votre mise en page, vos composants et vos ressources, mais il demande encore relecture, vraies données et tests avant la mise en production.
La sortie peut-elle utiliser nos propres composants ?
Avec Code Connect, vous associez les composants Inlu aux composants de votre base de code, afin que les développeurs voient votre vrai composant dans Dev Mode plutôt qu’un composant générique.
Combien coûte Inlu ?
Inlu est gratuit pendant l’accès anticipé. Les tarifs ne sont pas encore définitifs et nous les annoncerons avant tout paiement.
Comment l’équipe travaille-t-elle ensemble ?
Édition multijoueur, curseurs en direct, salons vocaux, mode suivi et commentaires épinglés sur le travail qu’ils décrivent.
Votre travail est la meilleure démo
Voyez votre propre design en code.
Importez un vrai projet .fig et vérifiez vous-même la sortie. Gratuit pendant l’accès anticipé.