Comment importer un dessin Figma sur votre site web

Va sur la page principale de Figma et clique sur View Profile → Settings sous ton image de profil.

Allez ensuite dans l'onglet Sécurité, dans le bloc Jetons d'accès personnels et cliquez sur Générer un nouveau jeton.

Dans la nouvelle fenêtre, indiquez le nom du jeton Tilda et sélectionnez sa période d'expiration. Par exemple, Pas d'expiration - Indéfinie. Vous pouvez également choisir une période d'expiration de 1 jour, 7 jours, 30 jours et 90 jours.

Dans la zone Scopes, vous devez maintenant sélectionner les droits d'accès pour la clé.

Pour les options Utilisateur actuel, Ressources de développement, Contenu des fichiers, Versions des fichiers, Actifs de la bibliothèque, Contenu de la bibliothèque et Projets, sélectionnez la valeur Accès en lecture seule. Cliquez ensuite sur Générer un jeton pour créer un jeton.

Copiez cette clé après l'avoir créée pour la spécifier dans les paramètres d'importation vers Tilda . Vous ne pouvez pas visualiser la clé à nouveau, il suffit de créer une nouvelle clé.

Cliquez sur le menu à trois points dans le coin supérieur droit de Zero Block et sélectionnez l'option "Import from Figma" dans le menu déroulant.

Sur Figma, sélectionnez la disposition que vous voulez dans le panneau des couches, le cadre dont vous avez besoin et copiez le lien du cadre dans la barre d'adresse du navigateur.

Pour que l'importation soit correcte, vous devez ajouter un cadre Figma à un cadre Figma. Zero Block

Collez ce lien dans le champ Layout URL et ajoutez le jeton API obtenu dans les paramètres Figma dans le champ API Token.

Attendez que la mise en page soit importée.

Si tu as ajouté le lien correct et qu'il n'y a pas d'erreur du côté de l'API Figma, la mise en page sera importée dans Zero Block

Note : Par défaut, les images sont chargées à partir des serveurs Figma. Ainsi, si vous souhaitez les charger sur Tilda, vous devez vous rendre dans les paramètres des éléments contenant des images et cliquer sur Upload to Tilda.

Les mises en page doivent être créées sur un cadre d'une largeur de 1200 px.

Nous recommandons d'importer la mise en page dans plusieurs blocs plutôt que d'ajouter toute la mise en page à un seul bloc.

Tout groupe peut être importé en tant qu'image. Pour cela, vous devez spécifier "image" dans le nom du groupe sur Figma. Si vous spécifiez "svg", il sera importé en tant que fichier SVG.

Vous pouvez également importer des groupes. S'il y a d'autres groupes à l'intérieur, tous les éléments seront dans le groupe de premier niveau.

Pour importer un bouton, vous devez fusionner la forme et le texte dans un groupe et le nommer "bouton".

La propriété d'alignement du texte sera également importée, c'est pourquoi nous vous recommandons de faire en sorte que la largeur de l'élément de texte soit la même que celle de la forme.

Si la forme a un effet qui ne peut pas être reproduit dans Zero Block, elle sera importée avec l'image de l'effet en arrière-plan.