Importer depuis Figma

L'import fonctionne dans le sens inverse de l'export : un frame Figma existant devient un écran UXMagic modifiable sur lequel vous pouvez ensuite itérer avec l'IA.

Étapes#

1. Connectez Figma depuis Intégrations (une connexion OAuth — vous autorisez UXMagic une fois).
2. Collez l'URL du frame Figma, ou choisissez le fichier et le frame dans le sélecteur.
3. Choisissez d'importer les styles propres du frame comme thème de projet, ou de le mapper sur le thème existant.
4. Importez.

Ce qui est transféré#

• Mise en page et hiérarchie, structure auto-layout comprise.
• Texte, avec ses styles typographiques.
• Couleurs et effets, dégradés et ombres compris.
• Images, copiées dans les ressources de votre projet.
• Vecteurs et icônes, reconstruits en balisage.

À quoi s'attendre#

Figma est un canevas vectoriel et le web un modèle de boîtes : l'import est donc une traduction fidèle, pas une copie identique octet pour octet. Attendez-vous à une structure et à des espacements très proches, avec de petites différences de rendu du texte et sur les effets sans équivalent web direct.

Les imports sont les plus précis quand le frame Figma utilise l'auto-layout. Les mises en page libres en positionnement absolu s'importent, mais avec une fidélité structurelle moindre.

Obtenir la bonne URL#

Sélectionnez le frame dans Figma, puis clic droit → Copier le lien vers la sélection. Un lien vers le fichier sans nœud sélectionné importe la mauvaise chose, ou rien.

Après l'import#

L'écran importé se comporte comme les autres : modifications par discussion, mode édition, thèmes, versions, export. C'est la voie la plus rapide pour « on a déjà des designs, mais on veut aller plus vite maintenant ».

Systèmes de design et bibliothèques de composants#

Vous pouvez aussi importer une bibliothèque de composants ou un système de design pour que les écrans générés utilisent vos composants. Voir Bibliothèques de composants.