Importar desde Figma

Send to Vibr es un plugin de Figma. Lee el archivo que tienes abierto en Figma (variables, estilos, componentes, marcos y enlaces del prototipo) y lo guarda como un solo archivo. Vibr importa ese archivo y construye a partir de él con tu sistema de diseño y tu modelo.

Instala el plugin

En Figma, abre el menú Plugins, busca Send to Vibr y ejecútalo. El plugin funciona en todos los planes de Figma, incluido Starter.

Elige qué enviar

El plugin envía el nivel del archivo que elijas, desde el archivo completo hasta un solo elemento:

• Archivo completo: los flujos del prototipo de cada página o, si no los hay, sus pantallas, página por página. Se omiten las páginas de portada, miniatura y separación.
• Una página sin nada seleccionado: sus flujos o, si no los hay, todas sus pantallas.
• Una sección: sus marcos, cada uno como una pantalla.
• Un marco: esa pantalla.
• Un elemento: un componente, una instancia o cualquier capa dentro de un marco. Vibr lo construye por separado como un componente reutilizable.

Selecciona lo que quieras, o elige This page or selection o Whole file en la parte superior del plugin. El plugin muestra lo que va a enviar. Puedes combinarlos: una pantalla y dos elementos van juntos.

Debajo, elige qué se incluye:

• Screens and elements, with layout and prototype links y Include frames they link to, para que un flujo llegue completo. Las fotos que contienen también se incluyen, recortadas como las muestra tu diseño.
• Variables, text styles and shadows, de todo el archivo.
• Components, con sus variantes. Primero van los que usan tus pantallas.

Un archivo admite hasta 12 pantallas y elementos, 12 fotos, 80 componentes y 1500 variables.

Guarda el archivo

Selecciona Save file for Vibr. El plugin guarda un archivo que termina en .vibr-figma.json. Copy pone lo mismo en el portapapeles.

Impórtalo en Vibr

En el cuadro de la petición, selecciona + y luego Importar desde Figma, y elige el archivo. También puedes soltar el archivo en el cuadro de la petición o pegar lo que Copy puso en el portapapeles.

El cuadro de diálogo muestra lo que Vibr va a crear. Desmarca lo que no quieras:

• Tema de color a partir de las variables, que se añade a tu biblioteca.
• Escalas tipográficas, una por familia tipográfica, que se añaden a tu biblioteca.
• Fotos de los marcos, que se añaden a tu biblioteca como las imágenes subidas, para que las pantallas muestren las imágenes reales.
• Pantallas y elementos que se van a construir, en el orden en que los visita tu flujo.

Selecciona Construir. Vibr construye cada pantalla como una petición propia con tu sistema de diseño y tu modelo, la guarda con el nombre de su marco y pasa a la siguiente. Una barra encima del cuadro de la petición muestra en qué pantalla está. Detener termina la ejecución y conserva las pantallas ya construidas.

Al terminar la ejecución, Vibr abre la primera pantalla. Selecciona Reproducir para recorrer el flujo. Consulta Flujos.

Si vuelves a importar el mismo archivo, se reutilizan el tema y las escalas tipográficas que creó la primera importación.

Qué se convierte en qué

En Figma	En Vibr
Variables de color	Un tema de color. Las escalas como Brand/500 y los nombres cortos como color/clay se convierten en sus colores; Vibr crea a partir de ellos los roles claros y oscuros y comprueba su contraste.
Variables de radio y espaciado, estilos de sombra	Las esquinas, la unidad de espaciado y las sombras del tema.
Estilos de texto	Una escala tipográfica por cada familia tipográfica, con tamaños, pesos, interlineados y espaciado entre letras. Vibr solicita las fuentes a Google Fonts cuando las tiene.
Rellenos de imagen	Fotos en tu biblioteca, con el nombre de sus capas (una capa llamada Photo: latte pour se convierte en @image/latte-pour), que usan las pantallas.
Marcos	Pantallas. El modelo recibe la imagen del marco y un esquema de sus capas: auto layout, texto, componentes y los tokens que usa cada capa.
Enlaces del prototipo	Enlaces entre las pantallas. Atrás vuelve a la pantalla anterior. Una superposición se construye dentro de la pantalla que la abre, como un cuadro de diálogo o una hoja, con sus propios enlaces.
Componentes	El modelo recibe información sobre tus componentes y sus variantes, y construye con las piezas equivalentes de tu sistema de diseño.
Un elemento	Un componente construido por separado, centrado en la página.

Privacidad y seguridad

• El plugin no tiene acceso a la red. Nada sale de Figma salvo el archivo que guardas.
• Vibr comprueba el archivo antes de leerlo. El texto entra como texto sin formato, sin caracteres ocultos, y cada valor se comprueba y se limita en tamaño. Cada imagen debe ser una imagen real de un tamaño que Vibr pueda abrir, y Vibr la vuelve a dibujar, lo que elimina sus metadatos. Las fotos se unen a tu biblioteca con las mismas comprobaciones que una subida. El texto pasa por la misma comprobación de contenido que una petición escrita.
• Nada del archivo se ejecuta. Su texto va a tu modelo con cada petición como material de diseño, igual que un documento adjunto. Consulta Claves, privacidad y almacenamiento.

Consejos

• Pon a los marcos el nombre que quieres para las pantallas. Un marco llamado Checkout se convierte en @screen/checkout.
• Para un archivo grande, envía una página o una selección en lugar del archivo completo.
• Después de una ejecución, ajusta cualquier pantalla con una petición normal, como «convierte el carrito en una hoja inferior».