Esta breve guía le guiará a través de los pasos necesarios para configurar su entorno de desarrollo para escribir y ejecutar un simple plugin dentro de Figma. Al final de esta guía, tendrás un plugin que abre un modal, pide al usuario un número, y crea tantos rectángulos en el lienzo.
Estas instrucciones pretenden que desarrolles plugins en TypeScript usando Visual Studio Code. Ninguno de los dos es obligatorio: puedes desarrollar plugins en cualquier editor de texto y utilizar cualquier lenguaje que pueda traducirse a JavaScript (¡incluyendo el propio JavaScript!). Pero encontramos que TypeScript y Visual Studio Code proporcionan la mejor experiencia de edición. Proporcionamos un archivo de definición de tipos para que esta experiencia sea aún mejor.
Instalar Visual Studio Code
Visual Studio Code se puede descargar aquí: https://code.visualstudio.com/.
Esto te permite usar TypeScript, que creemos que facilita mucho el desarrollo de buenos plugins.
Instalar Node.js y NPM
Puedes descargar Node.js aquí, que incluirá NPM: https://nodejs.org/en/download/.
Instalar TypeScript
Para instalar TypeScript, ejecuta sudo npm install -g typescript en un terminal. (Esto no es instalado por Visual Studio Code).
Obtener la aplicación de escritorio de Figma
En este momento, el desarrollo y las pruebas de los plugins deben realizarse utilizando la aplicación de escritorio de Figma. Esto es porque Figma necesita leer su código guardado como un archivo local. La aplicación de escritorio de Figma se puede descargar aquí: https://www.figma.com/downloads/.
Si ya tienes la app de escritorio, asegúrate de actualizarla a la última versión, ya que se han añadido varias características específicamente para ofrecer una mejor experiencia de desarrollo de plugins.
Ingresa en tu cuenta y abre el editor de archivos en la aplicación de escritorio de Figma
Puedes abrir cualquier documento existente o crear uno nuevo.
Ve al Menú > Plugins > Desarrollo > Nuevo Plugin…
Esto hará que aparezca el modal «Crear un plugin» para crear un plugin de muestra. Dale un nombre, y luego elige «Con UI & APIs del navegador» en la siguiente pantalla. Guarde el plugin en cualquier lugar del disco.
Abra la carpeta de código
Abra la carpeta que acaba de crear con Visual Studio Code. Los plugins se definen usando múltiples archivos y querrás ser capaz de editarlos todos, así que un truco es abrir la propia carpeta en lugar de cualquiera de los archivos dentro de ella.
Instalar las tipificaciones
Ejecutar npm install --save-dev @figma/plugin-typings.
Configurar la compilación de TypeScript
Pulsar ⌘⇧B (Ctrl-Shift-B para Windows) en Visual Studio Code, luego seleccionar tsc: watch - tsconfig.json. Esto le dice a Visual Studio Code que compile code.ts en code.js. Estará atento a los cambios en code.ts y volverá a generar automáticamente code.js cada vez que se guarde code.ts.
Ejecute el plugin de muestra
Cree un nuevo archivo de diseño en la aplicación de escritorio de Figma. Vaya al Menú > Plugins > Desarrollo > SuNombreDePlugin para ejecutar su plugin recién creado. El código de ejemplo mostrará una interfaz de usuario que le permite elegir un número, y luego crea ese número de rectángulos.
Haga algunos cambios de prueba
Haga algunos cambios simples en code.ts para familiarizarse con el Código de Visual Studio y la API del plugin de Figma (no código.js – que se genera y se sobrescribe).
¡Ejecuta tu nuevo código!
Vuelve a la aplicación de escritorio de Figma y ve al Menú > Plugins > «Ejecutar el último plugin» (O pulsa ⌥⌘P para Mac o Ctrl+Alt+P para Windows). Esto volverá a ejecutar el último plugin que ejecutó, es decir, su plugin.
¡Eso es todo! ¡Ahora está listo para desarrollar plugins en Figma!