Por qué ahora es el mejor momento para crear plugins de Framer
Framer lleva meses evolucionando silenciosamente de “constructor visual de webs” a “plataforma extensible”. Cada vez más equipos lo usan para webs de marketing, landings de producto, páginas de careers e incluso funnels completos. Y aquí está la clave: cuando una herramienta entra en el flujo operativo de una empresa, la demanda de extensiones se dispara.
Si tienes nociones básicas de React, HTML o CSS, ya puedes crear un plugin de Framer. Y si no las tienes, hoy es el mejor momento para aprenderlas: Cursor, Copilot o Claude Code te generan componentes completos, te corrigen errores y te explican cada parte del runtime de Framer sobre la marcha. La fricción técnica que antes frenaba cualquier iniciativa ha desaparecido.
Pero la oportunidad real está en otra parte: el Marketplace de Framer está prácticamente vacío. Hay muy pocos plugins potentes, y los que existen atacan problemas muy concretos: conectar datos externos, automatizar layout, añadir sistemas de color, integrar APIs de negocio… Cada uno se ha convertido rápidamente en estándar de facto dentro de su categoría. Es un «blue ocean«.
Si hay una acción en Framer que tú o tu equipo repetís varias veces por semana, importar datos, generar secciones, aplicar estilos, alinear bloques, sincronizar contenido, eso no es un problema técnico: es un plugin esperando a ser construido 🙂
Y aquí viene la parte más potente: un plugin de Framer no solo te ahorra tiempo, sino que se convierte en una ventaja competitiva. Automatiza procesos, reduce errores, estandariza cómo construye tu equipo y permite a personas no técnicas operar con la potencia de un desarrollador.
Framer está creciendo donde antes reinaban Webflow, WordPress y frameworks personalizados.
Los tres tipos de extensiones en Framer (y por qué se confunden)
Antes de hablar de plugins, hay que aclarar algo que casi nadie explica: en Framer existen tres formas distintas de extender el editor, y cada una sirve para un propósito diferente. Se parecen, comparten React, usan props… pero no son lo mismo. Entender esta diferencia te ahorra horas de frustración.
Vamos rápido y al grano.
Code Components
Son componentes React creados dentro de un proyecto de Framer. Viven dentro de Assets al igual que los Styles o Templates, en la Sección “Code”, puedes editarlos como cualquier archivo de tu proyecto. Los arrastras al canvas igual que cualquier componente nativo.
Características principales
- Añaden funcionalidades que Framer no trae de serie
- Integran lógica (estados, APIs, animaciones, embeds, etc.)
- Exponen UI personalizable del componente integrada en el propio editor de Framer
- Solo existen dentro del proyecto, si quieres usarlos en otro proyecto debes copiar y pegar
Code Overrides
Los overrides son scripts muy pequeños (React functions) que modifican el comportamiento de un elemento existente en el canvas sin crear un componente nuevo. Al igual que los Code Components, viven dentro de Assets al igual que los Styles o Templates, en la Sección “Code”, puedes editarlos como cualquier archivo de tu proyecto.
Características principales
- Hover effects personalizados
- Scroll interactions
- Cambios de estilo basados en variables
- Pequeñas animaciones
- Lógica condicional (si X pasa, entonces Y cambia)
- No generan componentes nuevos
- Solo existen dentro del proyecto, si quieres usarlos en otro proyecto debes copiar y pegar
Plugins
Los plugins son paquetes completos, externos al proyecto, que se instalan desde el Marketplace. Son la forma “oficial” de extender Framer y la única que permite crear herramientas reutilizables para muchos proyectos o para todo tu equipo.
Características principales
- Permiten Insertar Componentes completos
- Integraciones con APIs externas (ATS, CRM, CMS…)
- Animaciones pre-configuradas
- Herramientas internas
- Sistemas de color
- Paneles de configuración personalizados
Qué puedes hacer realmente con un plugin de Framer
Cuando entiendes qué puede hacer un plugin en Framer, entiendes por qué esta oportunidad es tan grande. Un plugin no es un “extra”. Es una forma de ampliar las capacidades del editor, de tu proyecto y de tu equipo.
Vamos a simplificarlo en tres grandes categorías que abarcan el 95% de los casos de uso.
Crear componentes y bloques reutilizables que escalan entre proyectos
Aquí entran, botones, cards, galleries, navbars, footers, secciones completas o templates enteros.
Todo lo que hoy construyes manualmente en cada proyecto, un plugin lo empaqueta en forma de componentes profesionales con PropControls, configurables por cualquier miembro del equipo sin tocar código.
Esto convierte tu trabajo en:
- reproducible
- mantenible
- coherente entre proyectos
- rápido de desplegar
Conectar Framer con datos externos y automatizar contenido
Esto es lo que hace que Framer deje de ser “solo un editor visual” para convertirse en una plataforma conectada.
Un plugin puede:
- traer datos desde APIs externas
- sincronizar contenido dinámico
- integrar servicios de negocio (ATS, CRM, CMS)
- refrescar secciones automáticamente
- generar páginas completas basadas en datos reales
Añadir lógica, interacciones y utilidades avanzadas sin tengas que pensar en código
El editor visual tiene límites. Los plugins rompen esos límites:
- animaciones complejas
- scroll-driven effects
- layouts inteligentes
- variantes condicionadas
- normalización de estilos
- generación automática de estructuras
- herramientas internas para tu equipo
Todo lo que hoy resuelves con code components, overrides, o procesos manuales puede empaquetarse en un plugin con una interfaz clara y opciones configurables.
Ejemplos reales del Marketplace (y qué enseñan sobre lo que un buen plugin debe hacer)
Para entender qué hace que un plugin de Framer sea realmente útil, es mejor mirar ejemplos reales que ya funcionan en el Marketplace. No por imitarlos, sino para entender el patrón que los hace valiosos.
Radix Colors
https://www.framer.com/marketplace/plugins/radix-colors
Este plugin introduce un sistema completo de color accesible directamente dentro de Framer.
En vez de copiar tokens manualmente o improvisar paletas, el plugin te entrega:
- un sistema 100% consistente
- con escalas predefinidas
- accesible por defecto
- aplicable a cualquier componente
Bulk Layout
https://www.framer.com/marketplace/plugins/bulk-layout
Framer ofrece un control excelente sobre el layout, pero cuando tienes que ajustar docenas de elementos a la vez, es tedioso.
Bulk Layout toma esa fricción y la elimina:
- aplicar reglas a múltiples capas
- corregir inconsistencias
- reorganizar estructuras grandes
- estandarizar espaciado y orden
Greenhouse y Ashby Plugins
https://www.framer.com/marketplace/plugins/ashby
https://www.framer.com/marketplace/plugins/greenhouse
Ambos hacen lo mismo para diferentes ATS: Sincronizan automáticamente las ofertas de empleo con tu página de careers en Framer. Esto significa que no vuelves a tocar la página manualmente, solo en 1 click:
- Si tu empresa publica una oferta nueva → aparece.
- Si la cierra → desaparece.
Arquitectura de un plugin de Framer: lo único que necesitas entender
Un plugin de Framer es una mini-app React que se abre dentro del editor y actúa según el modo en el que se ejecuta. Los modos son literalmente el contexto en el que tu plugin vive. Todo lo demás (UI, lógica, API) depende de esto.
Qué es un “mode”
Es el lugar exacto desde donde se lanza tu plugin y lo que se espera que haga.
Framer usa los modes para ofrecer plugins de forma contextual: aparecen justo donde tienen sentido.
Los modos principales:
- canvas → manipular el canvas (nodos, layout, frames…).
- image → generar imágenes nuevas.
- editImage → editar imágenes existentes.
- collection → operar sobre datos del CMS.
- configureManagedCollection / syncManagedCollection → configurar o sincronizar colecciones externas.
- code → actuar sobre archivos de código.
Cada modo limita y simplifica la API disponible, orientándote al uso correcto.
La estructura real del plugin
A alto nivel, siempre contiene:
- un entry point (main.tsx) que abre la UI en el modo elegido
- una UI React (App.tsx) donde vive toda tu lógica
- la API de Framer según el mode (canvas, image, collection…)
Es literalmente una pequeña web que corre dentro de Framer.
Tu primer plugin de Framer paso a paso
El flujo de creación de un plugin en Framer es distinto al de otras herramientas. No hay un botón en el editor ni una opción de menú para generar uno. Todo comienza en la terminal, donde Framer te crea una plantilla lista para funcionar con React, hot-reload y la API del editor ya conectada. Lo bueno es que el proceso es rápido y cero ceremonial.
1. Crear el plugin desde la terminal
Abre tu terminal y ejecuta:
npm create framer-plugin@latest
El asistente te pedirá un nombre para tu plugin.
Cuando aceptes, Framer generará toda la estructura necesaria.
2. Instalar dependencias y arrancar el servidor
Dentro de la nueva carpeta ejecuta:
npm install
npm run dev
Esto levanta tu plugin como una pequeña web local y te muestra una URL, normalmente algo como http://localhost:5173. Esa dirección es tu plugin en tiempo real.
3. Abrirlo dentro de Framer
Este es el paso que casi nadie imagina si no lee la documentación:
En Framer, ve a: Plugins → Open Development Plugin…
Pega la URL que te dio el servidor (http://localhost:5173) y Framer abrirá una ventana flotante con tu plugin funcionando dentro del editor.
A partir de aquí, cada vez que guardes en tu editor de código, la ventana del plugin se recarga automáticamente.
4. Entender la estructura del plugin
La plantilla oficial es mínima pero suficiente:
main.tsx
Define funciones básicas de React. Piensa en él como el “arranque” del plugin, no como su lógica.
App.tsx
Tu plugin es esto.
Define cómo se abre el plugin: título, posición, tamaño y modo.
Una UI en React donde escribes:
- botones
- paneles
- formularios
- lógica
- llamadas a la API de Framer
Y no necesitas configurar nada más: ya está conectado al editor.
framer.json
El manifiesto: nombre, id, metadatos y, sobre todo, los modes que usa tu plugin.
5. Confirmar que todo funciona
Selecciona cualquier elemento en el canvas, abre tu plugin desde el menú, cambia algo en tu UI React, guarda y verás cómo Framer recarga la ventana en tiempo real. El flujo es inmediato y muy similar a trabajar con Vite o Next en desarrollo.
Creando tu primera funcionalidad dentro del plugin
Con el plugin ya abierto dentro de Framer y funcionando en modo desarrollo, es momento de construir algo que te permita entender de verdad cómo se conecta tu UI con el editor. La mejor forma de hacerlo es empezar con una funcionalidad muy sencilla: leer qué elemento está seleccionado en el canvas y mostrar esa información dentro del plugin.
Este pequeño ejercicio es suficiente para interiorizar cómo piensa Framer: tu UI es una app React, el editor vive fuera, y ambos se comunican mediante la API del canvas. Entender ese puente es el 80% de crear plugins.
Primero 2 cosas muy importantes que debes saber
No están en la doc de Framer tan visibles como deberían:
Usa el plugin desde el navegador para poder abrir la consola
La ventana del plugin dentro de la app de Framer no expone una consola fácilmente accesible.
Si quieres inspeccionar errores, logs o estado de React, Abre Framer desde tu navegador web, no desde la app de escritorio:
Ahí tendrás: inspector, network, consola, errores visibles, etc. La productividad cambia por completo.
Las Design Pages de Framer por ahora no funcionan al 100% con plugins
Las páginas de diseño de Framer (las que parecen Figma) todavía no están conectadas a la API del canvas. Para que tu plugin funcione, debes estar en una Page, donde Framer renderiza componentes y nodos reales.
Ahora sí, comencemos:
1. Leer la selección del canvas
Empieza añadiendo un pequeño panel en tu App.tsx que haga lo siguiente:
- Preguntar a Framer cuál es el nodo seleccionado.
- Comprobar si no hay nada seleccionado.
- Mostrar un mensaje claro (“Selecciona un elemento en el canvas”).
- Si sí hay selección, mostrar:
- nombre del nodo
- tipo (Frame, Text, Image, etc.)
- tamaño (ancho y alto)
Esta es la primera interacción que demuestra que tu plugin entiende el canvas.
Reemplaza tu componente/función App() por este código:
export function App() {
const selection = useSelection()
const [rect, setRect] = useState<{ width: number; height: number } | null>(null)
const node = selection[0]
useEffect(() => {
if (node) {
node.getRect().then(setRect)
}
}, [node])
if (!node) {
return <main><p>Selecciona un elemento en el canvas</p></main>
}
let tipo = "Unknown"
if (isFrameNode(node)) tipo = "Frame"
else if (isTextNode(node)) tipo = "Text"
else if (isSVGNode(node)) tipo = "SVG"
else if (isComponentNode(node)) tipo = "Component"
return (
<main>
<p><strong>Nombre:</strong> {(node as any).name || "No name"}</p>
<p><strong>Tipo:</strong> {tipo}</p>
<p><strong>Tamaño:</strong> {rect ? `${rect.width} × ${rect.height}` : "..."}</p>
</main>
)
}
Realizar la primera acción sobre el nodo
Una vez puedes leer el nodo seleccionado, puedes actuar sobre él.
Empieza por algo muy simple:
- cambiar el nombre
- modificar el tamaño
- ajustar la opacidad
- cambiar el color (si el nodo lo permite)
Un solo botón es suficiente.
Tu cerebro entiende la mecánica en cuanto ves que tu plugin modifica el canvas igual que tú lo harías a mano.
Primero Añade la función handleModify dentro tu función/componente App_
const handleModify = async () => {
if (!node) return
await framer.setAttributes(node.id, {
name: "Modified!",
width: rect ? `${rect.width + 50}px` : null,
height: rect ? `${rect.height + 50}px` : null,
opacity: 0.7,
backgroundColor: isFrameNode(node) ? "#FF6B6B" : undefined,
})
}
Ahora añade en el return de la función tu nuevo botón:
<button className="framer-button-primary" onClick={handleModify}>
Modificar
</button>
Por qué este ejercicio importa tanto
Puede parecer un ejemplo pequeño, casi trivial, pero en realidad es la base sobre la que se construye cualquier plugin serio en Framer. Leer la selección y modificarla es el primer contacto real entre tu UI React y el editor, y es justo ese enlace el que habilita todo lo que puedes hacer después.
A partir de esta interacción mínima nacen herramientas mucho más potentes. Cuando tu plugin entiende qué hay en el canvas y es capaz de actuar sobre ello, puedes empezar a construir lo que antes parecía propio de equipos grandes: generadores de layout que reorganizan páginas enteras con un clic, automatizaciones que eliminan procesos repetitivos que tu equipo hace a diario, herramientas internas que aplican tu sistema visual sin errores, conectores que traen datos externos directamente a tus diseños, utilidades que normalizan espaciados o estilos, e incluso integraciones empresariales que sincronizan contenido en tiempo real con servicios externos.
Todo eso empieza en el mismo sitio: leer un nodo y cambiarlo.
Cómo compartir tu plugin: en local o publicado
Una vez que tu plugin funciona en modo desarrollo, llega el momento de compartirlo.
Aquí es donde muchos se confunden: en Framer no puedes compartir localhost, ni hostear el plugin en Netlify, ni generar un link público para usarlo al vuelo. Esto no es posible por diseño.
En Framer solo existen dos formas reales de distribuir un plugin:
- Compartirlo como plugin local entre miembros del equipo
- Publicarlo oficialmente en framer.com y hacerlo accesible a todo el mundo
Cada opción sirve para un tipo de trabajo distinto. Vamos a verlas.
Opción 1: Compartir el plugin en local (solo para tu equipo)
Ideal para:
- empresas que trabajan con herramientas internas
- plugins que aún no están listos para el Marketplace
- proyectos donde la velocidad de iteración es clave
- desarrollo colaborativo antes del empaquetado final
Cómo compartirlo (único método válido)
- Sube tu plugin a un repositorio GitHub, GitLab, Bitbucket o cualquier carpeta compartida.
- Cada persona del equipo clona el repo y ejecuta:
npm install npm run dev - En Framer, abren su propio servidor local: Plugins → Open Development Plugin… Pegan SU URL de localhost (no la tuya).
Cuándo usar este método
Este enfoque es perfecto cuando estás creando un plugin interno, destinado solo a tu equipo o a tu empresa. También es la mejor opción cuando necesitas moverte rápido, hacer cambios constantes y ver resultados sin procesos de validación externos. Si todavía estás iterando, probando ideas o ajustando comportamientos, trabajar en local es mucho más ágil que preparar builds y enviarlas a revisión.
Además, es ideal cuando no quieres o no necesitas pasar por el proceso de revisión de Framer, o cuando tu plugin aún no está listo para el Marketplace y prefieres mantenerlo en un entorno cercano hasta que tenga la madurez suficiente.
Opción 2: Publicar tu plugin en Framer
Ideal cuando:
- quieres que el plugin esté disponible para cualquier usuario
- necesitas un acceso fácil sin instalar dependencias
- quieres feedback externo
- tu plugin será parte de un producto o portfolio
- buscas distribución en el Marketplace
Cómo publicarlo
A diferencia de Figma, en Framer no existe un botón de publicar dentro del editor. Todo el proceso de publicación ocurre fuera de la app, desde tu navegador. La lógica es muy similar a enviar una app a una store: preparas un build, lo subes y Framer lo revisa antes de hacerlo público.
- Ejecuta:
npm run build - Esto genera un archivo: framer-plugin.zip
- Entra en: https://www.framer.com/developers/publishing
- Sube tu ZIP y completa el form con la metadata de tu plugin.
- Framer revisa tu envío de forma manual (como una mini App Store)
- Si lo aprueban, tu plugin aparece en el Marketplace: https://www.framer.com/marketplace/plugins
Recursos recomendados para seguir creando plugins
Si quieres profundizar, experimentar con APIs avanzadas o explorar ejemplos reales, estos son los puntos de partida imprescindibles:
- Guía oficial de plugins de Framer https://www.framer.com/developers/plugins/introduction
- Conceptos clave y modos de ejecución https://www.framer.com/developers/modes
- Quick Start para empezar en minutos https://www.framer.com/developers/plugins-quick-start
- Publicación y envío al Marketplace https://www.framer.com/developers/publishing
- Componentes y plugins del Marketplace https://www.framer.com/marketplace/plugins
Leerlas no es obligatorio para crear tu primer plugin, pero sí es la forma más rápida de desbloquear funcionalidades avanzadas sin pelearte con la API.
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, reforzar su sistema de diseño o integrar flujos internos directamente dentro de Framer, hablemos.
En Secture hemos desarrollado plugins personalizados tanto para Figma como para Framer, utilizados por otras empresas para acelerar su producción, reducir tareas manuales y garantizar una estandarización que antes era imposible.
Podemos ayudarte a diseñar, construir y desplegar herramientas que eleven la productividad de tu equipo desde el primer día.
Spanish 
English 