Criando extensões Zeplin para desenvolvimento mobile

A plataforma Zeplin tem tornado-se cada vez mais comum no dia a dia de engenheiros mobile. Coisas que entram em uma rotina tendem a ser otimizadas/automatizadas por se tratar de um trabalho repetitivo.

Graças ao sistema de extensions da plataforma Zeplin, pode-se desenvolver soluções que façam com que ao selecionar um componente de interface, por exemplo, seja exibido algum código em uma linguagem pré definida, de modo que quem esteja desenvolvendo uma aplicação mobile possa tirar proveito deste cenário apenas com um copy & paste.

No caso atual, irei mostrar de forma bem direta o passo a passo de como criar uma extension para que vocês possa utilizar localmente (sem estar publicada na plataforma Zeplin) até uma publicação oficial, aonde você e outros desenvolvedores poderão instalar a extension nos mais diversos projetos existentes.

Extensão publicada e aprovada pelo Zeplin.

Mãos na massa!

Como pré requisito, você deverá ter já instalado o npm (gerenciador de dependências para Js).

Vamos precisar instalar o gerenciador de extensions do Zeplin, chamado zem (zeplin extensions manager), que permitirá facilmente criar e testar as extensions.

npm install -g zem

O próximo passo é criar o diretório da sua extension, através do comando create.

zem create swift-rect

Após um pouco de processamento, será gerado o diretório com os seguintes arquivos:

Arquivos gerados pelo zem create.

Após isto, basta abrir o projeto no editor de texto de sua preferência, no meu caso utilizei o Atom.

O primeiro passo é configurar as informações sobre a sua extension, para isso, deve-se navegar para o arquivo:

package.json

Neste arquivo, garanta que o tipo do seu projeto está de acordo com o que você deseja extender.

"zeplin": {
    "displayName": "swift-rect",
    "projectTypes": [
      "ios"
    ]
  }

Agora vamos para aonde a magia acontece. Dentro da pasta src, temos o arquivo index.js, onde será exibido um grupo de métodos fornecidos pelo Zeplin, responsáveis pelo acesso dos mais diversos parâmetros para que você possa tirar proveito e gerar extensions que forneçam códigos dos mais diversos níveis de complexidade, literalmente prontos para a utilização.

Métodos fornecidos pelo arquivo index.js.

No caso atual, iremos criar uma extension bem simples, que apenas retornará um CGRect do layer selecionado. Para isto, removeremos o que for desnecessário deixando apenas o que nos interessa.

Como estamos gerando um CGRect, devemos ter acesso aos pontos X e Y do frame além dos valores de altura e largura do mesmo.

O layer retornado pelo Zeplin possui os seguintes atributos:

Podemos facilmente identificar que o que queremos com extatidão está ali, o .rect.

O objeto .rect possui todos parâmetros desejados, assim basta acessá-los:

let x = Math.floor(selectedLayer.rect.x);
let y = Math.floor(selectedLayer.rect.y);
let width = Math.floor(selectedLayer.rect.width);
let height = Math.floor(selectedLayer.rect.height);

Para retornar o código em Swift, retornamos uma String que terá concatenada os valores do .rect, tendo esta cara:

let rect = "CGRect(
              x: " + x + ", 
              y: " + y + ", 
              width: " + width +  ", 
              height: "+ height + "
            )";

Após isto,

Devemos retornar nosso arquivo, explicitando que estamos retornando um código na linguagem Swift.

result = {
      code: object,
      language: 'swift'
    };
return {
      code: object,
      language: 'swift'
    };

Por final, com o código pronto terá a seguinte cara.

Para validar o que foi feito, basta executar o comando

npm run exec — layer

Será retornado um set de layers gerados com diversas configurações testando a funcionalidade de seu código.

Valores de teste retornados.

Após isto, hora de testar no Zeplin.

Acesse o gerenciador de extensões do aplicativo.

Acesso ao gerenciados de extensões.

Pressione em seu teclado o botão Option para que a opção Explore extensions se transforme em Add Local Extension, após isto, clique nela.

Gerenciador de extensões.

Aparecerá uma entrada de texto para o path de sua extension local, para rodarmos nossa extension localmente, deve-se executar comando npm start no diretório previamente criado.

Resultado do npm start.

Adicionando extension localmente.

Após colar o path

http://localhost:7070/manifest.json

Basta adicionar a extension e verificar o resultado ao clicar em um layer.

Resultado da extension aplicada.

O último passo é publicar a sua extension, mas para isso um conselho importante para a aprovação é que você possua um README.md bem descrito (melhor ainda sendo open source, compartilhando o repositório). A publicação é feita com o comando.

npm run publish

Referências:

https://github.com/zeplin/zeplin-extension-documentation

Agradecimento em especial ao time de engenharia do Zeplin pelo excelente suporte até então.