Get best of the week

Figmiro. Criando um plugin para o Figma (e um pouco para o Miro)

imagem

No terceiro dia, a conselho de camaradas comprovados, decidimos criar um plug-in que exportará layouts de Figma para Miro como imagens PNG.

Nossa equipe entusiasticamente começou a traduzir essa idéia em realidade, foi especialmente estimulada pela oportunidade de obter um jackpot decente, porque, por um conjunto de circunstâncias completamente aleatórias, começamos a trabalhar na criação de um plug-in pouco antes da conclusão do concurso de plug-in da Miro.

Para ser justo, vale a pena notar que a ideia dessa integração permanece na mente de nossos designers há muito tempo. Há pouco tempo, toda a equipe de design mudou de um monte de Sketch / Zeplin para a agora popular plataforma Figma. Transferência - movida, mas muitos cenários familiares para o uso de ferramentas antigas ficaram indisponíveis.

Em especial, em agosto de 2019, os robôs começaram a trabalhar no site de uma grande empresa de comércio eletrônico. O cenário tradicional para trabalhar com o Sketch era o seguinte: descarregamos layouts do Sketch usando um plug- in especial no Miro e os discutimos com a equipe do cliente. Usamos o Miro como repositório de todos os materiais para o projeto. É conveniente trabalhar com comentários e coletar alterações nos mapas da tela (organize as setas).

Havia cerca de 450 layouts neste projeto. As edições não aconteciam de uma só vez; várias vezes ao dia descarregávamos layouts com pequenas alterações. Todo o descarregamento no Figma ocorreu manualmente devido à falta do plug-in necessário: PNG / JPG exportado, salvo, largado no Miro, disposto na ordem correta.
Substitua o texto - um minuto, descarregue - de 20 minutos a uma hora. Para substituir uma (!) Palavra em 15 layouts, os designers passaram uma hora inteira. Percebemos que as exportações precisavam ser automatizadas, economizando tempo e células nervosas de nossos designers e diretores de arte.
Então, armados com texto datilografado, react e mobx (obrigado, Figma pela oportunidade de usar ferramentas legais), começamos a trabalhar no plugin.

Inicialmente, de acordo com nossas suposições otimistas, houve trabalho por uma semana, no máximo duas - a tarefa era apenas transferir todos os recursos do Miro Plugin for Sketch para trilhos Figma.

Porém, como costuma acontecer no desenvolvimento de software associado a atividades de pesquisa, estimativas otimistas podem estar muito longe da realidade. Portanto, no processo de criação do plug-in, surgiu um grande número de obstáculos técnicos.

Número de obstáculos vezes: REST API Miro


Como o Figma é um aplicativo da Web (o elétron é usado na área de trabalho), percebemos que nosso plugin funcionaria em um ambiente de navegador. Portanto, todas as solicitações que enviaremos à API REST do Miro estarão sujeitas às políticas do navegador CORS .

E isso significa que, se queremos enviar uma solicitação com o corpo no formato application / json (por exemplo, para autorização) e o servidor não "gostar" dessa solicitação, a resposta do servidor nos "enviará". No nosso caso, aconteceu.

Portanto, foi decidido escrever seu proxy no node.js, que simpatiza com nossos desejos, autorizar por login / senha. Para fazer isso, o proxy usa o famoso middleware cors para express.

Obstáculo número dois: novamente REST API Miro


Depois de estudar a documentação oficial da API REST do Miro e tentar implementar nossa idéia de exportar imagens do Figma para o Miro, percebemos que, de toda a variedade de widgets disponíveis no Miro (por widgets, queremos dizer adesivos, formas, texto etc.) A interface REST não nos permite criar um widget de interesse para nós com uma imagem. Isso significa que os layouts que convertemos com sucesso para PNG no nível Figma, não podemos enviar para o painel desejado no Miro.

Mas eles se lembraram de um plugin semelhante para o Sketch, que de alguma forma sabe como fazer essa exportação. Foi decidido, por assim dizer, retomar a experiência dos colegas e observar o código fonte sketch_plugin, já que os caras do Miro gentilmente postaram o código fonte no Github . E então aconteceu várias coisas ao mesmo tempo:

  • No século previsível, não planejamos fazer plug-ins para o Sketch, porque os Frankenstein da Objective-C e JS, costumavam desenvolver plug-ins do Sketch, projetavam ondulações nos olhos do número de colchetes ao visualizar a fonte;

imagem

Faça uma aula se você também gosta de combinar o melhor de JS e Objective-C.
O modelo para a captura de tela mora aqui .

  • O plug-in Sketch usa uma API diferente, disponível aqui . Essa API fornece a capacidade de criar imagens em um quadro selecionado no Miro. Isto é uma vantagem. A desvantagem é que não encontramos documentação.

Após essas revelações, nossa equipe decidiu usar a API misteriosa do plug-in Sketch como base. Vagando no escuro, sem ter as especificações desta API, ainda superamos o problema de importar imagens para o Miro. E, ao que parece, aqui foi possível pôr um fim ao épico, mas não.

Obstáculo número três: desempenho


Durante o primeiro teste beta do plug-in, os usuários ficaram descontentes com o longo processo de exportação de imagens do Figma para o Miro. Por exemplo, cerca de 3 minutos, 30 layouts foram descarregados. Cerca de 70% do tempo decorrido nesses três minutos foi gasto enviando o corpo da solicitação ao servidor.

Como se viu, nosso fakap era que, em nosso aplicativo proxy / json, era usado como o formato esperado para imagens e metadados, e essas imagens foram transferidas na forma de UInt8Array. Naturalmente, alteramos o formato esperado para multipart / form-data, e agora os mesmos 30 layouts foram carregados em 50 segundos aceitáveis. Obviamente, ainda há espaço para crescer, mas menos a velocidade aumentou três vezes e esta foi a nossa pequena vitória.

Obstáculo número quatro: cenários de ponta


Parecia que os cenários de uso do plug-in eram simples de desonrar, mas no processo de trabalho, encontramos um grande número de estados de borda não processados ​​da operação do plug-in, com os quais algo tinha que ser feito.

Se dedicarmos tempo para trabalhar em uma determinada funcionalidade (seja autorização, exportar layouts como imagens da Figma etc.) como N, o processamento de scripts de borda para essa funcionalidade também levará N tempo. E, é claro, esse tempo extra mudou bastante a data de lançamento do plugin. Mas este trabalho permitiu alcançar um bom nível de resiliência da ferramenta.

Obstáculo número cinco: autorização


Se de repente você quis escrever um plug-in para o Figma, esteja preparado para o fato de que a autorização através de serviços de terceiros (google, facebook, slack etc.) não estará disponível para você, porque os plug-ins no Figma funcionam com iframes e o protocolo oAuth não favorece a autorização através de frames flutuantes. a força de certas políticas de segurança (em particular, para impedir ataques de clickjacking ).

O que isso significa no contexto do nosso plugin? Isso significa que os usuários registrados no Miro por meio de serviços de terceiros não poderão efetuar login através do plug-in usando o nome de usuário / senha e selecionar a placa desejada para a qual deseja exportar layouts da Figma. E eles não poderão fazer isso, porque ao se registrar através de serviços de terceiros, o Miro define apenas o email para a futura conta de usuário, mas não a senha.

A solução alternativa que escolhemos é muito simples: alertamos o usuário do plug-in que, se ele estiver registrado através de um serviço de terceiros no Miro e não tiver uma senha, ele precisará usar a função padrão "Recuperação de senha por email" para receber ou restaurar a senha.

imagem

Como resultado, não conseguimos competir com o Miro. A avaliação otimista em 2 semanas de desenvolvimento não se materializou e cresceu em 2 meses, pois estávamos envolvidos nesse projeto em nosso tempo livre.

Aumento da situação é o fato de que enquanto estávamos resolvendo problemas técnicos, Miro anunciouvencedores, entre os quais Semyon Volkov e Roman Krasilnikov com um plug-in Figma2Miro semelhante. O projeto deles ficou em sexto lugar. Diferentemente da nossa implementação, que era ainda mais um plug-in Figma (do ponto de vista da interface do usuário e da plataforma que inicia a exportação), eles criaram o plug-in para o Miro.

Infelizmente, a solução criada pelos caras não atendeu às necessidades dos robôs, e é por isso que continuamos trabalhando em nosso próprio plug-in, que logo estava pronto. O plugin é chamado Figmiro.

Agora, graças ao Figmiro, nossos designers estão economizando muito tempo importando layouts de um sistema para outro. Por exemplo, a hora de descarregar layouts de uma citação de Sergey Kutkov se transformou em 2 (!) Minutos.

Resumindo, quero observar que o trabalho sobre Figmiro foi mais de natureza de pesquisa. Quando você trabalha na integração de dois sistemas de terceiros, de uma forma ou de outra, precisa estar preparado para um alto nível de incerteza, falta de informações na estrutura da solução do problema. No nosso caso, passamos a maior parte do tempo pesquisando os recursos de API de ambas as plataformas, testando hipóteses e encontrando soluções.

O que o plugin Figmiro pode fazer


Tudo funciona da mesma maneira que costumávamos fazer no Sketch: selecione quadros, clique no botão e os layouts aparecem no Miro:

  • Carregue os quadros selecionados no quadro selecionado no Miro.
  • Substituindo layouts previamente descarregados, mantendo uma posição nas placas.

No futuro, planejamos oferecer suporte ao plug-in e otimizar seu trabalho de forma a acelerar o processo de descarregamento e sincronização. Se o Miro atualizar sua API, reconstruiremos o plugin para ele.

O plugin Figmiro funcionou


O designer Anton Magartsov, o principal desenvolvedor do iOS, Roman Churkin, os desenvolvedores front-end Anton Eryshev e Ilya Krupnov, o gerente de desenvolvimento de servidores Andrei Muravyov e o diretor de arte Sergey Kutkov.

Todos os links:

Plugin no Github ,
Proxy no Github ,
Plugin no Figma .

Estamos coletando comentários sobre a operação do plugin no GitHub.

PS
Sabemos o quão difícil é criar APIs públicas para serviços, atendendo ao máximo todas as necessidades dos usuários dessas APIs.

A equipe Redmadrobot agradece aos funcionários de Miro e Figma pela oportunidade de automatizar nossos processos comerciais rotineiros.

More articles:


All Articles