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 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 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 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.
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.
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.
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.
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.
