Construyendo el Generador de Código de Widgets de Figma

Rate this content
Bookmark

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.

19 min
24 Oct, 2022

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including:
- User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.