Cómo importar un diseño Figma a su sitio web

Ve a la página principal de Figma y haz clic en Ver perfil → Configuración debajo de tu foto de perfil.

A continuación, vaya a la pestaña Seguridad, vaya al bloque Tokens de acceso personal y haga clic en Generar nuevo token.

En la nueva ventana, especifique el nombre del token Tilda y seleccione su periodo de caducidad. Por ejemplo, Sin caducidad - Indefinido. También puede elegir el período de caducidad del token de 1 día, 7 días, 30 días y 90 días.

En el área Ámbitos, ahora debe seleccionar los derechos de acceso para la clave.

En las opciones Usuario actual, Recursos de desarrollo, Contenido de archivo, Versiones de archivo, Activos de biblioteca, Contenido de biblioteca y Proyectos, seleccione el valor Acceso de sólo lectura. A continuación, haga clic en Generar token para crear un token.

Copie esta clave después de crearla para especificarla en la configuración de Importar a Tilda . No puede volver a ver la clave, sólo crear una nueva clave.

Haga clic en el menú de tres puntos de la esquina superior derecha en Zero Block y seleccione la opción "Importar desde Figma" en el menú desplegable.

En Figma, seleccione el diseño que desee en el panel Capas, el marco que necesite y copie el enlace del marco de la barra de direcciones del navegador.

Para que la importación sea correcta, es necesario añadir un fotograma Figma a uno Zero Block

Pegue este enlace en el campo Layout URL y añada el token de API obtenido en los ajustes de Figma en el campo API Token.

Espere a que se importe la maqueta.

Si has añadido el enlace correcto y no hay errores en la API de Figma, el diseño se importará a Zero Block.

Nota: Por defecto, las imágenes se cargan desde los servidores de Figma. Por lo tanto, si desea cargarlas en Tilda, debe ir a la configuración de los elementos que contienen imágenes y hacer clic en Cargar en Tilda.

Las maquetas deben crearse en un marco con una anchura de 1200px.

Recomendamos importar la maqueta a varios bloques en lugar de añadir toda la maqueta a uno solo.

Cualquier grupo puede importarse como imagen. Para ello, debe especificar "image" en el nombre del grupo en Figma. Si especifica "svg", se importará como un archivo SVG.

También puede importar grupos. Si hay otros grupos dentro, todos los elementos estarán en el grupo de primer nivel.

Para importar un botón, debe fusionar la forma y el texto en un grupo y nombrarlo como "botón".

La propiedad de alineación del texto también se importará, por lo que le recomendamos que haga que la anchura del elemento de texto sea la misma que la de la forma.

Si la forma tiene un efecto que no puede reproducirse en Zero Block, se importará con la imagen del efecto en el fondo.