Manual de Plugins para Herramientas de Diseño

El ecosistema OIM cuenta con plugins nativos para las herramientas de diseño vectorial estándar del sector, permitiendo a los equipos creativos diseñar en su software preferido y exportar directamente a contenedores .oim listos para producción.

En desarrollo

Los plugins de Figma, Framer y Penpot están en desarrollo y no están disponibles todavía. El comportamiento, los campos y los ejemplos de esta página describen el diseño y pueden cambiar antes de publicarse.

---

1. Arquitectura Oficial del Plugin para Figma

El plugin para Figma (packages/plugin-figma) opera bajo la arquitectura de doble proceso de Figma:

• Hilo Sandbox (code.ts):
  • Recorre el árbol de nodos del Frame seleccionado en Figma.
  • Identifica roles de capa automáticamente según convenciones de nombres:
    • [slot] o [oim]: Convertidas en slots dinámicos de Capa +1 · Dinámica.
    • [text]: Marcadas como texto localizado traducible.
    • [lottie]: Convertidas en contenedores de micro-animaciones Lottie.
    • Capas bloqueadas (node.locked === true): Renderizadas en la imagen horneada (Capa −1, fondo estático PNG).
• Iframe de Interfaz (ui.html / ui.ts):
  • Muestra la previsualización interactiva en directo.
  • Expone campos para traducciones multilingües (en, es) y asignación de colores semánticos.
  • Solicita un renderizado PNG limpio de la imagen horneada (Capa −1) y orquesta la compilación.

---

2. Flujo de Trabajo: De Figma a OIM

Exportar desde Figma requiere tres pasos sencillos:

1. Preparación de la Jerarquía de Capas:
   • Organiza tus elementos vectoriales en un Frame raíz (ej. 1080x1080 o 1920x1080).
   • Prefija los textos o botones interactivos con [slot] Titular.
2. Configuración de Propiedades de Slots:
   • Abre el plugin de OIM desde el menú Plugins de Figma.
   • Introduce los textos traducidos para cada idioma soportado.
   • Asigna tokens semánticos (primary, surface, accent) de la paleta Dynamic Colors.
3. Exportación y Empaquetado:
   • Haz clic en Package .oim.
   • El plugin envía las medidas a /v1/oim/compile, empaqueta la imagen horneada (Capa −1) con metadata firmada vía /v1/oim/package y entrega el binario .oim.png.

{
  "figma_node_id": "12:456",
  "detected_type": "text",
  "name": "[slot] Summer Sale",
  "bounds": { "x": 120, "y": 340, "width": 480, "height": 80 },
  "content": {
    "en": "Summer Collection 2026",
    "es": "Colección de Verano 2026"
  }
}

---

3. Integración Oficial con el Plugin de Penpot

El plugin de Penpot (packages/plugin-penpot) lleva la autoría de OIM a la comunidad de código abierto:

• Diseño Nativo Web: Se integra a través de la API de Extensiones de Penpot (plugin.js).
• Persistencia en el Tablero: Serializa atributos personalizados en los metadatos del tablero mediante board.setPluginData("oim-config", ...).
• Sincronización Automática de Fuentes: Vincula tipografías cargadas en Penpot con identificadores compatibles con <oim-player>.

---

4. Reglas de Separación de Capas y Máscaras en Plugins

Ambos plugins hacen cumplir estrictas garantías de separación de capas:

• Aislamiento horneado (Capa −1): Cualquier capa sin prefijo interactivo o fijada como estática se acopla en la imagen base horneada.
• Vectores y Siluetas: Los trazados SVG marcados con [slot] se conservan como definiciones vectoriales y se pintan en el Shadow DOM del reproductor.
• Recortes y Márgenes: Los marcos anidados con máscara se trasladan a definiciones SVG <clipPath>; cada máscara está horneada (Capa −1) o queda viva (Capa +1).

---

5. Garantías de Seguridad y Verificación

Los plugins se comunican exclusivamente con los endpoints públicos autorizados:

• Cero Exposición de Secretos: Los plugins solo requieren la clave API pública de desarrollador y operan con /v1/oim/compile y /v1/oim/package.
• Validación Previa: Antes de enviar los datos, comprueban que el número de slots no supere 150 y que las cadenas de texto estén libres de scripts maliciosos.