Layout, das responsiv bleibt.
Stacks und Constraints bewegen sich zusammen, wenn die Größe des Frames geändert wird.
Wechsel? Deine .fig-Datei öffnet sich mit intakten Komponenten Einmal gestalten.
Einmal gestalten.
Als Code ausliefern.
Alles, was du von einem Design-Tool erwartest – plus der Schritt, den andere Tools den Entwicklern überlassen. Gib einen Frame frei und exportiere ein React-, HTML/CSS- oder Vue-Projekt, das aus deinem Layout und deinen Komponenten entsteht. Weniger Übergabe, weniger Neubauen.
- Kostenlos während des Early Access
- Öffnet deine bestehenden .fig-Dateien
- Entwickler inspizieren dieselbe Datei
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>
);
}
Aus dem freigegebenen Frame generiert · BookingCard.tsx
Exportieren als React HTML/CSS VueDev Mode Snippets SwiftUI Jetpack ComposeÖffnen .fig
Tool-Wechsel
Deine Dateien ziehen um. Nichts wird plattgedrückt.
Zieh eine .fig-Datei hinein. Auto layout, Komponenten, Varianten, Variablen und Prototyp-Verknüpfungen kommen als bearbeitbare Objekte an, nicht als Bilder. Behalte deine alten Dateien als Archiv, so lange du willst.
Deine .fig-Datei importierenmorrow-audio.figBeispieldatei · 48 Frames
Bereit- Auto-layout-Frames→ Stacks126
- Komponenten & Varianten→ Komponenten32
- Variablen · 2 Modi→ Variablen64
- Prototyp-Verknüpfungen→ Flow-Verbindungen18
Zahlen aus einer Beispieldatei. Prüfe die wichtigsten Frames, bevor du ein ganzes Projekt umziehst.
Der Teil, den andere Tools übergeben
Freigegeben heißt bereit für Code.
Entwickler messen nicht nach und bauen nicht neu. Sie prüfen ein Projekt, das aus dem von dir freigegebenen Frame generiert wurde – Komponenten, Styles und Assets, bereit für die Anbindung echter Daten.
Morrow Audio/Checkout · Desktop● Freigegeben
Checkout-Karte · 440 × auto · Auto layout ↓ 24KasseSchritt 2 von 3
- Aero Lite KopfhörerViolett · ANC$128.00
- ReiseetuiEisblau$42.00
LieferungStandard 3–5 TageGratisExpress 1–2 Tage$12.00
Gutscheincode Anwenden- Zwischensumme
- $170.00
- Lieferung
- $12.00
- Steuer
- $13.60
- Gesamt
- $195.60
Klicke auf einen beliebigen Teil des Designs, um seine Datei zu öffnen
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;
}
Aus deinen Ebenen gebaut
Frames, Komponenten und Texte kommen als benannte, lesbare Elemente an.
Ein Projekt, kein Snippet
Lade den Frame als ZIP herunter: Komponenten, Styles und Assets an einem Ort.
Prüfen vor dem Release
Behandle die Ausgabe wie einen Pull Request: lesen, echte Daten anbinden, dann ausliefern.
Beispielausgabe, für diese Seite gekürzt.
Warum wechseln
Alles, was du gewohnt bist. Plus die erledigte Übergabe.
Dein Team behält den Workflow, den es kennt. Anders ist, was nach der Freigabe eines Frames passiert.
FunktionAndere Design-ToolsInlu
Multiplayer, Live-Cursor, KommentareAndere Design-Tools · JaInlu · Ja
Komponenten, Varianten, Variablen, ModiAndere Design-Tools · JaInlu · Ja
Auto layoutAndere Design-Tools · JaInlu · Ja
Deine bestehenden .fig-Dateien öffnenAndere Design-Tools · Meist nur das eigene FormatInlu · .fig, mit intakter Struktur
Code aus einem freigegebenen FrameAndere Design-Tools · Specs inspizieren und Snippets kopieren, dann neu bauenInlu · React-, HTML/CSS- und Vue-Projekte, direkt integriert
Basierend auf gängigen Design-Tools, Stand Oktober 2026; Plugins können einiges davon ergänzen. Behalte dein altes Tool als Archiv – importiere nur, was du umziehen willst.
Interaktive Prototypen
Aus Screens wird ein funktionierender Flow.
Vier Checkout-Screens werden in vier Schritten zu einem klickbaren Flow: Verbindungen, Variablen, Bedingungen und Zustände – alles direkt am Quelldesign.
Vier Frames eines Checkouts, gestaltet auf demselben Canvas.
Prototyp als separate Ebene
- Zahlung für Error und Loading duplizieren → 6 Frames
- Jeden Frame und jede Variante von Hand verdrahten → 7 Verknüpfungen
- Summe und Lieferwahl werden in jedem Frame als Text eingetippt
In Inlu
- Zustände leben in einem einzigen Zahlungs-Frame → 4 Frames
- Eine Verbindung pro Schritt, eine Bedingung → 3 Verknüpfungen + 1 Regel
- cartTotal und delivery werden durch den gesamten Flow getragen
Alles, worauf du dich verlässt
Nichts, worauf du dich verlässt, fehlt.
Auto layout, Komponenten, Variablen und Modi – so, wie dein Team schon arbeitet.
Radius · 12 · Gap · 16Ein System. Jeder Screen.
Komponenten, Variablen und Modi halten wiederkehrende Entscheidungen konsistent.
Die Diskussion bleibt dran.
Kommentare sitzen direkt neben dem Objekt und der Entscheidung, die sie beschreiben.
Zusammenarbeit
Designer und Entwickler in einer Datei.
Live-Cursor, Voice-Räume, Follow-Modus und Kommentare – und Entwickler inspizieren im Dev Mode den echten Frame, keine statische Spec.
Voice-Räume
Sprich, ohne das Canvas zu verlassen.
Follow-Modus
Sieh Viewport und Auswahl eines Teammitglieds live.
Kommentare im Kontext
Hefte Feedback direkt neben die Arbeit, die es beschreibt.
Preise
Kostenlos starten. Mit deinem Team wachsen.
Ein Canvas für Design, Prototypen und Code-Ausgabe. Pläne für Designer und für Entwickler – sieh, wo dein Team startet.
Early Access
Preise und Limits stehen noch nicht fest. Alles auf dieser Seite ist kostenlos, solange Inlu im Early Access ist — sprich uns an, wenn du für ein Team planst. Sprich mit uns
Für Designer:innen und Produktteams
Gestaltet, prototypt und prüft gemeinsam und überführt dann einen freigegebenen Frame in Code.
Starter
Für Einzelpersonen und kleine Teams, die mit einem leeren Canvas starten — oder mit einer .fig-Datei, die du schon hast.
Kostenlos während Early Access
Kostenlos startenEnthält
- Ein leeres Canvas oder .fig-Import
- Komponenten, Variablen und Auto Layout
- Prototypen direkt am Quelldesign
- Live-Cursor, Sprachräume und Kommentare
Professional
Für Produktteams, die jeden Tag gemeinsam gestalten, vom ersten Entwurf bis zum freigegebenen Frame.
Kostenlos während Early Access
Kostenlos startenAlles aus Starter, plus
- Unbegrenzte Projekte und Dateien
- Dev Mode für die Entwickler:innen in deinem Team
- Code-Export: React-, HTML/CSS- und Vue-Projekte
- Follow-Modus für Reviews und Walkthroughs
Für Entwickler:innen, die aus dem Design bauen
Inspiziere, kopiere und exportiere Code aus derselben Datei, in der deine Designer:innen arbeiten.
Free
Zum Ausprobieren von Inlu an einem echten Projekt und für Nebenprojekte.
Kostenlos während Early Access
Kostenlos startenEnthält
- Dev Mode: inspizieren, messen und Snippets kopieren
- Code-Export: React, HTML/CSS und Vue
- Verbinde deinen AI-Agenten über Dev Mode
Pro
Für kleine Teams, die ein Produkt ausliefern.
Kostenlos während Early Access
Kostenlos startenAlles aus Free, plus
- Unbegrenzte Projekte und Dateien
- REST API und Webhooks
- Sprachräume auf dem Canvas
Team
Für Teams mit einem Designsystem über Web- und native Apps hinweg.
Kostenlos während Early Access
Kostenlos startenAlles aus Pro, plus
- Geteilte Bibliotheken über Projekte hinweg
- Code Connect: ordne Designkomponenten deinem Code zu
- Status „Bereit für Dev“ und Annotationen
Enterprise
Für Organisationen mit Security-Reviews und Einkaufsprozessen.
Sprich mit uns
Sprich mit unsAlles aus Team, plus
- Individuelle Konditionen und Rechnungsstellung
- Onboarding mit dem Inlu-Team
- Security-Review auf Anfrage
FAQ
Fragen, direkt beantwortet.
Was du vor dem Start wissen solltest.
Sehen meine importierten Dateien in Inlu genauso aus?
Importiere eine .fig-Datei, die dir gehört, und Inlu zeigt, was es gefunden hat: Auto-layout-Frames, Komponenten und Varianten, Variablen und Prototyp-Verknüpfungen kommen als bearbeitbare Objekte an, nicht als flache Bilder. Prüfe die wichtigsten Frames, bevor du ein ganzes Projekt umziehst.
Können wir Inlu testen, ohne unser aktuelles Tool zu verlassen?
Ja. Importiere ein Projekt, probiere es mit deinem Team aus und lass alles andere, wo es ist. Dein altes Tool kann das Archiv bleiben.
Wie lange braucht ein Team für den Wechsel?
Frames, Auto layout, Komponenten, Variablen und Kommentare funktionieren so, wie Designer sie schon kennen. Das meiste Neue ist daher das Prüfen und Exportieren von Code. Starte mit einem Projekt und entscheide dann weiter.
Welchen Code exportiert Inlu?
Der Code-Export erstellt aus einem Frame React- (TypeScript mit CSS Modules), HTML/CSS- und Vue-Projekte. Dev Mode ergänzt Snippets pro Ebene für SwiftUI, UIKit, Jetpack Compose und Android XML.
Ist der exportierte Code produktionsreif?
Behandle ihn wie einen Pull Request eines Teamkollegen: Er enthält dein Layout, deine Komponenten und Assets, braucht aber vor dem Release noch Review, echte Daten und Tests.
Kann die Ausgabe unsere eigenen Komponenten nutzen?
Mit Code Connect ordnest du Inlu-Komponenten Komponenten in deiner Codebasis zu, sodass Entwickler im Dev Mode deine echte Komponente sehen statt einer generischen.
Was kostet Inlu?
Inlu ist während des Early Access kostenlos. Die Preise stehen noch nicht fest, und wir kündigen sie an, bevor Kosten entstehen.
Wie arbeitet das Team zusammen?
Multiplayer-Bearbeitung, Live-Cursor, Voice-Räume, Follow-Modus und Kommentare, die an der Arbeit haften, die sie beschreiben.
Deine Arbeit ist die beste Demo
Sieh dein eigenes Design als Code.
Importiere ein echtes .fig-Projekt und prüfe die Ausgabe selbst. Kostenlos während des Early Access.