Come importare un disegno Figma nel proprio sito web

Andare alla pagina principale di Figma e fare clic su Visualizza profilo → Impostazioni sotto l'immagine del profilo.

Andare quindi alla scheda Sicurezza, al blocco Token di accesso personali e fare clic su Genera nuovo token.

Nella nuova finestra, specificare il nome del token Tilda e selezionare il periodo di scadenza. Ad esempio, Nessuna scadenza - Indefinito. È inoltre possibile scegliere un periodo di scadenza del token di 1 giorno, 7 giorni, 30 giorni e 90 giorni.

Nell'area Scopes, è ora necessario selezionare i diritti di accesso per la chiave.

Per le opzioni Utente corrente, Risorse di sviluppo, Contenuto dei file, Versioni dei file, Risorse della libreria, Contenuto della libreria e Progetti, selezionare il valore di accesso in sola lettura. Quindi fare clic su Genera token per creare un token.

Copiare questa chiave dopo averla creata per specificarla nelle impostazioni di Importazione in Tilda . Non è possibile visualizzare nuovamente la chiave, è sufficiente crearne una nuova.

Fare clic sul menu a tre puntini nell'angolo superiore destro di Zero Block e selezionare l'opzione "Importa da Figma" dal menu a discesa.

Su Figma, selezionare il layout desiderato nel pannello Livelli, il riquadro desiderato e copiare il link del riquadro dalla barra degli indirizzi del browser.

Affinché l'importazione sia corretta, è necessario aggiungere un riquadro Figma a uno Zero Block

Incollare questo link nel campo URL del layout e aggiungere il token API ottenuto nelle impostazioni di Figma nel campo Token API.

Attendere che il layout venga importato.

Se si è aggiunto il link corretto e non ci sono errori sul lato API di Figma, il layout verrà importato in Zero Block.

Nota: per impostazione predefinita, le immagini vengono caricate dai server di Figma. Pertanto, se si desidera caricarle su Tilda, è necessario andare nelle impostazioni degli elementi contenenti le immagini e fare clic su Carica su Tilda.

I layout devono essere creati su una cornice con una larghezza di 1200px.

Si consiglia di importare il layout in più blocchi piuttosto che aggiungere l'intero layout in uno solo.

Qualsiasi gruppo può essere importato come immagine. A tale scopo, è necessario specificare "image" nel nome del gruppo su Figma. Se si specifica "svg", verrà importato come file SVG.

È possibile importare anche gruppi. Se ci sono altri gruppi all'interno, tutti gli elementi saranno nel gruppo di primo livello.

Per importare un pulsante, è necessario unire la forma e il testo in un gruppo e nominarlo "pulsante".

Verrà importata anche la proprietà di allineamento del testo, quindi si consiglia di rendere la larghezza dell'elemento di testo uguale a quella della forma.

Se la forma ha un effetto che non può essere riprodotto in Zero Block, verrà importata con l'immagine dell'effetto sullo sfondo.