Importe un marco de Figma en WordPress con Page Builder Sandwich

Page Builder Sandwich Pro convierte un marco de Figma en una página de WordPress editable. El sitio se comunica con Figma mediante su propia cuenta de Figma, utilizando un token de acceso personal que usted crea; ningún diseño o token pasa por Zinn Digital®.

Conectar Figma (una vez, como administrador)

1. En Figma, abra Settings → Security → Personal access tokens y genere un token con el ámbito File content: read.
2. En wp-admin, vaya a Page Builder Sandwich → Import from other builders and Figma → Import from Figma, pegue el token y pulse Connect Figma.

El token se verifica con Figma, se almacena cifrado y nunca se vuelve a mostrar (solo sus últimos cuatro caracteres). Disconnect lo elimina. En la línea de comandos: echo <token> | wp pbs importers figma-token set (el token se lee desde la entrada estándar, por lo que no se guarda en el historial de su shell).

Importar un marco

1. En Figma, haga clic en un marco, haga clic derecho sobre él y elija Copy/Paste as → Copy link to selection.
2. Pegue el enlace en Figma frame link y pulse Import the frame. Se creará una nueva página en borrador, con el nombre del marco.

Cómo se convierte el diseño

• El Auto layout se convierte en filas y columnas flex (y cuadrículas para el diseño automático en cuadrícula) con el mismo espacio, relleno y alineación; un marco con diseño libre se apila en el orden de lectura, y el informe lo indica cuando las capas se superponen.
• Un marco de página compuesto por franjas de ancho completo se convierte en una sección de ancho completo por franja.
• El Texto conserva su fuente, tamaño, peso, altura de línea, espaciado entre letras, mayúsculas/minúsculas, alineación y color; el texto grande se convierte en encabezados, y se conservan los fragmentos en negrita, cursiva y los enlaces.
• Los Rellenos, trazos, radio de esquinas y sombras paralelas se transfieren, incluidos los degradados.
• Las Imágenes se copian en su biblioteca de medios, y el arte vectorial (iconos, ilustraciones) es renderizado por Figma y copiado como imagen (hasta 200 dibujos por importación). Importar el mismo marco de nuevo reutiliza las copias.
• Un marco pequeño con un relleno, esquinas redondeadas y una etiqueta corta (o una capa llamada «button») se convierte en un bloque Button.

En un teléfono, las filas de elementos de ancho fijo se apilan en una columna, debido a que un marco de Figma se dibuja en un único ancho.

Desde la línea de comandos: wp pbs importers figma <frame link>.