Get best of the week

Figmiro Hacer un complemento para Figma (y un poco para Miro)

imagen

El tercer día, siguiendo el consejo de camaradas probados, decidimos crear un complemento que exportará diseños de Figma a Miro como imágenes PNG.

Nuestro equipo comenzó a traducir esta idea con entusiasmo, se vio especialmente favorecido por la oportunidad de obtener un premio mayor decente, porque, por un conjunto de circunstancias completamente al azar, comenzamos a trabajar en la creación de un complemento poco antes de que Miro completara el concurso de complementos.

Para ser justos, vale la pena señalar que la idea de dicha integración ha permanecido en las mentes de nuestros diseñadores durante mucho tiempo. No hace mucho tiempo, todo el equipo de diseño se mudó de un grupo de Sketch / Zeplin a la ahora popular plataforma Figma. Transferir - movido, pero muchos escenarios familiares para usar herramientas antiguas no están disponibles.

En particular, en agosto de 2019, los robots comenzaron a trabajar en el sitio de una gran empresa de comercio electrónico. El escenario tradicional para trabajar con Sketch era el siguiente: descargamos diseños de Sketch usando un complemento especial en Miro y los discutimos con el equipo del cliente. Usamos Miro como depósito de todos los materiales para el proyecto. Es conveniente trabajar con comentarios y recopilar cambios en los mapas de pantalla (organizar las flechas).

Hubo alrededor de 450 diseños en este proyecto. Las ediciones no se produjeron de inmediato, varias veces al día descargamos diseños con cambios menores. Toda la descarga en Figma se realizó manualmente debido a la falta del complemento necesario: PNG / JPG exportado, guardado, dejado en Miro, presentado en el orden correcto.
Reemplace el texto, un minuto, descargue, de 20 minutos a una hora. Para reemplazar una (!) Palabra en 15 diseños, los diseñadores pasaron una hora entera. Nos dimos cuenta de que las exportaciones necesitaban ser automatizadas, ahorrando el tiempo y las células nerviosas de nuestros diseñadores y directores de arte.
Entonces, armados con mecanografiado, react y mobx (gracias, Figma por la oportunidad de usar herramientas geniales), comenzamos a trabajar en el complemento.

Inicialmente, de acuerdo con nuestras suposiciones optimistas, hubo trabajo durante una semana, un máximo de dos: la tarea era solo transferir todas las características de Miro Plugin for Sketch a los rieles de Figma.

Pero, como suele ser el caso en el desarrollo de software asociado con actividades de investigación, las estimaciones optimistas pueden estar muy lejos de la realidad. Entonces, en el proceso de creación del complemento, surgió una gran cantidad de obstáculos técnicos.

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


Como Figma es una aplicación web (se usa electrón para el escritorio), nos dimos cuenta de que nuestro complemento funcionará en un entorno de navegador. Por lo tanto, todas las solicitudes que enviaremos a la API REST de Miro estarán sujetas a las políticas del navegador CORS .

Y esto significa que si queremos enviar una solicitud con el cuerpo en formato de aplicación / json (por ejemplo, para autorización) y el servidor no "dará" me gusta a esta solicitud, entonces la respuesta del servidor nos "enviará". En nuestro caso, sucedió.

Por lo tanto, se decidió escribir su proxy en node.js, que simpatizará con nuestros deseos, autorizar por usuario / contraseña. Para hacer esto, el proxy usa los famosos cors de middleware para express.

Obstáculo número dos: nuevamente REST API Miro


Después de estudiar la documentación oficial sobre la API REST de Miro e intentar implementar nuestra idea de exportar imágenes de Figma a Miro sobre la base, nos dimos cuenta de que de toda la variedad de widgets disponibles en Miro (por widgets nos referimos a pegatinas, formas, texto, etc.) La interfaz REST no nos permite crear un widget que nos interese con una imagen. Esto significa que aquellos diseños que convertimos con éxito a PNG en el nivel de Figma, no podemos enviarlos al tablero deseado en Miro.

Pero luego se acordaron de un complemento similar para Sketch, que de alguna manera sabe cómo hacer esa exportación. Se decidió, por así decirlo, asumir la experiencia de los colegas y mirar el código fuente sketch_plugin, ya que los chicos de Miro publicaron amablemente el código fuente en Github . Y luego resultó varias cosas a la vez:

  • En el siglo previsible, no planeamos hacer complementos para Sketch, porque el Frankenstein de Objective-C y JS, solía desarrollar plugins de Sketch, ondulaciones proyectadas en los ojos de la cantidad de corchetes al ver la fuente;

imagen

Pon una clase si también te gusta combinar lo mejor de JS y Objective-C.
El modelo para la captura de pantalla vive aquí .

  • El complemento Sketch utiliza una API diferente, que está disponible aquí . Esta API proporciona la capacidad de crear imágenes en un tablero seleccionado en Miro. Esta es una ventaja. La desventaja es que no encontramos documentación al respecto.

Después de estas revelaciones, nuestro equipo decidió tomar la misteriosa API del complemento Sketch como base. Vagando en la oscuridad, sin tener las especificaciones de esta API, aún superamos el problema de importar imágenes a Miro. Y, al parecer, aquí fue posible poner fin a la épica, pero no.

Obstáculo número tres: rendimiento


Durante la primera prueba beta del complemento, resultó que los usuarios a menudo no están contentos con el largo proceso de exportación de imágenes de Figma a Miro. Por ejemplo, aproximadamente 3 minutos, se descargaron 30 diseños. Aproximadamente el 70% del tiempo de estos 3 minutos se tomó enviando el cuerpo de la solicitud al servidor.

Al final resultó que, nuestro fakap fue que en nuestra aplicación proxy / json se utilizó como el formato esperado para imágenes y metadatos y estas imágenes se transfirieron en forma de UInt8Array. Naturalmente, cambiamos el formato esperado a multipart / form-data, y ahora se cargaron los mismos 30 diseños en 50 segundos aceptables. Por supuesto, todavía hay espacio para crecer, pero cuanto menos haya aumentado la velocidad 3 veces, y esta fue nuestra pequeña victoria.

Obstáculo número cuatro: escenarios de borde


Parecía que los escenarios de uso del complemento eran simples de deshonrar, pero en el proceso de trabajo, encontramos muchos estados de borde no procesados ​​de la operación del complemento, con lo que había que hacer algo.

Si nos tomamos el tiempo para trabajar en una determinada funcionalidad (ya sea autorización, exportar diseños como imágenes de Figma, etc.) como N, entonces el procesamiento de los scripts de borde para esta funcionalidad también tomará N tiempo. Y, por supuesto, este tiempo extra cambió mucho la fecha de lanzamiento del complemento. Pero este trabajo permitió alcanzar un buen nivel de resistencia de la herramienta.

Obstáculo número cinco: autorización


Si de repente quisiera escribir un complemento para Figma, esté preparado para el hecho de que la autorización a través de servicios de terceros (google, facebook, slack, etc.) no estará disponible para usted, porque los complementos en Figma funcionan a través de iframes, y el protocolo oAuth no favorece la autorización a través de marcos flotantes en La fuerza de ciertas políticas de seguridad (en particular, para evitar ataques de clickjacking ).

¿Qué significa esto en el contexto de nuestro complemento? Esto significa que los usuarios que están registrados en Miro a través de servicios de terceros no podrán iniciar sesión a través del complemento utilizando el nombre de usuario / contraseña y seleccionar la placa deseada donde desea exportar diseños de Figma. Y no podrán hacerlo, porque cuando se registra a través de servicios de terceros, Miro establece solo el correo electrónico para la cuenta de usuario futuro, pero no la contraseña.

La solución que elegimos es muy simple: advertimos al usuario del complemento que si está registrado a través de un servicio de terceros en Miro y no tiene una contraseña, debe usar la función estándar "Recuperación de contraseña por correo electrónico" para recibir o restaurar la contraseña.

imagen

Como resultado, no logramos competir con Miro. La evaluación optimista a las 2 semanas de desarrollo no se materializó y creció en 2 meses, ya que estuvimos involucrados en este proyecto en nuestro tiempo libre.

El picante añadido a la situación es el hecho de que mientras estábamos resolviendo problemas técnicos, Miro anuncióganadores, entre los que se encontraban Semyon Volkov y Roman Krasilnikov con un complemento similar de Figma2Miro. Su proyecto tomó el sexto lugar. A diferencia de nuestra implementación, que era más un complemento para Figma (desde el punto de vista de la interfaz de usuario y la plataforma que inicia la exportación), crearon el complemento para Miro.

Pero, desafortunadamente, la solución creada por los chicos no satisfizo las necesidades de los robots, y es por eso que continuamos trabajando en nuestro propio complemento, que pronto estuvo listo. El complemento se llama Figmiro.

Ahora, gracias a Figmiro, nuestros diseñadores están ahorrando mucho tiempo importando diseños de un sistema a otro. Por ejemplo, esa hora de descargar diseños de una cita de Sergey Kutkov se convirtió en 2 (!) Minutos.

En resumen, quiero señalar que el trabajo en Figmiro fue más de naturaleza investigadora. Cuando trabaja en la integración de dos sistemas de terceros de una forma u otra, debe estar preparado para un alto nivel de incertidumbre, falta de información en el marco de la solución del problema. En nuestro caso, pasamos la mayor parte del tiempo investigando las capacidades API de ambas plataformas, probando hipótesis y encontrando soluciones.

Lo que puede hacer el complemento Figmiro


Todo funciona igual que solíamos hacer en Sketch: seleccione marcos, haga clic en el botón y los diseños aparecerán en Miro:

  • Suba los cuadros seleccionados al tablero seleccionado en Miro.
  • Sobrescribir diseños previamente descargados manteniendo una posición en los tableros.

En el futuro, planeamos admitir el complemento y optimizar su trabajo de manera que se acelere el proceso de descarga y sincronización. Si Miro actualiza su API, reconstruiremos el complemento para él.

El complemento de Figmiro funcionó


El diseñador Anton Magartsov, el desarrollador líder de iOS Roman Churkin, los desarrolladores frontales Anton Eryshev e Ilya Krupnov, el gerente de desarrollo del servidor Andrei Muravyov y el director artístico Sergey Kutkov.

Todos los enlaces:

Complemento en Github ,
Proxy en Github ,
Complemento en Figma .

Estamos recopilando comentarios sobre el funcionamiento del complemento en GitHub.

PD
: Sabemos lo difícil que es crear API públicas para servicios, al tiempo que satisfacemos al máximo todas las necesidades de los usuarios de estas API.

El equipo de Redmadrobot agradece a los chicos de Miro y Figma por la oportunidad de automatizar nuestros procesos comerciales de rutina.

More articles:


All Articles