1.
Installez et lancez l'extension d'export (lien)
Figma
en code
en code
<section>
class="hero"
<h1>...</h1>
</section>
class="hero"
<h1>...</h1>
</section>
Exporter Figma en HTML, React et code propre
Par l'éditeur
Que fait cette extension ?
Obtenez du code propre depuis votre design et accélérez la phase de développement.
Exportez Figma en HTML, CSS, React ou Vue
- Convertissez vos designs en composants propres
- Partagez avec les développeurs, qui gagnent le pouvoir de produire du code selon leurs préférences
Créez des prototypes en code
- Créez des prototypes qui se comportent comme le vrai produit
- Ajoutez graphiques, vidéos, champs de texte, menus déroulants, animations d'entrée et plus encore
2.
Sélectionnez une frame
Barre de navigation
Section héro
Section vidéo
Vidéo
camera-intervenant
barre-navigateur
🖼 Intégrez votre vidéo ici
▯ appareil
Barre de logos
Code d'intégration
- Copiez ou remplacez uniquement la section surlignée pour conserver ces dimensions de cadre lors de la mise à jour de la vidéo, ou
- Copiez puis collez le code d'intégration complet et ajustez la taille selon vos préférences.
Cliquez sur Enregistrer une fois terminé.
Intégrer une vidéo ×
<iframe width="560" height="315" src="https://www.youtube.com/embed/Tmh3f0ZHbwg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Démarrer à 0:00
OPTIONS D'INTÉGRATION
Afficher les commandes du lecteur.
Anima - Exporter Figma en HTML, React et Vue ×
A
Équipe AnimaModèle de page d'accueil ▾
CalqueCadreProjet
Code d'intégration du calque sélectionné
<iframe width=100% height=100% src="https://www.youtube.com/embed/Tmh3f0ZHbwg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
↩ Du design au code ▾
3.
Cliquez sur « Aperçu » puis « Synchroniser »