Por qué ahora es el momento perfecto para crear plugins de Figma
Si sabes abrir un editor de código y escribir HTML, CSS y un poco de JavaScript, ya puedes crear plugins en Figma. Si no, ahora es el mejor momento para aprender los básicos. La diferencia con hace unos años es que hoy cuentas con asistentes de código (Cursor, Copilot, Claude Code) que te generan interacciones completas, te explican APIs y te corrigen errores y dudas sobre la marcha.
Los plugins automatizan pasos, estandarizan cómo trabaja el equipo y elevan la calidad del resultado. Si cada handoff te obliga a renombrar capas, alinear elementos o comprobar contrastes, un plugin convierte esa tarea aburrida y tediosa en una acción fiable y repetible. El retorno es inmediato: menos clics, menos errores, más consistencia.
Ahora, una dosis de realidad: no construyas un plugin para algo que haces una vez al mes en 5 min. Construye uno cuando detectes una fricción continua y el resultado deseado sea fácil de describir en una frase.
Con IA asistida, crear tu primer plugin es accesible, rápido y útil desde el día uno. Vamos a demostrarlo con un ejemplo mínimo que podrás ejecutar en menos de 30 minutos.
Qué puedes hacer con un plugin de Figma
Un plugin de Figma no es más que un pequeño programa que amplía lo que Figma puede hacer por sí mismo. Algunos actúan de forma invisible —reordenan capas, renombran elementos, aplican estilos— y otros muestran una interfaz que te guía paso a paso o te presenta información útil. Lo importante es entender que no hay límite entre lo que puedes leer y lo que puedes transformar dentro del canvas.
La clave está en que el plugin puede acceder a todo lo que ves: nombres de capas, tamaños, colores, componentes, variables, texto, imágenes… Puede leerlos, modificarlos, combinarlos o exportarlos. De hecho, cualquier acción repetitiva que hagas más de dos veces por semana probablemente pueda automatizarse.
Y lo mejor es que no necesitas publicar nada para probarlo. Puedes crear tu plugin, ejecutarlo solo tú y guardarlo localmente. Figma lo trata como una herramienta más en tu entorno.
Los plugins amplían Figma, pero lo más interesante es que amplían tu propia productividad. Te convierten en diseñador que automatiza sus tareas y las de su equipo.
Qué hace que un plugin sea realmente útil
Veamos tres casos conocidos para entenderlo mejor:
Super Tidy
Reordena y alinea elementos con un clic. Ahorra tiempo y mantiene los archivos limpios. Su poder está en la simplicidad: un problema claro, una acción directa.
Stark
Analiza los colores del canvas para comprobar contraste y accesibilidad. No modifica nada, solo lee y muestra información útil. Enseña que un plugin también puede auditar y educar.
Perspective Toolkit
Permite deformar o transformar objetos desde controles visuales. Es el tipo de plugin que muestra que Figma puede ir más allá del plano 2D.
No necesitas una idea gigante. Un buen plugin empieza resolviendo una fricción pequeña, pero frecuente. Y casi siempre nace de una queja personal: “¿Por qué tengo que hacer esto a mano?”. Esa pregunta suele ser el origen de un gran plugin.
Arquitectura: Cómo funciona por dentro
Todo plugin de Figma se basa en una estructura muy simple: un archivo de configuración y dos entornos que se comunican entre sí.
- manifest.json: el archivo que le dice a Figma cómo se llama el plugin, qué archivos usa y en qué parte del editor puede ejecutarse.
- Core (code.js): es el cerebro. Aquí vive la lógica que lee o modifica el canvas. Corre dentro del editor, sin acceso a internet.
- UI (ui.html): es la interfaz que ve el usuario. Corre en un iframe, puede tener botones, inputs o sliders y sí puede conectarse a internet.
Ambas partes se comunican con mensajes:
figma.ui.postMessage({ tipo: "saludo", texto: "Hola desde el core" })
y desde la UI se escucha el mensaje:
onmessage = (event) => {
console.log(event.data.pluginMessage.texto)
}
Puedes imaginarlo así:
[Usuario] → [UI del plugin] ↔ [Core del plugin] → [Canvas]
Este modelo divide el trabajo de forma natural: el Core hace los cambios en el archivo, la UI los muestra o permite configurarlos.
Tu primer plugin sin frameworks (paso a paso)
Vamos a crear un pequeño plugin que muestre información sobre el frame seleccionado. No necesitas React, bundlers ni dependencias. Solo Figma y un editor de código.
Paso 1: Crear el plugin
- Menú → Plugins & widgets → New plugin…
- Elige Figma design (no multi‑product).
- Elige Default (el más simple, sin dependencias) → Save as… → Open folder.
Te genera dos archivos:
manifest.jsoncode.js
Ejemplo real de manifest.json generado por Figma:
{
"name": "TutorialPlugin",
"id": "1568238114946214104",
"api": "1.0.0",
"main": "code.js",
"capabilities": [],
"enableProposedApi": false,
"documentAccess": "dynamic-page",
"editorType": ["figma"],
"networkAccess": { "allowedDomains": ["none"] }
}
Resumen del JSON: corre solo en Figma, ejecuta code.js, no tiene UI y no usa internet.
code.js viene así:
figma.closePlugin();
Paso 2: Primer comportamiento útil (sin UI)
Como este template no tiene interfaz, vamos a leer la selección y mostrar un resumen con figma.notify().
Reemplaza code.js por:
const selection = figma.currentPage.selection
if (selection.length === 0) {
figma.notify("Selecciona un frame o un rectángulo primero")
figma.closePlugin()
} else {
const firstNode = selection[0]
const totalNodes = selection.length
figma.notify(`Seleccionado: ${firstNode.name} (${firstNode.width}x${firstNode.height}). Total: ${totalNodes} capas seleccionadas`)
figma.closePlugin()
}
Ahora tienes un run‑once plugin que lee el canvas y responde sin abrir ventanas.
Paso 3: Probar los cambios
- Vuelve a Figma.
- Abre Plugins → Development → TutorialPlugin.
- Selecciona un frame o un rectángulo antes de ejecutarlo.
- Verás una notificación con el nombre y tamaño. Si no hay selección, te pedirá que elijas algo.
Este paso te confirma que la lógica del core funciona y que Figma comunica bien con el usuario sin necesidad de UI.
Paso 4: Añadir una UI básica
Si quieres una ventana para mostrar datos o pedir inputs al usuario, añade un archivo ui.html y conecta UI ↔ Core. Para eso, amplía el manifest con la propiedad ui.
manifest.json (añade la línea "ui": "ui.html"):
{
"name": "TutorialPlugin",
"id": "1568238114946214104",
"api": "1.0.0",
"main": "code.js",
"ui": "ui.html",
"capabilities": [],
"enableProposedApi": false,
"documentAccess": "dynamic-page",
"editorType": ["figma"],
"networkAccess": { "allowedDomains": ["none"] }
}
code.js (abre UI y envía datos de la selección):
const selection = figma.currentPage.selection
if (selection.length === 0) {
figma.notify("Selecciona un frame o un rectángulo primero")
figma.closePlugin()
} else {
const firstNode = selection[0]
const totalNodes = selection.length
// Show the UI
figma.showUI(__html__, { width: 320, height: 200 })
// Send initial data to the UI
figma.ui.postMessage({
name: firstNode.name,
width: firstNode.width,
height: firstNode.height,
totalNodes: totalNodes
})
// Handle messages from the UI
figma.ui.onmessage = (msg) => {
if (msg.type === "rename") {
firstNode.name = msg.name
figma.notify(`Renombrado a ${firstNode.name}`)
}
}
}
ui.html (muestra datos y permite renombrar):
<!DOCTYPE html>
<html>
<body>
<h3>Datos de la selección</h3>
<div id="infoRender"></div>
<input id="newName" placeholder="Nuevo nombre"/>
<button id="btn">Renombrar</button>
<script>
onmessage = (ev) => {
const info = ev.data.pluginMessage
infoRender.innerHTML = `Nombre: ${info.name}<br/>Tamaño: ${info.width}×${info.height}<br/>Total: ${info.totalNodes}`
}
btn.onclick = () => {
parent.postMessage({ pluginMessage: { type: "rename", name: newName.value } }, "*")
}
</script>
</body>
</html>
Paso 5: Probar la versión con UI
- Añade el archivo
ui.htmly actualiza el manifest como vimos en el paso anterior. - Ejecuta el plugin de nuevo.
- Debería abrirse una ventana con la información del elemento seleccionado y el campo para renombrarlo.
- Cambia el nombre y pulsa Renombrar → el cambio debería reflejarse inmediatamente en Figma.
Este flujo cierra el círculo completo: comunicación UI ↔ Core ↔ Canvas. Ya estás operando en los tres niveles básicos del modelo de plugins.
Importante: Si cambias la selección mientras el plugin está abierto, no se actualiza automáticamente. Los plugins no escuchan los cambios de selección por defecto, es algo que debe implementarse manualmente, así que deberás cerrar y volver a ejecutar el plugin cada vez que quieras analizar otro elemento.
Qué más puedes hacer hoy mismo (para seguir jugando)
Ya tienes la base: un manifest.json, un code.js que accede al canvas y una ui.html que muestra o cambia datos. A partir de aquí puedes usar este mismo plugin como playground para probar ideas simples. No necesitas reiniciar el proyecto ni cambiar dependencias.
Aquí tienes algunas ideas rápidas para practicar. Puedes copiar y pegar los ejemplos de código en un mensaje a tu asistente de IA y te actualizará el plugin del tutorial.
1. Cambiar el color de un rectángulo
/*
Use this code sample to update my Figma Plugin.
Respect all previous implementation and add this feature:
I want to change the color of the first selected node by another one
*/
const node = figma.currentPage.selection[0]
node.fills = [{ type: 'SOLID', color: { r: 0.1, g: 0.6, b: 1 } }]
figma.notify('Color cambiado a azul')
2. Mover un elemento 100 píxeles a la derecha
/*
Use this code sample to update my Figma Plugin.
Respect all previous implementation, make sure there is a basic UI and add this feature:
I want to move 100px to the right the first selected node.
*/
const node = figma.currentPage.selection[0]
node.x += 100
figma.notify('Elemento movido a la derecha')
3. Duplicar un elemento
/*
Use this code sample to update my Figma Plugin.
Respect all previous implementation, make sure there is a basic UI and add this feature:
I want to duplicate the first selected node and move the new node 20px to the right.
*/
const node = figma.currentPage.selection[0]
const copia = node.clone()
copia.x += node.width + 20
figma.notify('Elemento duplicado')
Cada línea que toques te enseña algo nuevo: cómo Figma representa un nodo, cómo gestiona el color, el texto o la posición. Piensa en aprender a conversar con el editor. Cuando domines eso, cualquier idea de plugin que se te ocurra será solo cuestión de escribirla… o de pedírsela a tu asistente de código.
Comparte tu plugin
Una vez que tu plugin funciona, puedes usarlo en tu propio entorno o compartirlo con tu equipo sin necesidad de publicarlo.
Compartirlo con tu equipo
- Sube la carpeta del plugin (con su
manifest.json) a un repositorio de Git o carpeta compartida. - Cualquiera de tu equipo puede importarlo desde su propio Figma
- Diles que en Figma abran el menú → Plugins → Development → Import plugin from manifest…
- Después que seleccionen el
manifest.jsonde la carpeta con los archivos del plugin. - El plugin aparecerá en su lista bajo la sección Development.
- A partir de ahí podrán ejecutarlo, editarlo y volverlo a abrir cada vez que lo guarden.
Este método es ideal para herramientas internas o pequeños scripts de automatización que no necesitas hacer públicos.
Publicarlo en Figma Community (opcional)
Si quieres que otros lo encuentren y usen, puedes publicarlo directamente desde Figma.
- Menú → Plugins → Development → Manage plugins…
- Selecciona tu plugin y pulsa Publish to Community.
- Añade:
- Un nombre claro (describe el resultado, no la acción técnica)
- Una descripción corta (problema → solución → beneficio)
- Un icono cuadrado de 64×64 px
- Uno o dos GIFs o imágenes mostrando cómo funciona
- Revisa que el plugin no haga peticiones externas no permitidas ni guarde datos sin consentimiento.
Figma revisa cada publicación manualmente. Si rechazan tu envío, suelen indicar el motivo para corregirlo y volver a subirlo.
No hace falta publicar para que tu plugin tenga valor. A veces basta con resolver un problema de tu día a día y mantenerlo en local. Pero si te enorgullece lo que creaste, la Community es el mejor escaparate para mostrarlo.
Recursos y próximos pasos
Si llegaste hasta aquí, ya sabes cómo crear, modificar y ejecutar tu propio plugin en Figma. A partir de ahora, tu progreso depende más de la práctica que del código. Aquí tienes algunos recursos y direcciones para seguir aprendiendo.
https://developers.figma.com/docs/plugins/plugin-quickstart-guide
https://help.figma.com/hc/en-us/sections/6448765398551-Build-your-first-plugin
https://github.com/figma/plugin-samples
Lleva la automatización de tu equipo de diseño al siguiente nivel
Si tu equipo de diseño necesita crear un plugin avanzado para automatizar procesos o integrar flujos de trabajo internos, contacta con nosotros. En Secture hemos desarrollado plugins personalizados para Figma y Framer que ya utilizan otras empresas para mejorar su eficiencia y estandarización de procesos.
Spanish 
English 