--- url: "/pt/pixelay/compare-designs.md" description: "Guia do app web do Pixelay para comparar designs do Figma com URLs publicadas usando sobreposições, modos e ferramentas." --- # Comparar designs do Figma com URLs reais no navegador > Guia do app web do Pixelay para comparar designs do Figma com URLs publicadas usando sobreposições, modos e ferramentas. Depois de gerar a URL no plugin Pixelay para Figma, abra-a no navegador para começar a usar o app web do Pixelay. É no app web que você compara os designs enviados pelo plugin para Figma com as URLs da versão em desenvolvimento do seu site. O app web carrega cada URL a comparar como um [iFrame](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) e sobrepõe seus designs do Figma a ele. O tamanho de cada imagem enviada define a largura e a altura do iFrame correspondente, o que permite testar a “responsividade” do seu site em relação aos designs pensados no Figma. > **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. ## Rolar a página para ver todos os frames {#scrolling-the-page-to-view-all-of-your-frames} [Video](/assets/videos/pixelay/compare/web-overview.mp4) Você navega pela página inteira rolando na vertical e na horizontal (com a roda do mouse ou clicando e arrastando as barras de rolagem). Rolar para a esquerda e para a direita mostra todos os frames enviados, e rolar para cima e para baixo mostra todo o conteúdo de cada frame. > **Tip:** Se o seu projeto do Pixelay tiver mais de 20 frames do Figma, a extensão do Chrome passa automaticamente a mostrar só um frame por vez, para evitar que a página fique lenta ao carregar todas as URLs de uma vez. Para alternar entre eles, escolha qualquer frame do Figma no painel de controles, no canto inferior direito da tela. ## Alternar entre o design do Figma e o site {#toggling-between-the-figma-design-and-website-build-modes} [Video](/assets/videos/pixelay/compare/toggler.mp4) Para alternar rapidamente entre o design original do Figma e o seu site, clique nos botões de ícone **Original Figma Design** e **Live Website Build** no painel de controles do Pixelay. Cada um deles ativa o modo selecionado e mostra esse modo isolado do outro. > **Tip:** **Interagir com a pré-visualização do site**. Mudar o modo de sobreposição para **Live Website Build** permite interagir com a página. Isso é útil quando você precisa preencher campos de formulário ou clicar em algo para deixar o site visualmente mais próximo dos designs originais do Figma que você está comparando. ## Usar o modo de sobreposição transparente {#using-the-transparent-overlay-mode} [Video](/assets/videos/pixelay/compare/opacity-slide.mp4) Para comparar seus designs do Figma com o site usando diferentes níveis de opacidade, clique no botão de ícone **Transparent Overlay**. Isso ativa o modo de sobreposição transparente. Clique e arraste o controle deslizante **Overlay Opacity** para definir o nível de transparência entre o design original e a URL publicada. ## Usar o modo de sobreposição em tela dividida {#using-the-split-screen-overlay-mode} [Video](/assets/videos/pixelay/compare/swiper.mp4) Para comparar seus designs do Figma com o site em tela dividida, clique no botão de ícone **Split Screen Overlay**. Isso ativa o modo de sobreposição em tela dividida. Clique e arraste a **Split Line** azul no meio de cada design para definir quanto do design original e quanto da URL publicada aparecem ao mesmo tempo. ## Usar o modo de sobreposição blend-diff {#using-the-blend-diff-overlay-mode} [Video](/assets/videos/pixelay/compare/diff.mp4) Para comparar seus designs do Figma com o site usando o método blend-diff, clique no botão de ícone **Blend-Diff Overlay**. Isso ativa o modo de sobreposição blend-diff. Clique e arraste o controle deslizante **Overlay Opacity** para definir o nível de transparência entre o design original e a URL publicada. ## Usar o modo de sobreposição arrastável {#using-the-draggable-overlay-mode} [Video](/assets/videos/pixelay/compare/draggable.mp4) Para ajustar manualmente a posição da sobreposição em todos os designs, clique no botão de ícone **Draggable Overlay**. Isso ativa o modo de sobreposição arrastável. Clique e arraste o controle deslizante **Overlay Opacity** para definir o nível de transparência entre o design original e a URL publicada. ## Usar a régua de medição em pixels {#using-the-measure-pixels-ruler} [Video](/assets/videos/pixelay/compare/measure.mp4) Para medir a distância entre quaisquer elementos da página com uma régua em pixels, clique no botão de ícone **Measure Pixels**. Isso ativa o modo de medição em pixels. Com esse modo ativo, meça a distância em pixels clicando e arrastando o cursor do mouse entre dois pontos quaisquer da página. Clique e arraste o controle deslizante **Overlay Opacity** para definir o nível de transparência entre o design original e a URL publicada. ## Alternar entre as URLs dos ambientes {#toggling-between-environment-urls} [Video](/assets/videos/pixelay/compare/select-environment-url.mp4) Se você [adicionou URLs de outros ambientes](/pt/pixelay/upload-designs#adding-multiple-environment-website-urls-optional) pelo plugin Pixelay para Figma antes de fazer upload dos designs, pode alternar entre elas no seletor suspenso **Change Environment Base URL**, no painel de controles do app web do Pixelay. Isso troca automaticamente a URL base de todos os frames nas pré-visualizações do Pixelay. Por exemplo, selecionar `https://dev.yoursite.com` muda todas as URLs `https://www.yoursite.com` para a URL base `dev.yoursite.com`, incluindo as URLs específicas de páginas (por exemplo, um frame do Figma com a URL de página `https://www.yoursite.com/about` passa a carregar `https://dev.yoursite.com/about`). ## Usar com um ambiente de desenvolvimento com hot reload {#using-with-a-hot-reload-enabled-development-environment} [Video](/assets/videos/pixelay/compare/hot-reload.mp4) Se as suas URLs de desenvolvimento local usam alguma implementação de [Hot Module Replacement (HMR)](https://webpack.js.org/concepts/hot-module-replacement/), os frames do app web do Pixelay são atualizados automaticamente em tempo real (já que apontam para as suas URLs de desenvolvimento em iFrames), sem que você precise recarregar a URL do próprio app web do Pixelay. Qualquer alteração que você fizer no editor de código aparece no app web do Pixelay assim que você salvar os arquivos e o HMR injetar as mudanças nas suas URLs.