Los widgets son objetos personalizados e interactivos que se colocan en un archivo de Figma o Figjam para ampliar la funcionalidad y hacer todo un poco más divertido. Se escriben en un estilo declarativo similar a los componentes de React, que se traduce para convertirse en un nodo en el lienzo. ¿Entonces se puede hacer lo contrario, del lienzo al código? ¡Sí! Discutiremos cómo utilizamos la API pública de complementos de Figma para generar código de widgets a partir de un archivo de diseño y crearemos un widget funcional juntos utilizando esto.
Video Summary and Transcription
Esta charla presenta el Generador de Código de Widgets de Figma y demuestra cómo construir un widget de FigJam utilizando esta herramienta. El orador discute la implementación de la funcionalidad de votación, la funcionalidad de avatar y la funcionalidad de eliminar voto. También explican cómo funciona el complemento Generador de Código de Widgets y cómo acceder a propiedades y modificar nombres utilizando la API de complementos de Figma.
Available in English
1. Introducción al Generador de Código de Widgets de Figma
Short description:
Hola a todos. Mi nombre es Jenny y soy ingeniera en Figma. En esta charla, utilizaremos el Generador de Código de Widgets de Figma para construir un widget de FigJam y discutir su creación. FigJam es una herramienta de pizarra colaborativa en línea donde puedes agregar widgets. Para hacer que los archivos de FigJam sean más flexibles, existe una API de widgets pública que te permite escribir tus propios widgets. Comenzaremos diseñando un widget de votación simple y escribiendo el código para ello. Luego, utilizaremos el complemento del generador de código de widgets para generar los componentes necesarios. Al utilizar estos componentes, podremos ver nuestro diseño cobrar vida en FigJam. ¡Comencemos!
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
2. Implementación de la Funcionalidad de Votación
Short description:
Si usamos el componente Simple Vote en nuestro código principal de widget, comenzará a parecerse a nuestro diseño. Sin embargo, nos faltan las imágenes en la parte inferior, lo cual está relacionado con el código comentado. Para resolver esto, debemos ir al componente avatar e incluir su código en nuestro archivo. Una vez que hagamos eso, el widget tendrá la apariencia deseada. Para hacer que el botón sea funcional, debemos agregar un evento onclick que actualice el array de votantes y muestre la imagen del usuario. Logramos esto utilizando la API de widgets de Figma para sincronizar el estado y almacenar el estado de los votantes, y el objeto Figma.CurrentUser para obtener el perfil del usuario. Finalmente, adjuntamos el evento onclick al botón de votación y actualizamos el número mostrado utilizando la propiedad voters.length.
La función se llama Simple Vote. Entonces, si tomamos este componente Simple Vote y lo usamos en nuestro código principal de widget, volvamos a Big Jam, está empezando a verse bastante como nuestro design ya, ¿verdad? Tenemos el degradado, tenemos el texto, todo está colocado en el lugar correcto, pero nos faltan las imágenes en la parte inferior, y eso probablemente tenga algo que ver con lo que acabo de comentar. Así que si lo volvemos a poner, se queja de que no puede encontrar el avatar. Y esto se debe a que en nuestrodesign aquí, los marcos 6, 7 y 8, todos son instancias de un componente llamado avatar, y en lugar de hacer esto en línea y escribir el código tres veces, lo que queremos que hagas es ir al componente avatar y obtener el código de eso y ponerlo en tu archivo como hicimos con simple vote. Así que ahora tenemos una función para avatar, y estas instancias están un poco más contentas. Y si volvemos a FigJam de nuevo, si tienes ojos muy agudos, podrás ver que hay tres círculos blancos tenues. Eso se debe a que están contorneados en blanco. Si cambiamos el contorno a rojo solo para ver dónde están los círculos, ahí lo tenemos. Básicamente tenemos nuestro widget. Aunque no hace nada. Así que necesitamos agregar un onclick a este botón. Entonces, cuando hagas clic, te agregará a la lista de votantes, aumentará ese número y colocará tu imagen en la parte inferior.
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.
3. Implementación de la Funcionalidad de Avatar
Short description:
Los avatares en la parte inferior todavía están codificados de forma estática. Queremos recorrer nuestros votantes y devolver un avatar para cada uno. Los avatares necesitan obtener una foto de un perfil de usuario, por lo que pasamos la URL de la foto como origen. Ya no necesitamos el borde rojo y podemos volver a un elegante blanco. Podemos agregar más funcionalidad, como un evento onclick para eliminar un votante utilizando una función de eliminación.
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.
4. Implementación de Eliminar Voto y Generador de Código de Widget
Short description:
Si agrego la funcionalidad de eliminar voto, podemos eliminar votos haciendo clic en los avatares. El generador de código de widget es un complemento de Figma que utiliza la API pública de complementos de Figma. Puede leer y escribir en un archivo de Figma y proporciona acceso al objeto global de Figma. En la consola de la aplicación Figma Electron, podemos usar el objeto Figma para crear e inspeccionar objetos en el archivo.
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.
5. Accediendo a Propiedades y Modificando Nombres
Short description:
Podemos acceder a todas las propiedades de la interfaz gráfica de usuario de Figma, como el diseño automático, el espaciado, el ancho, el relleno y los hijos, a través de la API del complemento. Al inspeccionar los hijos, podemos navegar a través de diferentes nodos y comprender la relación entre la API del complemento y el código de widget generado. La API del complemento nos proporciona las propiedades necesarias, que modificamos para que se ajusten a las convenciones de React. Eliminamos los valores predeterminados, los mapeamos a las etiquetas apropiadas e incorporamos una interfaz frontal HTML para crear el complemento.
La selección es una matriz. Así que solo queremos acceder a la primera cosa. Podemos inspeccionar todo esto. Entonces, todo lo que puedes acceder en la interfaz gráfica de usuario de Figma, como la información de diseño automático, el espaciado, el ancho, el relleno, los hijos, podemos obtener todo eso a través de la API del complemento. Si entramos en los hijos, podemos ver que tiene el nodo de marco, el nodo de rectángulo y otro nodo de marco y profundizar hasta el final allí. Y probablemente estés empezando a unir los puntos aquí entre la información que nos proporciona esta API del complemento y el código de widget generado. Realmente es así de simple, básicamente hemos tomado las propiedades que nos da la API del complemento. Hemos cambiado algunos de los nombres para que sean un poco más parecidos a React. Entonces, por ejemplo, clips-content false se ha convertido en overflow en algún lugar. Sí, overflow visible, clips-content false. Nos hemos deshecho de los valores predeterminados, los hemos mapeado para usar la etiqueta correcta. Entonces, si es un marco que utiliza el diseño automático, lo hemos mapeado a Auto-layout. Y luego hemos agregado una interfaz frontal HTML y creado un complemento. Algo que potencialmente es interesante son las instancias. Como hablamos antes con Avatar teniendo su propia función y no estando definido en línea. Si miramos el marco 6 aquí, esto es una instancia y esto vendrá como un nodo de instancia y tendrá un componente principal en él. Componente principal, que es cómo obtuvimos el nombre de la cosa para usarlo como etiqueta de instancia. Entonces, componente principal y es una instancia de Avatar. Y luego, lo que sucede desde este diseño de Figma una vez que hemos generado el código del componente declarativo, lo que tenemos aquí cuando se ejecuta como un widget en el tiempo de ejecución del widget, básicamente lo mapeará de nuevo a un nodo de lienzo, algo similar a lo que vimos en la API del complemento, que es por qué podemos obtener una buena correspondencia uno a uno en cosas como gradientes o SVG. O cosas que de otra manera podrían ser bastante complicadas. Y esto también explica por qué los widgets no son solo para fig jam, también se pueden ejecutar en el archivo de diseño. Widgets, desarrollo, voto simple. Aquí está nuestro voto simple. Y puedo interactuar con él aquí en el archivo de diseño. Y se ve exactamente igual. Genial. Este generador de código de widget, como dije antes, está disponible en la comunidad si quieres usarlo. Y gracias por escuchar. Si te gustó, por favor, por favor, adelante, crea tus propios widgets, crea tus propios complementos, compártelos con nosotros. Y contáctame en Twitter si tienes alguna pregunta. Gracias a todos. Gracias. Adiós.
