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 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.
Instale a extensão do Pixelay para Chrome. Para comparar seus designs com URLs pelo Pixelay, instale o plugin do Pixelay para Chrome. 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
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.
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
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.
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
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
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
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
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
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
Se você adicionou URLs de outros ambientes 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
Se as suas URLs de desenvolvimento local usam alguma implementação de Hot Module Replacement (HMR), 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.