Saltar al contenido

Su complemento para Figma

Su complemento para Figma

Nuestro equipo de diseñadores y PM en su trabajo a menudo se encuentran con ciertas actividades de rutina. Imagina que un cliente nos ha encomendado la tarea de desarrollar un diseño para una aplicación móvil. Los analistas comerciales han descrito los requisitos y características.

Entonces entran en juego los diseñadores, diseñando pantallas de forma paulatina y coordinándolas con el cliente final. Como resultado, había más de 250 pantallas con varios estados. He aquí una tarea muy difícil. Surge la pregunta: ¿Cómo podemos realizar un seguimiento de los estados de cada pantalla (TODO, En progreso, Listo para revisión, Aceptado, etc.)? Este problema es particularmente grave si el proyecto de diseño es lo suficientemente grande y la discusión se lleva a cabo a diario.

Antes de encontrar una solución a este problema, el diseñador mantuvo una hoja especial de Google, donde transfirió todas las capturas de pantalla de Figma con los enlaces a la pantalla, el estado actual y el historial. Este enfoque tenía un vagón y un pequeño carro de desventajas:

  • grandes costos laborales para crear una mesa;
  • el factor humano (es posible que olvidemos actualizar el estado);
  • tomó mucho tiempo actualizar los estados después de llamar al cliente.

A nadie le gustan las acciones monótonas, especialmente cuando el resultado del trabajo realizado se vuelve obsoleto al día siguiente. Por eso, a nuestros PM y diseñadores les gustaría algo más conveniente, simple y, preferiblemente, automatizado.

Imagen 1. Un ejemplo de cómo se ve un archivo FIGMA típico para una aplicación móvil. Específicamente, hay más de 400 pantallas.

Parte 1. Comprensión del proceso actual

En el proceso de comunicarnos con los chicos del lado del diseño y del PM, descubrimos que Figma no tiene una capacidad nativa para asignar estado a alguna pantalla. Es extraño que los desarrolladores aún no hayan implementado tal característica, pero dejémoslo en conciencia.

Los usuarios de Figma han encontrado algunas soluciones interesantes al problema. El más popular es agregar un borde (trazo) de un color u otro alrededor de la pantalla, lo que indica el estado de la pantalla.

Complemento tecnologiapc FigmaFigura 2. Ejemplos de estados para pantallas en uno de los proyectos.

Esta es una solución bastante buena, que tiene varios inconvenientes:

  • puede haber muchos estados;
  • para asignar un estado, debe realizar una serie de movimientos corporales: seleccione una pantalla, cree un nuevo trazo con las manos e ingrese allí el color deseado. No parece muy conveniente (de 3).
Complemento tecnologiapc FigmaImagen 3. Flujo para agregar un trazo.

Cabe señalar que existen complementos listos para usar para Figma que simplifican ligeramente este procedimiento, pero no eran adecuados para nosotros debido a la imposibilidad de su posterior integración con la API de Google.

Después de comunicarse con el grupo de iniciativa, los requisitos finales para la solución en desarrollo fueron los siguientes:

  • facilitar la asignación de estados dentro de Figma para cada pantalla;
  • Desarrolle una herramienta para crear Hojas de cálculo de Google con estados de un proyecto Figma listo para usar y actualícelo con el clic de un botón.

Parte 2. API de Figma

Lo primero por lo que quiere agradecer a los desarrolladores y odiarlos es la API de Figma. Por un lado, es muy conveniente, detallado y lógico. Durante su tiempo en el estudio, nunca pisamos ningún rastrillo.

Todo el proyecto de Figma se presenta en forma de un enorme JSON con un montón de campos que describen ciertas propiedades de pantalla (contornos, nombres de pantalla, elementos secundarios, etc.).

Por otro lado, es una pena que sea REST normal y no GraphQL. Esta falla apareció virtualmente tan pronto como intentamos solicitar una representación JSON de nuestro proyecto actual. Para ello fue necesario enviar una solicitud a:

https://www.figma.com/file/:key/

La clave es la identificación única del documento que desea solicitar.

Permítanme recordarles que el proyecto constaba de más de 400 capturas de pantalla. El peso total de JSON es de 14,5 Mb. Sí, GraphQL sería genial …

Los chicos se equivocaron en el parámetro profundidad, que le dice al servidor qué tan detallado JSON nos debe proporcionar. En nuestro caso, profundidad = 1 – proporcione todas las páginas, 2 – proporcione todas las páginas y subelementos que se encuentran dentro de estas páginas (capturas de pantalla).

Después de indagar un poco con la documentación, encontramos las URL necesarias que nos permiten obtener el esqueleto JSON del proyecto que necesitamos. El desarrollo se suspendió y pasamos al desarrollo de MVP.

Parte 3. API de Figma -> Hojas de cálculo de Google

Habiendo descubierto más o menos cómo extraer información de Figma sobre el proyecto de nuestro interés, pasamos a crear un script para una hoja de cálculo de Google.

Anteriormente, esta tabla se creaba y actualizaba manualmente, lo que nos molestaba. El primer objetivo era crear automáticamente una matrícula para un proyecto existente.

Todos los servicios de Google Office (Doc, Sheet, Slides) tienen su propio motor JS integrado que le permite ampliar la funcionalidad de estos servicios. El lenguaje de desarrollo fue llamado por los chicos Google AppScript. Es esencialmente un superconjunto de JavaScript con numerosos complementos. El idioma se suministra con documentación muy extensa y constantemente actualizada. Aproximadamente el 50% traducido al ruso.

Enlace: https://developers.google.com/apps-script

Al estudiar la documentación, nos dimos cuenta de que teníamos mucha suerte. Google acaba de actualizar su motor a ES6, lo que permitió un código más simple y conciso con muchas construcciones más convenientes y azúcar sintáctico.

Complemento tecnologiapc FigmaImagen 4. La interfaz del IDE integrada en los servicios de Google.

La lógica del script en desarrollo era muy simple:

  1. Recopile la configuración de la pestaña Configuración;
  2. Solicite una representación JSON del documento Figma del servicio para el que desea crear una tabla;
  3. Analizar el JSON recibido y crear tablas;
  4. Agregue estilos especiales (relleno de celda) a las tablas compiladas de acuerdo con ciertas reglas;
  5. Después de comparar la descarga anterior con la nueva, anote las fechas y los estados de actualización (Nueva pantalla, Estado actualizado o en blanco).

Para mostrar el script del que extraer datos del proyecto Figma, hemos creado la pestaña Configuración.

Complemento tecnologiapc FigmaFigura 5: Configuración de Figma Sync Script -> Hojas de cálculo de Google

Figma ID: identificador único del proyecto;

Token: token JWT para la autorización de Figma. Puede utilizar personal o corporativo.

Páginas para exportar: aquí tenemos que especificar qué páginas queremos exportar desde Figma.

Después de realizar los ajustes, puede abrir el menú y comenzar a crear o actualizar la tabla.

Complemento tecnologiapc FigmaImagen 6. Un ejemplo de descarga de Figma.

Echemos un vistazo más de cerca a cómo decidimos ampliar la funcionalidad de Google Sheets.

Primero debe decir qué y cómo está organizado en la tabla. Cada pestaña es una página separada en Figma con dibujos de pantalla. Hemos decidido dividir las páginas según el tamaño de la pantalla (móvil, escritorio, tableta).

En la columna Pantalla, cada fila representa una pantalla en la página actual de Figma. Se crea como un enlace para acceder rápidamente a él en Figma. Cada pantalla tiene la fecha de la última actualización, su estado e información adicional (nuevo marco – si esta pantalla se ha agregado desde la última sincronización, o Estado vacío – si no ha recibido ningún estado).

Lo más conveniente es que esta tabla se genera en modo totalmente automático, lo que le ahorra mucho tiempo al jefe de proyecto. Anteriormente, los datos se ingresaban manualmente en la tabla.

Ahora puede aplicar varios filtros a esta tabla para obtener una instantánea rápida de qué capturas de pantalla se han actualizado, cuáles han sido aceptadas por el cliente y cuáles requieren atención y ajustes.

Desde nuestro punto de vista ha demostrado ser una herramienta muy funcional, pero aún nos queda un sector más que el «trabajo manual».

Parte 4. Complemento para Figma

Pudimos establecer sincronización entre el proyecto en Figma y la tabla de Google, donde se agregaron automáticamente estados actualizados. Sin embargo, sigue siendo una tarea más importante. PM todavía estaba configurando manualmente el trazo y el color para cada pantalla en Figma. Este proceso es laborioso y propenso a errores, lo que significa que debe simplificarse / automatizarse. Decidimos prestar atención a la funcionalidad de los complementos para Figma.

Los desarrolladores de Figma le permiten integrar sus widgets para ampliar la funcionalidad. La aplicación obtiene acceso a la representación JSON del proyecto y le permite manipularlo utilizando la API proporcionada amablemente por el equipo de Figma.

Mientras estudiaba la documentación (https://www.figma.com/plugin-docs/intro/), quedó claro que se necesita una comprensión básica de React + TypeScript para desarrollar complementos. Tenía estas habilidades y se decidió crear mi propio complemento.

La funcionalidad era bastante simple: permite que el usuario del complemento seleccione un grupo de pantallas y les asigne un estado fácilmente.

Hemos decidido «codificar» los tipos de nuestros estados y sus colores correspondientes en nuestro complemento. no tenía intención de abrirlo. Finalmente, se desarrolló una extensión muy simple durante un par de noches.

Complemento tecnologiapc Figma Figura 7. Complemento para Figma.

En la primera lista desplegable, puede seleccionar el estado de la pantalla actual.

En la segunda lista desplegable, puede seleccionar el ancho del trazo. Se necesita uno más grande para ver el estado de la pantalla durante un examen superficial de todo el proyecto (cuando se ven entre 10 y 20 miniaturas de pantalla en el espacio de trabajo de Figma).

Esta aplicación minimalista redujo significativamente la laboriosidad de crear trazos para cada pantalla y redujo el número de errores.

Resultado

Durante la implementación del proyecto, pudimos familiarizarnos con las posibilidades que los servicios de Figma y Google ofrecen a los desarrolladores. Gracias a estos servicios, hemos minimizado el trabajo rutinario de los PM y diseñadores y, con suerte, los hemos hecho un poco más felices 🙂

Estas extensiones ya se utilizan en numerosos proyectos y están recibiendo comentarios positivos de los usuarios. Bueno, e informes de errores, por supuesto;).

Si encuentra un error, seleccione un fragmento de texto y presione Ctrl + Entrar