Artigos de Tecnologia e Negócios > Design & UX

Finalizei o meu projeto de design de interface (UI), como faço as minhas entregas para os desenvolvedores?

heitor.canolla
heitor.canolla

Esta é uma dúvida muito comum de quem está iniciando na carreira como UI Designer, UX Designer, Designer de Interfaces: Como faço a entrega de uma interface de site ou aplicativo para a equipe de desenvolvimento?

Vou apresentar uma ferramenta muito utilizada no mercado, chamada Zeplin. O principal objetivo desta ferramenta é criar trabalhos colaborativos em entre designers, desenvolvedores e interessados no projeto.

Com ele é possível compartilhar o projeto de uma maneira muito simples, como: cores, tipografia, espaçamentos, tamanhos. Também é possível exportar os itens da sua interface, como imagens, ícones, logotipos, formas.

Além disso, é possível adicionar comentários ao projeto, compartilhando com todos os envolvidos.

O Zeplin é uma ferramenta paga, mas existe a sua versão gratuita, limitada a 1 projeto. Caso você queira adicionar mais de um projeto terá que contratar um dos planos disponíveis.

Esta ferramenta é compatível com diversos softwares como: Adobe Photoshop, Adobe XD, Figma e Sketch. Ela possui aplicativo desktop para o sistema operacional Mac e Windows, e uma versão web voltada para desenvolvedores, gerentes de projeto.

Na versão web não é possível fazer uploads de arquivos, ela serve apenas para visualizar os arquivos que já foram compartilhados, baixar elementos gráficos e especificações do layout.

Primeiros passos: Baixando e Instalando o Zeplin

Como adicionar meus projetos no Zeplin?

Depois de instalar, você pode abrir o arquivo que deseja exportar, selecione uma ou mais artboards, caso tenha mais de uma tela no mesmo arquivo. Automaticamente depois da instalação do Zeplin ele já fica disponível no menu Plugins. Vá até o menu plugins > Zeplin > Export Selected ou use o atalho, comand + control + E (Para Mac) ou Control + E (para Windows). No exemplo abaixo eu estou utilizando o Sketch, você pode utilizar o software a sua preferência, o processo utilizando os demais softwares são semelhantes a esse.

imagem 1

O sistema vai abrir o programa. Na conta free a aplicação vai apresentar apenas uma opção para criação do projeto, no exemplo abaixo estou usando a versão paga, tenho mais de uma opção de projeto. Você vai selecionar a única opção existente, caso use a conta free, e de depois clicar em import.

imagem 2

Aguarde o carregamento, dependendo do tamanho do arquivo pode demorar um pouco.

imagem 3

Depois do carregamento a aplicação vai apresentar a dashboard, tela inicial do Zeplin.

imagem 4

Dê um click duplo no projeto que acabou de exportar.

imagem 5

Abaixo você tem a Dashboard do projeto que acabou de exportar. Nela você consegue visualizar o layout da tela, clicando em qualquer elemento você consegue obter especificações sobre o item selecionado.

No exemplo abaixo eu selecionei o título menor, “cursos profissionais para gamers”. Observe que o Zeplin mostra as especificações desses itens como:

imagem 6

Como exportar os Assets?

Os Assets são os elementos gráficos da sua interface, como imagens, ícones e logotipos. Para exportar os Assets é necessário voltar para o Sketch e seguir o caminho abaixo: Selecione uma das telas seu do projeto, em seguida selecione os elementos que deseja exportar, no exemplo abaixo eu resolvi selecionar uma das imagens do layout.

imagem 7

No painel do Sketch ao lado direito, na opção make exportable, clique no símbolo +, ele vai expandir e habilitar algumas opções:

Tamanho do arquivo

Na opção presets você define o tamanho do seu arquivo, as opções mais comuns são 1x e 2x. Na opção 1x ele exporta o arquivo no formato original, na opção 2x ele exporta 2x vezes o tamanho do arquivo original.

imagem 8

Formato

É possível escolher a extensão do arquivo do asset selecionado. O Sketch habilita algumas opções de exportação como: PNG, JPG, TIFF, SVG, PDF, EPS, WEBP.

imagem 9

Exportando os Assets

Selecione todos os itens que deseja exportar, no exemplo abaixo eu selecionei a artboard completa, pois desejo os arquivos da interface para download e as especificações dele.

imagem 10

O próximo passo é repetir o processo que mostrei no inicio da explicação, Vá até o menu plugins > Zeplin > Export Selected ou use o atalho, comand + control + E (Para Mac), Para (Windows) Control + E. Selecione o seu arquivo importe novamente em cima do arquivo atual.

imagem 11

imagem 12

No exemplo abaixo, selecionei a imagem maior, ao lado direito nas especificações do arquivo o Zeplin habilita as opções de download da imagem.

imagem 13

Compartilhando o arquivo com o time

Layout finalizado é hora de compartilhar o trabalho com a equipe. Na Dashboard do Zeplin, ao lado direito, você tem a opção Share. Clicando nesse item você tem duas opções de compartilhamento.

  1. Compartilhar fazendo uma busca por nome ou por e-mail, lembrando que esta opção funciona se, a pessoa que recebeu o arquivo tem a aplicação instalada no computador.

imagem 14

  1. Na mesma opção Share, mas abaixo você tem duas opções de links. Share link web ou App, na opção App você é direcionado para compartilhar o projeto direto no software, na opção web você abre o Zeplin no navegador.

imagem 15

Dicas finais

O Zeplin é um software bem útil no dia-a-dia do designer de interface, é uma ferramenta fácil de ser usada e bem colaborativa. No post foquei no compartilhamento do design com a equipe. Existem mais de dezenas de opções e configurações, vale a pena separar algumas horas e explorar os demais recursos que a ferramenta permite.

Artigos de Tecnologia e Negócios > Design & UX

Cursos profissionais de Design & UX é na Alura, comece agora!

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana