De Figma a tu app nativa
Cómo un componente de Figma se convierte en un template versionado que tu SDK nativo renderiza en la app de tu cliente.
Cinco pasos, del componente al dispositivo
1. Diseña con la convención FIO/*
Cada bloque se identifica por el nombre de su componente maestro en Figma: FIO/container, FIO/text y el resto del catálogo. El frame necesita Auto Layout; un frame sin Auto Layout o un componente que no sea FIO/* no se puede exportar.
2. El plugin exporta un template determinista
El plugin de Figma traduce el frame seleccionado a un contrato JSON: { "type": "...", "data": {...} }. Exportar el mismo frame dos veces sin tocarlo produce el mismo JSON, y un solo error (radios de esquina distintos, texto con estilos mixtos, un fill que no es sólido) bloquea el export completo — no hay exports parciales.
3. Bindings de datos por campo
Un campo dinámico se marca desde el panel del plugin, no escribiendo texto especial en la capa — así un precio literal como "$300" nunca se confunde con un binding. El campo bindeado se exporta como { "$bind": "product.price" } en vez de su valor fijo.
4. El SDK nativo lo renderiza
FIOCoreBlocks interpreta el template con una factory de cadena de responsabilidad y parsing Codable, y dibuja UI 100% nativa en SwiftUI — sin WebView.
5. El backend del cliente resuelve el contexto
El backend combina el template con los datos reales de esa pantalla (producto, reserva, estado de una operación), sustituyendo cada $bind por su valor. Los datos, permisos y reglas de negocio nunca salen del backend del cliente.
Un componente maestro por bloque
El plugin reconoce un nodo por el nombre de su componente maestro en Figma: FIO/container, FIO/text y así para cada bloque del catálogo. Un FIO/container es un frame con Auto Layout y 0 o 1 hijo; un FIO/text es un único nodo de texto.
El plugin no exporta parcialmente: un frame sin Auto Layout, un componente que no sea FIO/*, un container con más de un hijo o un peso de fuente no soportado bloquean el export con un mensaje específico.
{
"type": "container",
"data": {
"id": "hero",
"background_color": { "color": "#FFFFFF" },
"corner_radius": 12,
"padding": [
{ "anchor": "top", "constant": 24 }
],
"size": { "width": 320, "height": 200 },
"child": { "type": "text", "data": {} }
}
}Un spike temprano, no un producto terminado
Construido
- El plugin exporta container y text desde Figma a JSON estático y determinista
- Modelo de errores que bloquea el export ante un frame inválido, con mensaje específico por caso
- El motor nativo (FIOCoreBlocks) ya interpreta ese contrato en SwiftUI, iOS 15+
En desarrollo activo — parte del piloto
- Cobertura del resto del catálogo de 26 bloques en el plugin de exportación
- Bindings de datos ($bind) de punta a punta, incluida la UI del panel en Figma
- resolve() en el backend: combinar un template con datos reales de forma estándar
- Versionado de templates y publicación en vivo desde el plugin
Un piloto integra este flujo sobre 1 o 2 pantallas reales de un cliente tuyo, y prioriza contigo qué parte del roadmap conviene adelantar primero.