---
url: "/pt/pixelay/upload-designs.md"
description: "Como selecionar os frames principais do Figma, definir URLs, fazer upload dos designs e gerenciar os links de comparação do Pixelay."
---

# Fazer upload dos designs do Figma para comparar

> Como selecionar os frames principais do Figma, definir URLs, fazer upload dos designs e gerenciar os links de comparação do Pixelay.

## Preparar os designs no plugin para Figma {#preparing-designs-in-the-figma-plugin}

O Pixelay funciona fazendo upload, pelo plugin Pixelay para Figma, de imagens dos frames principais de nível superior da página atual do Figma e sobrepondo-as às URLs das páginas correspondentes do seu site no app web do Pixelay.

> **Note:** **Os frames principais do Figma são obrigatórios**. Para comparar seus designs, sua página do Figma precisa ter pelo menos um “frame principal”, ou seja, qualquer frame que esteja _diretamente_ abaixo da página.

### Selecionar os frames do Figma para comparar {#selecting-figma-frames-to-compare}

[Video](/assets/videos/pixelay/upload/selecting-frames.mp4)

Para começar, selecione os frames do seu design do Figma que você quer comparar com as URLs do seu site.

O Pixelay carrega todos os seus “frames principais” no plugin como uma lista de designs que você pode comparar com o seu site. Clique na caixa de seleção ou na miniatura de qualquer frame para selecioná-lo (clique de novo para desmarcá-lo).

> **Tip:** **Destacar os frames principais do Figma para selecioná-los**. Para facilitar a seleção dos frames principais que você quer comparar, clicar em um ou mais frames da sua página do Figma ou destacá-los filtra automaticamente a lista de frames disponíveis no plugin Pixelay.

### Atualizar os frames principais do Figma {#refreshing-figma-parent-frames}

[Video](/assets/videos/pixelay/upload/refreshing-layers.mp4)

Se o plugin Pixelay já estiver em execução e você precisar adicionar ou remover frames principais da página atual do Figma, faça as alterações necessárias e clique no botão de ícone **Refresh frames**, ao lado da contagem de frames selecionados no plugin Pixelay.

### Inserir a URL do seu site {#entering-your-website-url}

[Video](/assets/videos/pixelay/upload/entering-url.mp4)

Para definir a URL padrão com que você quer comparar seus designs, insira uma URL válida no campo **Base Website URL**, no topo do plugin Pixelay. Essa URL será a página padrão carregada para comparar os designs selecionados.

> **Note:** **Instale a extensão do Pixelay para Chrome**. Para comparar seus designs com URLs pelo Pixelay, instale o [plugin do Pixelay para Chrome](https://chrome.google.com/webstore/detail/pixelay-for-figma/gnbafbeabkbkecmbedfgebgboicpnkpp). Ele roda em segundo plano e abre o Pixelay quando detecta no navegador uma URL vinda do plugin.

> **Tip:** **Use URLs com `https://`.** O Pixelay só consegue carregar sites publicados e URLs de desenvolvimento local por HTTPS.

#### Adicionar URLs específicas por página {#adding-page-specific-website-urls}

Se você estiver comparando vários frames ao mesmo tempo, pode definir uma URL _para cada frame_. Por exemplo, para comparar o design de uma página “Sobre”, você pode inserir uma URL como _https://yoursite.com/about/_. Essa URL específica substitui a URL padrão na barra de ferramentas do Pixelay.

### Adicionar URLs de vários ambientes (opcional) {#adding-multiple-environment-website-urls-optional}

[Video](/assets/videos/pixelay/upload/add-environment-urls.mp4)

Se o seu site tiver mais de um ambiente, adicione uma URL base extra para cada site de desenvolvimento, staging ou produção. Você pode [alternar entre esses ambientes](/pt/pixelay/compare-designs#toggling-between-environment-urls) no app web do Pixelay.

Para adicionar outras URLs, clique no botão de ícone **Show extra website URLs**, ao lado da URL base do site. Depois, insira a nova URL no campo **Add Extra Base URL** (por exemplo, `https://dev.yoursite.com` ou `https://test.yoursite.com`) e clique no botão **Add URL** para incluí-la na lista de URLs base dos ambientes adicionais. Elas aparecem como uma lista suspensa no app web do Pixelay depois que você faz upload dos designs de novo pelo plugin.

> **Tip:** Para remover a URL de um ambiente, selecione-a na lista suspensa, clique no ícone **Delete selected URL** e depois em **Delete** para confirmar. Faça upload dos designs do Pixelay de novo para aplicar a alteração ao link de comparação atual.

### Gerar a URL de comparação {#generating-your-comparison-url}

[Video](/assets/videos/pixelay/upload/compare-upload.mp4)

Depois de selecionar os frames do Figma que você quer comparar e atribuir a eles as URLs do seu site, clique no botão **Compare Designs** no plugin Pixelay (ele mostra quantos frames serão comparados). No painel **Compare Figma Designs**, clique no botão **Upload Designs** para confirmar e iniciar o upload.

> **Tip:** Se **Compare Designs** estiver indisponível, passe o mouse sobre ele para ver o motivo: insira primeiro uma URL base do site ou marque pelo menos um frame. No modo Free, só é possível comparar frames com até 430 px de largura. Isso faz upload das imagens dos frames do Figma selecionados e gera uma URL que leva você ao app web do Pixelay.

> **Warning:** **Duplicar um arquivo do Figma também copia a URL dele.** Para gerar uma URL diferente para a cópia, digite o código Konami (**Up**, **Up**, **Down**, **Down**, **Left**, **Right**, **Left**, **Right**, **B**, **A**) com o plugin aberto. O Pixelay cria uma nova URL sem excluir a anterior.

> **Note:** Se o upload ou a atualização dos frames falhar, o Pixelay mostra um erro no plugin e interrompe o indicador de progresso. Um erro de upload não desfaz os frames nem as configurações que já foram enviados para a página de comparação.

### Abrir a URL de comparação {#opening-your-comparison-url}

[Video](/assets/videos/pixelay/upload/copy-url.mp4)

Depois que todos os frames forem enviados, aparece a mensagem de confirmação **Designs Uploaded Successfully!**, avisando que a URL da página de comparação está pronta para uso.

Clique no botão de ícone **Copy link** para copiar a URL e colá-la no navegador (ou compartilhá-la com outra pessoa), ou clique no link **Comparison URL** na mensagem de confirmação. Isso abre o app web do Pixelay no navegador para você começar a comparar seus designs do Figma com as URLs de desenvolvimento do site.

Observação: para comparar seus designs com URLs pelo Pixelay, instale o [plugin do Pixelay para Chrome](https://chrome.google.com/webstore/detail/pixelay-for-figma/gnbafbeabkbkecmbedfgebgboicpnkpp), que também aparece como link na mensagem de confirmação do plugin.

#### Acessar de novo a URL de comparação pelo plugin {#accessing-your-comparison-url-from-the-plugin-again}

Se você já criou a URL de comparação com o plugin e quer copiá-la de novo (sem fazer upload dos designs outra vez), clique no botão **Compare Designs** no plugin Pixelay. A URL de comparação criada anteriormente aparece no painel **Compare Figma Designs**. Para usá-la, clique no botão de ícone **Copy link** para copiar a URL e colá-la no navegador (ou compartilhá-la com outra pessoa), ou clique no link **comparison URL** no painel.

### Fazer upload dos designs do Figma de novo para a URL de comparação {#re-uploading-your-figma-designs-to-the-comparison-url}

[Video](/assets/videos/pixelay/upload/reupload-images.mp4)

Se você fez alterações no design, quer incluir ou excluir outros frames do Figma ou mudar algum dos links do site ou das páginas na URL de comparação, pode fazer upload dos designs selecionados de novo para a URL de comparação, do mesmo jeito que fez da primeira vez: clique no botão **Compare Designs** no plugin Pixelay e, desta vez, clique no botão **Update Designs**.

> **Note:** **A URL de comparação continua a mesma quando você faz upload dos designs de novo**. Sempre que você clica no botão **Update Designs**, os frames e links do site enviados antes são substituídos, e a URL de comparação do Pixelay gerada anteriormente é atualizada com os novos designs e links.