Preparar os designs no plugin para Figma
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.
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
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).
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
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
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.
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.
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
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)
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 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.
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
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.
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.
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.
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
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, que também aparece como link na mensagem de confirmação do plugin.
Acessar de novo a URL de comparação pelo plugin
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
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.
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.