Compartilhar pacotes de IU

Práticas recomendadas

Verifique se há erros e crie versões nomeadas antes de compartilhar

Quando estiver tudo pronto para compartilhar um componente ou uma página de componentes, a criação de uma versão nomeada mantém as definições de pacotes da interface estáveis. Isso evita que mudanças no arquivo do Figma afetem os componentes de produção.

  1. Clique na opção "Share with developer" no plug-in.

    StatusCard na visualização do Android
  2. Os erros que impedem o desenvolvedor de usar seu componente são exibidos como uma lista. Corrija os erros primeiro.

  3. Você pode salvar um histórico de versões depois que todos os erros de bloqueio forem corrigidos. Isso é o mesmo que salvar um histórico de versões dentro do Figma. Digite um título e uma descrição para a nova versão. Clique em Salvar.

    StatusCard na visualização do Android
  4. Sua nova versão é salva como um histórico de versões dentro do Figma.

    StatusCard na visualização do Android

Isso vincula o projeto do Android Studio à versão nomeada mais recente, permitindo atualizações contínuas. Se o arquivo não tiver versões nomeadas, as atualizações no Android Studio sempre vão extrair a versão salva automaticamente mais recente. No entanto, recomendamos o uso de versões nomeadas.

Quando estiver tudo pronto, compartilhe os pacotes de interface com os desenvolvedores usando o link de URL do Figma.

Como compartilhar todos os pacotes de interface em uma página

Clique com o botão direito do mouse no painel esquerdo e selecione Copiar link para a página.

Todos os pacotes de interface da página são compartilhados. Os desenvolvedores podem importar qualquer um ou todos os pacotes de interface na página do Figma.

Como compartilhar um pacote de interface específico

Com o componente selecionado, clique com o botão direito do mouse e selecione Copy/paste as > Copy Link.

Somente o pacote de interface selecionado é compartilhado pelo URL. Os desenvolvedores só podem importar o pacote de interface compartilhado.

Como compartilhar todos os pacotes de interface em um arquivo

No Figma para computador, clique com o botão direito do mouse na guia e selecione Copy link para copiar o URL.

https://www.figma.com/file/sample_file_id/FileName?node-id=1234567

Remova tudo após o node-id no URL. Compartilhe o novo URL com seu desenvolvedor.

https://www.figma.com/file/sample_file_id/FileName

Os desenvolvedores podem importar todos os pacotes de interface para o arquivo do Figma.

Compartilhar todos os pacotes de interface em uma página com uma versão específica

Abra o painel Histórico de versões no Figma. Clique com o botão direito do mouse e selecione Copiar link.

Os desenvolvedores podem importar todos os pacotes de interface na página para a versão nomeada especificada.

StatusCard na visualização do Android

Uso avançado

O fluxo de trabalho de redirecionamento oferece suporte para a importação de diferentes versões do pacote da IU no mesmo projeto, mas exige a formação manual de um URL de arquivo do Figma.

  1. Copie o link direto para o componente que você quer importar. Selecione a camada de componentes, clique com o botão direito do mouse e selecione Copy/Paste as > Copy link. Exemplo:

    www.figma.com/file/sample_file_id/FileName?node-id=123%3A45

  2. Selecione a versão do componente que você quer usar Acesse File > Show version history e selecione uma versão. Em seguida, copie o URL da versão clicando com o botão direito do mouse e escolhendo a opção Copy link. Exemplo:

    www.figma.com/file/sample_file_id/FileName?version-id=7654321&node-id=0%3A1&viewport=2425%2C1794%2C2.99

  3. Combine os dois URLs para criar um URL com controle de versão do componente. É possível substituir o valor node-id no link com controle de versão pelo link do componente ou inserir o parâmetro version-id no link do componente, desde que você ambos os parâmetros estejam presentes no URL. Exemplo:

    www.figma.com/file/sample_file_id/FileName?version-id=7654321&node-id=123%3A45