Comment importer un dessin Figma sur votre site web ?

Vous pouvez importer automatiquement un dessin Figma dans Zero Block
Comment obtenir un jeton d'accès à l'API Figma ?
Va sur le tableau de bord Figma et clique sur ton image de profil → Paramètres.
Dans l'onglet Compte, descendez jusqu'à la section "Jetons d'accès personnels" et saisissez le nom du jeton, par exemple "Tilda".
Copiez la valeur du jeton pour l'utiliser lors de l'importation.
Comment importer une mise en page dans Zero Block
Cliquez sur le menu à trois points dans le coin supérieur droit de Zero Block et sélectionnez "Importer" dans le menu déroulant.
Sur Figma, sélectionnez le modèle que vous souhaitez dans le panneau des calques et copiez son lien dans la barre d'adresse du navigateur.
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 vous avez saisi 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 sur Zero Block.
Note : Par défaut, les images sont téléchargées depuis les serveurs Figma. Si vous souhaitez les télécharger sur Tilda, vous devez donc vous rendre dans les paramètres des éléments contenant des images et cliquer sur Upload to Tilda.
Exigences en matière de présentation et caractéristiques d'importation
Mise en page
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.
Groupes
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.
Formes et boutons
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.
Fabriqué le
Tilda