Importer depuis Figma

Send to Vibr est un plugin Figma. Il lit le fichier ouvert dans Figma (variables, styles, composants, frames et liens du prototype) et l'enregistre dans un seul fichier. Vibr importe ce fichier et construit à partir de lui avec votre design system et votre modèle.

Installer le plugin

Dans Figma, ouvrez le menu Plugins, recherchez Send to Vibr et lancez-le. Le plugin fonctionne avec toutes les offres Figma, y compris Starter.

Choisir ce qu'il faut envoyer

Le plugin envoie le niveau du fichier que vous choisissez, du fichier entier jusqu'à un seul élément :

• Fichier entier : les parcours du prototype de chaque page, ou à défaut ses écrans, page par page. Les pages de couverture, de miniature et de séparation sont ignorées.
• Une page sans rien de sélectionné : ses parcours, ou à défaut tous ses écrans.
• Une section : ses frames, chacun comme un écran.
• Un frame : cet écran.
• Un élément : un composant, une instance ou n'importe quel calque d'un frame. Vibr le construit seul, comme un composant réutilisable.

Sélectionnez ce que vous voulez, ou choisissez This page or selection ou Whole file en haut du plugin. Le plugin liste ce qu'il va envoyer. Vous pouvez mélanger : un écran et deux éléments partent ensemble.

En dessous, choisissez ce qui les accompagne :

• Screens and elements, with layout and prototype links (écrans et éléments, avec mise en page et liens du prototype), et Include frames they link to (inclure les frames vers lesquels ils renvoient), pour qu'un parcours arrive complet. Les photos qu'ils contiennent suivent aussi, recadrées comme dans votre design.
• Variables, text styles and shadows (variables, styles de texte et ombres), pour tout le fichier.
• Components (composants), avec leurs variantes. Ceux qu'utilisent vos écrans viennent en premier.

Un fichier contient jusqu'à 12 écrans et éléments, 12 photos, 80 composants et 1 500 variables.

Enregistrer le fichier

Sélectionnez Save file for Vibr. Le plugin enregistre un fichier qui se termine par .vibr-figma.json. Copy place le même contenu dans le presse-papiers à la place.

L'importer dans Vibr

Dans le champ de demande, sélectionnez + puis Importer depuis Figma, et choisissez le fichier. Vous pouvez aussi déposer le fichier sur le champ de demande, ou coller ce que Copy a placé dans le presse-papiers.

La boîte de dialogue liste ce que Vibr va créer. Décochez ce que vous ne voulez pas :

• Thème de couleurs issu des variables, ajouté à votre bibliothèque.
• Échelles typographiques, une par famille de polices, ajoutées à votre bibliothèque.
• Photos issues des frames, ajoutées à votre bibliothèque comme des images importées, pour que les écrans affichent les vraies images.
• Écrans et éléments à construire, dans l'ordre où votre parcours les visite.

Sélectionnez Construire. Vibr construit chaque écran dans sa propre demande avec votre design system et votre modèle, l'enregistre sous le nom de son frame, puis passe au suivant. Une barre au-dessus du champ de demande indique l'écran en cours. Arrêter met fin à l'exécution et conserve les écrans déjà construits.

À la fin de l'exécution, Vibr ouvre le premier écran. Sélectionnez Lire pour suivre le parcours. Consultez Parcours.

Importer à nouveau le même fichier réutilise le thème et les échelles typographiques créés par la première importation.

Ce que devient chaque élément

Dans Figma	Dans Vibr
Variables de couleur	Un thème de couleurs. Les échelles comme Brand/500 et les noms courts comme color/clay deviennent ses couleurs ; Vibr en tire les rôles clairs et sombres et vérifie leur contraste.
Variables d'arrondi et d'espacement, styles d'ombre	Les arrondis, l'unité d'espacement et les ombres du thème.
Styles de texte	Une échelle typographique par famille de polices, avec tailles, graisses, hauteurs de ligne et approche. Vibr demande les polices à Google Fonts quand elles y sont.
Remplissages d'image	Des photos dans votre bibliothèque, nommées d'après leurs calques (un calque appelé Photo: latte pour devient @image/latte-pour), que les écrans utilisent.
Frames	Des écrans. Le modèle reçoit l'image du frame et la structure de ses calques : auto layout, texte, composants et tokens utilisés par chaque calque.
Liens du prototype	Des liens entre les écrans. Retour ramène à l'écran précédent. Une superposition est intégrée à l'écran qui l'ouvre, sous forme de boîte de dialogue ou de panneau, avec ses propres liens.
Composants	Le modèle est informé de vos composants et de leurs variantes, et construit avec les éléments correspondants de votre design system.
Un élément	Un composant construit seul, centré sur la page.

Confidentialité et sécurité

• Le plugin n'a aucun accès au réseau. Rien ne quitte Figma, à part le fichier que vous enregistrez.
• Vibr vérifie le fichier avant de le lire. Le texte arrive en texte brut, sans caractères cachés, et chaque valeur est vérifiée et limitée en taille. Chaque image doit être une vraie image d'une taille que Vibr accepte d'ouvrir, et Vibr la redessine, ce qui retire ses métadonnées. Les photos rejoignent votre bibliothèque avec les mêmes vérifications qu'une importation. Le texte passe par la même vérification de contenu qu'une demande saisie.
• Rien dans le fichier ne s'exécute. Son texte est envoyé à votre modèle avec chaque demande comme matière de design, comme un document joint. Consultez Clés, confidentialité et stockage.

Conseils

• Nommez les frames comme vous voulez nommer les écrans. Un frame appelé Checkout devient @screen/checkout.
• Pour un gros fichier, envoyez une page ou une sélection plutôt que le fichier entier.
• Après une exécution, affinez n'importe quel écran avec une demande normale, comme « fais du panier un panneau en bas de l'écran ».