> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Vá do Figma a um App no ar

> Transforme frames do Figma em um app do Replit publicável que corresponda a layout, tipografia e cor.

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

Você já tem telas no Figma. O Agent as constrói como um app do Replit no ar, que você pode
editar, visualizar e publicar: layout, tipografia, cores e espaçamento. O resultado é um
produto funcional, não uma captura de tela. Aponte o Agent para frames específicos se o
arquivo tiver mais de um fluxo.

## Ideal para

* Designers de produto que precisam de um app codificado no Replit a partir de frames que já possuem.
* Fundadores que têm um arquivo no Figma e precisam colocá-lo no ar sem reconstruir do zero.

## Conectores

<Connectors
  items={[
{
  id: "figma",
  name: "Figma",
  why: "Frames, componentes, tipografia e cores a implementar",
},
]}
/>

## Antes de começar

Tenha um arquivo no Figma com frames nomeados (início, produto, checkout, e assim por diante).
Conecte o Figma. Compartilhe o arquivo com o Agent, ou cole o link do arquivo e os links dos
frames que importam. Diga se isso é um site de marketing, um app ou uma única landing page.

## Prompt para o agente

<AiPrompt>
  A partir deste arquivo do Figma \[link], construa um app do Replit no ar a
  partir destes frames: \[nomes ou links dos frames]. Corresponda o layout, a
  tipografia, as cores, o espaçamento e os breakpoints (desktop e mobile).
</AiPrompt>

## O que esperar

O Agent lê os frames selecionados e constrói páginas correspondentes que você pode publicar a
partir do Replit. Verifique o espaçamento, a tipografia e as cores em relação ao Figma.
Revise você mesmo os elementos interativos (navegação, formulários, hover). Eles costumam
precisar de uma segunda passada. Visualize em desktop e em largura de celular. Clique na
navegação e nos formulários, e depois compare uma captura de tela com o Figma antes de
publicar.

## Adapte ao seu caso

<AiPrompt>
  Implemente primeiro apenas os frames mobile. Corresponda ao auto-layout e
  ao espaçamento do Figma. O desktop vem depois que eu aprovar o mobile.
</AiPrompt>

<AiPrompt>
  Reutilize um único componente para botões, campos e cards. Extraia cores e
  tipografia das variáveis do Figma, se existirem.
</AiPrompt>

## Solução de problemas

* **O Agent não consegue ler o arquivo:** conecte o Figma, compartilhe o arquivo e cole os links dos frames, não apenas a URL do arquivo. Nomeie os frames (início, produto, checkout) se o arquivo tiver mais de um fluxo.
* **Hover, navegação ou formulários parecem inacabados:** layout e cor costumam ficar prontos primeiro. Peça uma segunda passada nos elementos interativos, e verifique o espaçamento em relação ao Figma.

## Relacionados

<CardGroup cols={2}>
  <Card title="Crie o design de uma landing page" href="/pt/use-cases/design-landing-page">
    Para designers de produto que precisam de frames primeiro, a partir de um briefing no Notion.
  </Card>

  <Card title="Crie uma loja online" href="/pt/use-cases/build-online-store">
    Para fundadores e designers de produto que precisam de uma vitrine Shopify em seguida.
  </Card>
</CardGroup>