Un layout que sigue siendo responsive.
Los stacks y las restricciones se mueven juntos al cambiar el tamaño del frame.
¿Cambias? Tu archivo .fig se abre con los componentes intactos Diséñalo una vez.
Diséñalo una vez.
Entrégalo como código.
Todo lo que esperas de una herramienta de diseño, más el paso que otras herramientas dejan en manos de los desarrolladores. Aprueba un frame y exporta un proyecto React, HTML/CSS o Vue creado a partir de tu layout y tus componentes. Menos traspasos, menos reconstrucción.
- Gratis durante el acceso anticipado
- Abre tus archivos .fig existentes
- Los desarrolladores inspeccionan el mismo archivo
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>
);
}
Generado a partir del frame aprobado · BookingCard.tsx
Exportar a React HTML/CSS VueSnippets de Dev Mode SwiftUI Jetpack ComposeAbrir .fig
Cambio de herramienta
Tus archivos se mudan. Nada se aplana.
Suelta un archivo .fig. Auto layout, componentes, variantes, variables y enlaces de prototipo llegan como objetos editables, no como imágenes. Conserva tus archivos antiguos como archivo histórico todo el tiempo que quieras.
Importa tu archivo .figmorrow-audio.figArchivo de ejemplo · 48 frames
Listo- Frames con auto layout→ Stacks126
- Componentes y variantes→ Componentes32
- Variables · 2 modos→ Variables64
- Enlaces de prototipo→ Conexiones de flujo18
Cifras de un archivo de ejemplo. Revisa los frames más importantes antes de migrar un proyecto entero.
La parte que otras herramientas traspasan
Aprobado significa listo para código.
Los desarrolladores no miden ni reconstruyen. Revisan un proyecto generado a partir del frame que aprobaste: componentes, estilos y recursos, listos para conectar con datos reales.
Morrow Audio/Pago · Escritorio● Aprobado
Tarjeta de pago · 440 × auto · Auto layout ↓ 24PagoPaso 2 de 3
- Auriculares Aero LiteVioleta · ANC$128.00
- Funda de viajeAzul hielo$42.00
EnvíoEstándar 3–5 díasGratisExprés 1–2 días$12.00
Código promocional Aplicar- Subtotal
- $170.00
- Envío
- $12.00
- Impuestos
- $13.60
- Total
- $195.60
Haz clic en cualquier parte del diseño para abrir su archivo
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;
}
Construido a partir de tus capas
Frames, componentes y textos llegan como elementos con nombre que puedes leer.
Un proyecto, no un snippet
Descarga el frame como ZIP: componentes, estilos y recursos en un solo lugar.
Revisa antes de publicar
Trata la salida como un pull request: léela, conecta datos reales y luego publica.
Salida de ejemplo, abreviada para esta página.
Por qué cambiar
Todo a lo que estás acostumbrado. Más el traspaso, resuelto.
Tu equipo conserva el flujo de trabajo que ya conoce. Lo que cambia es lo que ocurre después de aprobar un frame.
CapacidadOtras herramientas de diseñoInlu
Multijugador, cursores en vivo, comentariosOtras herramientas de diseño · SíInlu · Sí
Componentes, variantes, variables, modosOtras herramientas de diseño · SíInlu · Sí
Auto layoutOtras herramientas de diseño · SíInlu · Sí
Abre tus archivos .fig existentesOtras herramientas de diseño · Normalmente solo su propio formatoInlu · .fig, con la estructura intacta
Código a partir de un frame aprobadoOtras herramientas de diseño · Inspeccionar especificaciones y copiar snippets, y luego reconstruirInlu · Proyectos React, HTML/CSS y Vue, integrados
Basado en herramientas de diseño populares a octubre de 2026; los plugins pueden añadir parte de esto. Conserva tu herramienta anterior como archivo histórico: importa solo lo que quieras migrar.
Prototipos interactivos
Convierte pantallas en un flujo que funciona.
Cuatro pantallas de pago se convierten en un flujo clicable en cuatro pasos: conexiones, variables, condiciones y estados, todo sobre el diseño original.
Cuatro frames de un pago, diseñados en el mismo lienzo.
Prototipo como capa aparte
- Duplicar Pago para Error y Loading → 6 frames
- Conectar a mano cada frame y cada variante → 7 enlaces
- El total y la opción de envío se escriben como texto en cada frame
En Inlu
- Los estados viven dentro de un único frame de Pago → 4 frames
- Una conexión por paso, una condición → 3 enlaces + 1 regla
- cartTotal y delivery se mantienen durante todo el flujo
Todo en lo que confías
No falta nada de lo que necesitas.
Auto layout, componentes, variables y modos, tal como tu equipo ya trabaja.
Radius · 12 · Gap · 16Un sistema. Todas las pantallas.
Componentes, variables y modos mantienen alineadas las decisiones repetidas.
La conversación sigue pegada al diseño.
Los comentarios se quedan junto al objeto y la decisión que describen.
Colaboración
Diseñadores y desarrolladores en un solo archivo.
Cursores en vivo, salas de voz, modo de seguimiento y comentarios, con desarrolladores que inspeccionan el frame real en Dev Mode, no una especificación estática.
Salas de voz
Habla sin salir del lienzo.
Modo de seguimiento
Ve en vivo la vista y la selección de un compañero.
Comentarios en contexto
Fija el feedback junto al trabajo que describe.
Precios
Empieza gratis. Crece con tu equipo.
Un lienzo para diseño, prototipos y salida de código. Planes para diseñadores y para desarrolladores: mira por dónde empieza tu equipo.
Acceso anticipado
Los precios y límites aún no son definitivos. Todo lo de esta página es gratis mientras Inlu esté en acceso anticipado; habla con nosotros si planificas para un equipo. Habla con nosotros
Para diseñadores y equipos de producto
Diseñad, prototipad y revisad juntos, y luego llevad un marco aprobado a código.
Starter
Para personas y equipos pequeños que empiezan desde un lienzo vacío o desde un archivo .fig que ya tienen.
Gratis durante el acceso anticipado
Empieza gratisIncluye
- Un lienzo vacío o importación de .fig
- Componentes, variables y auto layout
- Prototipos sobre el diseño original
- Cursores en vivo, salas de voz y comentarios
Professional
Para equipos de producto que diseñan juntos cada día, del primer borrador al marco aprobado.
Gratis durante el acceso anticipado
Empieza gratisTodo lo de Starter, más
- Proyectos y archivos ilimitados
- Dev Mode para los desarrolladores de tu equipo
- Exportación de código: proyectos React, HTML/CSS y Vue
- Modo seguimiento para revisiones y presentaciones guiadas
Para desarrolladores que construyen a partir del diseño
Inspecciona, copia y exporta código desde el mismo archivo en el que trabajan tus diseñadores.
Free
Para probar Inlu en un proyecto real y para proyectos personales.
Gratis durante el acceso anticipado
Empieza gratisIncluye
- Dev Mode: inspecciona, mide y copia fragmentos
- Exportación de código: React, HTML/CSS y Vue
- Conecta tu agente de AI desde Dev Mode
Pro
Para equipos pequeños que lanzan un producto.
Gratis durante el acceso anticipado
Empieza gratisTodo lo de Free, más
- Proyectos y archivos ilimitados
- REST API y webhooks
- Salas de voz en el lienzo
Team
Para equipos con un único sistema de diseño en web y apps nativas.
Gratis durante el acceso anticipado
Empieza gratisTodo lo de Pro, más
- Bibliotecas compartidas entre proyectos
- Code Connect: vincula los componentes de diseño con tu código
- Estados «listo para desarrollo» y anotaciones
Enterprise
Para organizaciones con revisiones de seguridad y procesos de compras.
Habla con nosotros
Habla con nosotrosTodo lo de Team, más
- Condiciones personalizadas y facturación
- Onboarding con el equipo de Inlu
- Revisión de seguridad bajo petición
FAQ
Preguntas, respondidas sin rodeos.
Lo que conviene saber antes de empezar.
¿Mis archivos importados se verán igual en Inlu?
Importa un archivo .fig que te pertenezca e Inlu te muestra lo que ha encontrado: los frames con auto layout, los componentes y variantes, las variables y los enlaces de prototipo llegan como objetos editables, no como imágenes aplanadas. Revisa los frames más importantes antes de migrar un proyecto entero.
¿Podemos probar Inlu sin dejar nuestra herramienta actual?
Sí. Importa un proyecto, pruébalo con tu equipo y deja todo lo demás donde está. Tu herramienta anterior puede seguir siendo el archivo histórico.
¿Cuánto tarda un equipo en cambiar?
Los frames, el auto layout, los componentes, las variables y los comentarios funcionan como los diseñadores ya los conocen, así que casi todo lo nuevo por aprender es la parte de revisar y exportar código. Empieza con un proyecto y decide a partir de ahí.
¿Qué código exporta Inlu?
La exportación de código crea proyectos React (TypeScript con CSS Modules), HTML/CSS y Vue a partir de un frame. Dev Mode añade snippets por capa para SwiftUI, UIKit, Jetpack Compose y Android XML.
¿El código exportado está listo para producción?
Trátalo como un pull request de un compañero: incluye tu layout, tus componentes y tus recursos, y aun así necesita revisión, datos reales y pruebas antes de publicarse.
¿La salida puede usar nuestros propios componentes?
Con Code Connect asocias los componentes de Inlu con componentes de tu base de código, de modo que los desarrolladores ven tu componente real en Dev Mode en lugar de uno genérico.
¿Cuánto cuesta Inlu?
Inlu es gratis durante el acceso anticipado. Los precios aún no son definitivos y los anunciaremos antes de aplicar cualquier cargo.
¿Cómo trabaja el equipo en conjunto?
Edición multijugador, cursores en vivo, salas de voz, modo de seguimiento y comentarios fijados al trabajo que describen.
Tu trabajo es la mejor demo
Mira tu propio diseño como código.
Importa un proyecto .fig real y comprueba tú mismo la salida. Gratis durante el acceso anticipado.