Dans votre compte Figma, cliquez sur « Actions » dans la barre d'outils inférieure et sélectionnez l'onglet « Plugins et widgets ». Dans le champ de recherche, saisissez le nom du Tilda « Figma to Tilda » et cliquez dessus, ou ajoutez le plugin via le lien.

Cliquez sur le bouton « Exécuter » pour activer le plugin.

C'est prêt ! Vous pouvez désormais importer des calques et des éléments dans Tilda.

Une fois le plugin ajouté, sélectionnez le calque souhaité dans la mise en page. Le calque sélectionné s'affichera dans le champ « Calques sélectionnés » de la fenêtre du plugin.

Dans la fenêtre du plugin, cliquez sur le bouton « Préparer la copie » pour que les calques soient prêts à être importés.

Lorsque l'image est prête à être importée, cliquez sur le bouton « Copier dans le presse-papiers ».

Rendez-vous sur Tilda → ouvrez Zero Block , puis utilisez le raccourci clavier : Ctrl+V sous Windows ou Commande+V sur Mac.

Vous pouvez importer le cadre en tant que groupe distinct ou en appliquant les paramètres à la zone de travail et en remplaçant tous les éléments actuels.

Si la zone de travail contient déjà des éléments, vous pouvez également insérer le cadre en tant que groupe, mais cette option supprimera tous les éléments de la zone de travail.

Lorsque l'option « Appliquer les paramètres au plan de travail » est sélectionnée, les paramètres du calque racine du cadre seront appliqués dans Zero Block: la couleur ou l'image d'arrière-plan, la mise en page automatique et d'autres paramètres pris en charge par Tilda modifiés.

Lorsque plusieurs cadres sont insérés, la fenêtre contextuelle contenant les options d'importation ne s'affiche pas.

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 Tilda et sélectionnez sa durée de validité. Par exemple : 1 jour, 7 jours, 30 jours ou 90 jours.

Dans la zone « Scopes », cochez les cases « Utilisateur actuel », « Ressources de développement », « Contenu des fichiers », « Versions des fichiers », « Ressources de la bibliothèque », « Contenu de la bibliothèque » et « Projets ». Cliquez ensuite sur « Générer le jeton ».

Copiez cette clé après l'avoir créée afin de la saisir dans les paramètres d'importation de Tilda. Vous ne pouvez pas afficher à nouveau la clé ; il vous suffit d'en créer une nouvelle.

Cliquez sur le menu représenté par trois points dans Zero Block sélectionnez l'option « Importer depuis Figma ».

Rendez-vous sur Figma. Ouvrez la mise en page, sélectionnez le cadre souhaité, puis copiez le lien du cadre depuis la barre d'adresse du navigateur.

Dans la fenêtre qui s'ouvre, ajoutez le lien vers le cadre et le jeton API obtenu dans les paramètres de Figma.

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

Notez que, par défaut, les images sont chargées depuis les serveurs de Figma ; si vous souhaitez les télécharger sur Tilda, vous devez vous rendre dans les paramètres des éléments contenant des images et cliquer sur « Télécharger sur Tilda ».

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

Nous vous recommandons d'importer la mise en page dans plusieurs blocs plutôt que de l'ajouter en entier dans un seul bloc.

Tout groupe peut être importé sous forme d'image. Pour cela, vous devez indiquer « image » dans son nom. Si vous indiquez « svg », il sera importé en tant que fichier SVG.

Vous pouvez également importer des groupes. S'ils contiennent d'autres groupes, tous les éléments se trouveront dans le groupe de premier niveau.

Pour importer un bouton, vous devez regrouper la forme et le texte, puis ajouter « bouton » à son nom. La propriété d'alignement du texte sera également importée ; nous vous recommandons donc de régler la largeur de l'élément texte de manière à ce qu'elle corresponde à celle de la forme.

Si la forme comporte 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.