Comment importer un design Figma sur votre site web

Accédez au tableau de bord Figma et cliquez sur votre photo de profil → Paramètres.

Dans l’onglet Compte, faites défiler jusqu’à la section « Jetons d’accès personnels » et entrez le nom du jeton, par exemple, « Tilda ».

Copiez la valeur du jeton afin de l'utiliser pour l'importation.

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 la mise en page souhaitée dans le panneau Calques et copiez son lien depuis la barre d'adresse du navigateur.

Collez ce lien dans le champ URL de mise en page et ajoutez le jeton API obtenu dans les paramètres Figma au champ Jeton API.

Attendez que la mise en page soit importée.

Si vous avez entré le bon lien et qu’il n’y a pas d’erreurs du côté de l’API Figma, la mise en page sera importée dans Zero Block.

Note: Par défaut, les images sont téléchargées depuis les serveurs Figma. Donc, si vous souhaitez les télécharger sur Tilda, vous devez aller 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 1200px.

Nous vous recommandons d'importer la mise en page dans plusieurs blocs plutôt que d'ajouter la mise en page entière à un seul.

N’importe quel 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, nous vous recommandons donc de faire en sorte que la largeur de l'élément de texte soit identique à 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.