Construyendo el Generador de Código de Widgets de Figma

Hola a todos. Espero que estén teniendo una conferencia encantadora hasta ahora. Mi nombre es Jenny y soy ingeniera en Figma. Estoy basada en Leeds, en el Reino Unido, así que para aquellos de ustedes que no sabían que Figma tenía un equipo de producto en Europa, ahora lo saben, y bienvenidos a esta charla sobre el Generador de Código de Widgets de Figma. Vamos a utilizarlo para construir un widget de FigJam y luego hablar sobre cómo se hizo. En mi pantalla ahora, pueden ver FigJam. Esta es la herramienta de pizarra colaborativa en línea de Figma donde puedo hacer cosas como agregar una nota adhesiva, puedo hacer algunos dibujos, y lo más importante para esta charla, puedo agregar un widget. Ahí vamos. Esto puede ser visto e interactuado por todos los que están en el archivo, que en este momento, desafortunadamente, soy solo yo. Y no están limitados a los widgets existentes. Entonces, para hacer que los archivos de FigJam sean lo más divertidos y flexibles posible, existe una API de widgets pública, una API basada en componentes bastante similar a React, que te permite escribir tus propios widgets. Y eso es lo que vamos a hacer ahora. Así que si vamos a Figma design, tengo mi design para mi widget aquí. Será simplemente un widget de votación simple con un botón aquí que se presiona para votar y que aumentará el número total de votos hasta ahora y luego colocará tu foto de perfil en un círculo y las alineará todas en la parte inferior para cuantas veces hayas votado. Entonces, también tengo un editor de código en el otro lado y este es el código de cómo se ve mi proyecto de widget. Nuevamente, es muy simple. Voy a escribir todo mi código en code.tsx y tengo un archivo package.json con un par de scripts. El que queremos es watch. Entonces, si lo ejecuto ahora, npm run watch, debería iniciar mi widget, colocar todo su código compilado en code.js y si vuelvo a FigJam, puedo ejecutar mi widget yendo a widgets, development, simple vote, y ahí vamos, dice, hola, soy un widget, que es lo que la función del widget está devolviendo. Y puedo agregar algunos signos de exclamación a esto y se actualizarán en tiempo real. Entonces, espero que este código de widget te resulte bastante familiar. Se parece mucho a React utilizando componentes JSX y algunas etiquetas de diseño específicas de Figma. Entonces, puedo tener un diseño automático, puedo tener un texto, puedo tener un rectángulo y muchos otros componentes que son similares a las cosas que puedes crear en Figma. Entonces, si volvemos a nuestro design, si quisiéramos comenzar a codificar esto desde cero, tendríamos que revisar nuestro diseño de votación simple y ver que es un marco con un diseño automático establecido. Entonces, tendríamos que comenzar agregando un diseño automático y luego tendríamos que ver las propiedades en ese diseño automático, como el espacio de cuatro y poner esto como espaciado y puedes ver que llevaría bastante tiempo. Entonces, a principios de este año, ayudé como parte de nuestra semana de creación bianual a crear un complemento generador de código de widgets y si lo ejecutamos, esto está disponible para todos en la comunidad de Figma, así que si simplemente buscas Generador de Código de Widgets de Figma, esto es algo que puedes instalar tú mismo en tu aplicación de Figma. Pero si lo ejecutamos aquí, y solo minimizaré esta ventana, lo ejecutamos y hacemos clic en la cosa de la que queremos obtener el código, nuestro widget de votación simple, puedes ver que genera todos estos componentes para nosotros, con un diseño que se parece bastante al diseño de las capas en Figma, y podemos copiar todo eso y pegarlo en nuestro editor de texto. Está dando un error con avatar, así que simplemente lo comentaremos y volveremos a él en un minuto. Pero lo que tenemos es un

Bien, en simple vote, cómo vamos a hacer eso es almacenando algún estado de nuestros votantes. Probablemente reconozcas esto de React. En lugar de decir use state, vamos a decir you sync state, que es parte de la API de widgets de Figma, dale un nombre y comiénzalo como un array vacío. Como este es un archivo de TypeScript, también le daré un tipo que sé que va a ser user. Y luego queremos actualizar este array de votantes cuando alguien haga clic en el botón. Voy a crear una función onclick. Y cuando hagan clic, queremos obtener tu perfil como la persona que ha votado, porque eso nos permitirá obtener tu foto de perfil. Y para hacer eso, podemos decir que el votante es Figma.CurrentUser. Y Figma aquí es un objeto global que se proporciona en el tiempo de ejecución del widget y nos permite obtener cosas como el usuario actual y mucha otra información sobre lo que está sucediendo en el archivo. Así que ahora tenemos este votante. Sé que este votante a veces puede ser nulo. Probablemente no lo sea, pero solo para protegernos contra eso, voy a decir que si no tenemos una foto, votante, no hagamos nada. Y si tenemos un votante, vamos a establecer los votantes, obtener nuestra lista original y agregar un nuevo votante a la lista. Y nuestro OnClick no sirve de nada si no lo colocamos en ningún lugar. Así que queremos que suceda cuando hagamos clic en este botón, que podemos encontrar en el diseño porque se llama VoteButton. Y todas estas etiquetas pueden tener un OnClick adjunto. Así que voy a poner ese OnClick allí. Y también necesitamos usar el array de votantes para actualizar el número aquí. Anteriormente, tenía tres valores codificados, en su lugar, vamos a usar voters.length.

Entonces, ha vuelto a cero, lo cual es bueno. Y si hacemos clic en este botón, aumentará cada vez que hagamos clic. Genial. Pero los avatares en la parte inferior siguen siendo tres. Eso se debe a que todavía están codificados de forma estática aquí. Así que en lugar de este código estático, lo que queremos hacer es recorrer nuestros votantes. Y cada vez que obtengamos un votante, queremos devolver un avatar.

Ahora tenemos tres. Cuando hacemos clic, tenemos cuatro, cinco. Y también en estos avatares, necesitan obtener una foto de un perfil de usuario. Así que se lo voy a pasar a esto. Vamos a decir que va a recibir una URL de foto, pero una URL de foto. Nuevamente, esto podría ser indefinido. Así que solo para mantener contento a TypeScript, establezcamos esto como una cadena vacía de avatar por el momento. No recibe una URL de foto. Pero como es solo una función que hemos copiado y pegado del generador de código, que recibe props. Voy a extender estos props y decir que recibe una URL de foto, que es una cadena en el diseño de este componente, podemos ver que tiene un relleno de imagen aquí, que es mi bonito dibujo de stickman. Y este relleno de imagen se traduce aquí en las propiedades y espera una URL como origen. Así que podemos pasar esa URL de foto de props como origen. Y ahí estoy. Y ya no necesitamos el horrible borde rojo. Podemos volver a un elegante blanco. Y si sigo votando, hay más y más de mí. Y tenemos un widget funcional. Podemos agregar mucho más si queremos.

Entonces, por ejemplo, como dije antes, nuestro componente de avatar, porque recibe props del tipo de su marco de nivel superior. En este caso, que es solo un marco, podríamos agregar un onclick a este avatar. Entonces, cuando hagamos clic en él, seré eliminado de los votantes. De hecho, hice una función de eliminación anteriormente. Así que no tendrías que verme dolorosamente pasar por cómo hacer un splice en un array.

Si agrego esta función de eliminar voto aquí, ni siquiera necesitamos agregar una propiedad adicional al avatar. Simplemente podemos pasarla directamente como un evento onclick. Si lo escribo correctamente, debería eliminar el voto. Necesita recibir un índice porque está eliminando algo en un índice específico del array. Así que solo tenemos que actualizar nuestro map para pasar también el índice. Y ahora no sucede de inmediato. Cuando hago clic en mi avatar, me eliminará. Así que si voto accidentalmente demasiadas veces, puedo eliminar algunos votos de nuevo. Genial.

Y prometí al principio que pasaríamos por cómo funciona este generador de código de widget. Está escrito como un complemento de Figma, por lo que se ejecuta en un iframe, en un sandbox, con un runtime, un runtime JavaScript proporcionado por Figma. Y de manera similar a los widgets, esto utiliza la API pública de complementos de Figma. Así que hay un sitio web completo con referencia de API y todo lo que desees aquí. Todo está documentado y esperando que construyas tus propios complementos con él. Puede leer y escribir en un archivo de Figma. Y al igual que los widgets, utiliza este objeto global de Figma que se proporciona en el runtime para acceder a todo en el archivo. Pero no vamos a repasar toda esta documentación de la API juntos. Puedes hacerlo en tu propio tiempo si quieres.

Lo que voy a mostrarte es algo divertido que podemos hacer si abrimos la consola en la aplicación Figma Electron y eliminamos toda la información que muestra en este momento. Lo que podemos hacer es escribir Figma y obtener acceso a este objeto global de Figma aquí. Tenemos un montón de cosas. Tenemos metadatos como los usuarios activos, que seré yo. Tenemos funciones para crear cosas. Tenemos funciones para acceder a todos los estilos en un archivo, todos los componentes, todas las imágenes. Realmente, el mundo es tuyo. Si usamos uno de ellos, podemos decir Figma create rectangle y creará un rectángulo en nuestro archivo. Podemos decir Figma create ellipse y creará una elipse. Y luego también podemos inspeccionar estas cosas en el archivo. Así que si seleccionamos esto y luego decimos Figma current page selection 0, esto es uno que he hecho antes.