Paint By JSON

¿Qué es Paint By JSON?

Paint By JSON es un plugin de Figma que permite a los diseñadores rellenar frames con datos REST API en vivo en lugar de texto de relleno. Se conecta a un endpoint, previsualiza la respuesta JSON en el plugin, asigna rutas JSON a nombres de capas y guarda esas asignaciones como Palettes reutilizables.

El plugin está pensado para trabajos de diseño que necesitan reflejar estructuras de contenido reales. Los usuarios pueden aplicar una Palette guardada a un frame o a un conjunto repetido de componentes, reutilizarla entre archivos y exportar el diseño rellenado como JSON, Markdown o un Spec Frame para handoff.

Funciones clave

• Se conecta a endpoints en vivo o a JSON simulado que puede obtenerse con GET, para que los diseños se rellenen con estructuras de datos reales en lugar de ejemplos estáticos.
• Admite headers y valores de autenticación al conectarse a un endpoint, lo que lo hace utilizable con APIs protegidas durante el trabajo de diseño.
• Asigna rutas JSON a nombres de capas en Figma, permitiendo que las palettes sigan siendo portátiles aunque cambien los archivos, las bibliotecas o las estructuras de capas.
• Guarda la configuración del endpoint, los headers y las asignaciones como Palettes reutilizables, para que la misma receta de datos pueda aplicarse de nuevo sin rehacer la configuración.
• Incluye transformaciones básicas como truncado, formato de moneda, análisis de fechas, ramificación condicional y transformaciones encadenadas antes de que los valores lleguen al lienzo.
• Gestiona tanto el rellenado de un solo frame como el modo colección, donde un array puede iterarse sobre instancias repetidas de componentes.
• Exporta diseños rellenados a JSON, Markdown o un Spec Frame para facilitar el handoff de diseño a código.
• Se ejecuta en el iframe del plugin y mantiene las respuestas de la API y los valores de auth en la máquina del usuario en lugar de enviarlos a la base de datos del producto.

Cómo usar Paint By JSON

Empieza instalando el plugin en Figma y conectando una URL para la API o la fuente JSON que quieras usar. Si hace falta, añade headers o autenticación y luego previsualiza la respuesta dentro del plugin.

Después, asigna campos JSON a los nombres de capa de tu frame y aplica las transformaciones necesarias para la visualización o el formato. Guarda la configuración como una Palette y luego aplícala a un frame o a un conjunto repetido de componentes.

Una vez que el frame esté rellenado, reutiliza la Palette en otros archivos o exporta el resultado como JSON, Markdown o un Spec Frame para handoff.

Casos de uso

• Diseñar una pantalla de producto con nombres de usuario, títulos, precios o fechas realistas extraídos de la misma API que usará el producto.
• Probar si los layouts se mantienen cuando los valores de los datos son más largos, más cortos o estructuralmente diferentes del texto de relleno habitual.
• Rellenar componentes repetidos a partir de una respuesta de array, como cards, elementos de lista u otras interfaces basadas en colecciones.
• Reutilizar la misma asignación de datos en múltiples frames o archivos cuando un design system usa un nombre de capas consistente.
• Preparar un artefacto de handoff que incluya el diseño y la estructura de datos subyacente en forma de JSON, Markdown o Spec Frame.

FAQ

¿Paint By JSON solo funciona con APIs en vivo?
No. La página indica que puede conectarse a respuestas de API en vivo o a JSON simulado, siempre que los datos puedan obtenerse con GET.

¿Puede manejar endpoints protegidos?
Sí. El plugin admite añadir headers o valores de autenticación al conectarse a un endpoint.

¿Qué puedo exportar?
La página del producto indica que los frames rellenados pueden exportarse como JSON, Markdown o un Spec Frame.

¿Guarda mis datos de API en la nube?
Según la página, el plugin se ejecuta en el iframe del plugin de Figma y las respuestas de la API y los valores de auth permanecen en tu máquina; no se envían a la base de datos de la empresa.

¿Hay un límite en la cantidad de palettes que puedo guardar?
La página menciona límites de plan, incluido un nivel gratuito y un nivel Pro, pero los detalles exactos del límite que se muestran son dos palettes en el plan gratuito y 50 palettes guardadas en Pro.

Alternativas

• Contenido de marcador de posición manual en Figma, que es la opción de respaldo más simple pero no prueba los diseños frente a estructuras de datos reales.
• Flujos de trabajo de diseño impulsados por hojas de cálculo, que pueden ayudar con contenido estructurado pero suelen requerir una configuración distinta a vincular rutas JSON directamente en Figma.
• Plugins genéricos de carga de datos para Figma, que pueden rellenar capas con contenido de ejemplo pero quizá no se centran tan específicamente en palettes reutilizables basadas en endpoints y exportaciones.
• Hand-off de diseño mediante documentos de especificación separados, que pueden describir los requisitos de datos fuera del lienzo pero no mantienen la asignación de datos adjunta al propio frame de Figma.