Um layout que continua responsivo.
Stacks e constraints se movem juntos quando o frame é redimensionado.
Trocando? Seu arquivo .fig abre com os componentes intactos Crie uma vez.
Crie uma vez.
Entregue como código.
Tudo o que você espera de uma ferramenta de design, mais a etapa que outras ferramentas deixam para os desenvolvedores. Aprove um frame e exporte um projeto React, HTML/CSS ou Vue criado a partir do seu layout e dos seus componentes. Menos handoff, menos retrabalho.
- Grátis durante o acesso antecipado
- Abre seus arquivos .fig existentes
- Desenvolvedores inspecionam o mesmo arquivo
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>
);
}
Gerado a partir do frame aprovado · BookingCard.tsx
Exportar para React HTML/CSS VueSnippets do Dev Mode SwiftUI Jetpack ComposeAbrir .fig
Trocando de ferramenta
Seus arquivos se mudam. Nada fica achatado.
Solte um arquivo .fig. Auto layout, componentes, variantes, variáveis e links de protótipo chegam como objetos editáveis, não como imagens. Mantenha seus arquivos antigos como arquivo morto pelo tempo que quiser.
Importe seu arquivo .figmorrow-audio.figArquivo de exemplo · 48 frames
Pronto- Frames com auto layout→ Stacks126
- Componentes e variantes→ Componentes32
- Variáveis · 2 modos→ Variáveis64
- Links de protótipo→ Conexões de fluxo18
Números de um arquivo de exemplo. Confira os frames mais importantes antes de migrar um projeto inteiro.
A parte que outras ferramentas repassam
Aprovado significa pronto para código.
Desenvolvedores não medem nem reconstroem. Eles revisam um projeto gerado a partir do frame que você aprovou: componentes, estilos e assets, prontos para conectar a dados reais.
Morrow Audio/Checkout · Desktop● Aprovado
Card de checkout · 440 × auto · Auto layout ↓ 24CheckoutEtapa 2 de 3
- Fones Aero LiteVioleta · ANC$128.00
- Estojo de viagemAzul gelo$42.00
EntregaPadrão 3–5 diasGrátisExpressa 1–2 dias$12.00
Código promocional Aplicar- Subtotal
- $170.00
- Entrega
- $12.00
- Impostos
- $13.60
- Total
- $195.60
Clique em qualquer parte do design para abrir o arquivo dela
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;
}
Construído a partir das suas camadas
Frames, componentes e textos chegam como elementos nomeados que você consegue ler.
Um projeto, não um snippet
Baixe o frame como ZIP: componentes, estilos e assets em um só lugar.
Revise antes de publicar
Trate a saída como um pull request: leia, conecte dados reais e só então publique.
Exemplo de saída, resumido para esta página.
Por que trocar
Tudo a que você está acostumado. Mais o handoff, resolvido.
Seu time mantém o fluxo de trabalho que já conhece. O que muda é o que acontece depois que um frame é aprovado.
RecursoOutras ferramentas de designInlu
Multiplayer, cursores ao vivo, comentáriosOutras ferramentas de design · SimInlu · Sim
Componentes, variantes, variáveis, modosOutras ferramentas de design · SimInlu · Sim
Auto layoutOutras ferramentas de design · SimInlu · Sim
Abra seus arquivos .fig existentesOutras ferramentas de design · Normalmente só o formato próprioInlu · .fig, com a estrutura intacta
Código a partir de um frame aprovadoOutras ferramentas de design · Inspecionar especificações e copiar snippets, depois reconstruirInlu · Projetos React, HTML/CSS e Vue, integrados
Com base em ferramentas de design populares em outubro de 2026; plugins podem adicionar parte disso. Mantenha sua ferramenta antiga como arquivo morto: importe só o que quiser migrar.
Protótipos interativos
Transforme telas em um fluxo funcional.
Quatro telas de checkout viram um fluxo clicável em quatro etapas: conexões, variáveis, condições e estados, tudo sobre o design original.
Quatro frames de um checkout, desenhados no mesmo canvas.
Protótipo como camada separada
- Duplicar Pagamento para Error e Loading → 6 frames
- Ligar à mão cada frame e cada variante → 7 links
- O total e a escolha de entrega são digitados como texto em cada frame
No Inlu
- Os estados ficam dentro de um único frame de Pagamento → 4 frames
- Uma conexão por etapa, uma condição → 3 links + 1 regra
- cartTotal e delivery são mantidos ao longo de todo o fluxo
Tudo em que você confia
Nada em que você confia está faltando.
Auto layout, componentes, variáveis e modos, do jeito que seu time já trabalha.
Radius · 12 · Gap · 16Um sistema. Todas as telas.
Componentes, variáveis e modos mantêm alinhadas as decisões repetidas.
A conversa continua anexada.
Os comentários ficam ao lado do objeto e da decisão que descrevem.
Colaboração
Designers e desenvolvedores em um só arquivo.
Cursores ao vivo, salas de voz, modo de acompanhamento e comentários, com desenvolvedores inspecionando o frame real no Dev Mode, não uma especificação estática.
Salas de voz
Converse sem sair do canvas.
Modo de acompanhamento
Veja ao vivo a viewport e a seleção de um colega.
Comentários em contexto
Fixe o feedback ao lado do trabalho que ele descreve.
Preços
Comece grátis. Cresça com o seu time.
Um canvas para design, protótipos e saída de código. Planos para designers e para desenvolvedores: veja por onde o seu time começa.
Acesso antecipado
Preços e limites ainda não são definitivos. Tudo nesta página é grátis enquanto o Inlu estiver em acesso antecipado — fale com a gente se você está planejando para um time. Fale com a gente
Para designers e times de produto
Projete, prototipe e revise juntos, e depois leve um frame aprovado para o código.
Starter
Para pessoas e times pequenos que começam de um canvas em branco — ou de um arquivo .fig que você já tem.
Grátis durante o acesso antecipado
Comece grátisInclui
- Um canvas em branco ou importação de .fig
- Componentes, variáveis e auto layout
- Protótipos sobre o design original
- Cursores ao vivo, salas de voz e comentários
Professional
Para times de produto que projetam juntos todos os dias, do primeiro rascunho ao frame aprovado.
Grátis durante o acesso antecipado
Comece grátisTudo do Starter, mais
- Projetos e arquivos ilimitados
- Dev Mode para os desenvolvedores do seu time
- Exportação de código: projetos React, HTML/CSS e Vue
- Modo de acompanhamento para revisões e apresentações
Para desenvolvedores que constroem a partir do design
Inspecione, copie e exporte código do mesmo arquivo em que seus designers trabalham.
Free
Para experimentar o Inlu em um projeto real e em projetos pessoais.
Grátis durante o acesso antecipado
Comece grátisInclui
- Dev Mode: inspecione, meça e copie snippets
- Exportação de código: React, HTML/CSS e Vue
- Conecte seu agente de AI pelo Dev Mode
Pro
Para times pequenos que entregam um único produto.
Grátis durante o acesso antecipado
Comece grátisTudo do Free, mais
- Projetos e arquivos ilimitados
- REST API e webhooks
- Salas de voz no canvas
Team
Para times com um único design system em web e apps nativos.
Grátis durante o acesso antecipado
Comece grátisTudo do Pro, mais
- Bibliotecas compartilhadas entre projetos
- Code Connect: mapeie componentes de design para o seu código
- Status ready-for-dev e anotações
Enterprise
Para organizações com revisões de segurança e processos de compras.
Fale com a gente
Fale com a genteTudo do Team, mais
- Condições personalizadas e faturamento
- Onboarding com o time do Inlu
- Revisão de segurança sob demanda
FAQ
Perguntas, respondidas direto.
O que saber antes de começar.
Meus arquivos importados vão ficar iguais no Inlu?
Importe um arquivo .fig seu e o Inlu mostra o que encontrou: frames com auto layout, componentes e variantes, variáveis e links de protótipo chegam como objetos editáveis, não como imagens achatadas. Confira os frames mais importantes antes de migrar um projeto inteiro.
Podemos testar o Inlu sem abandonar nossa ferramenta atual?
Sim. Importe um projeto, teste com o seu time e deixe todo o resto onde está. Sua ferramenta antiga pode continuar sendo o arquivo morto.
Quanto tempo leva para um time trocar?
Frames, auto layout, componentes, variáveis e comentários funcionam do jeito que os designers já conhecem, então a maior parte do aprendizado é a novidade: revisar e exportar código. Comece com um projeto e decida a partir daí.
Que código o Inlu exporta?
A exportação de código cria projetos React (TypeScript com CSS Modules), HTML/CSS e Vue a partir de um frame. O Dev Mode adiciona snippets por camada para SwiftUI, UIKit, Jetpack Compose e Android XML.
O código exportado está pronto para produção?
Trate-o como um pull request de um colega: ele traz seu layout, seus componentes e seus assets, e ainda precisa de revisão, dados reais e testes antes de ir ao ar.
A saída pode usar nossos próprios componentes?
Com o Code Connect, você associa componentes do Inlu a componentes do seu código, e os desenvolvedores veem no Dev Mode o seu componente real em vez de um genérico.
Quanto custa o Inlu?
O Inlu é grátis durante o acesso antecipado. Os preços ainda não são definitivos e os anunciaremos antes de qualquer cobrança.
Como o time trabalha em conjunto?
Edição multiplayer, cursores ao vivo, salas de voz, modo de acompanhamento e comentários fixados no trabalho que descrevem.
Seu trabalho é a melhor demo
Veja o seu próprio design como código.
Importe um projeto .fig real e confira a saída você mesmo. Grátis durante o acesso antecipado.