Figma

Figma est un connecteur : il relie une application MeDo à un compte Figma, afin que l'application puisse lire les fichiers de design que ce compte peut ouvrir. MeDo lit l'arborescence des pages et des cadres, les composants et les ensembles de composants, les styles, les jetons de design, les images de nœuds rendues, les remplissages d'image et les interactions de prototype, et s'en sert comme contexte pour construire l'application. La connexion est en lecture seule : l'application ne crée, ne modifie ni ne supprime jamais quoi que ce soit dans vos fichiers Figma.

#Ce que vous pouvez construire

• Une application à partir d'une maquette. Indiquez un fichier de design à MeDo et laissez-le construire des pages qui suivent la mise en page, les couleurs, la typographie et les espacements du fichier.
• Une galerie de design system. Listez chaque composant, ensemble de composants et style d'un fichier ou d'une bibliothèque d'équipe, avec des aperçus.
• Une configuration Tailwind ou CSS. Extrayez les jetons de design du fichier — couleurs, typographie, espacements, ombres et rayons — et transformez-les en configuration Tailwind utilisée par l'application.
• Une reconstitution de prototype. Lisez les flux de prototype et les états de variantes des composants, puis reconstruisez le parcours cliquable en pages fonctionnelles.

Figma convient lorsque la maquette existe déjà dans un fichier et que l'application doit la suivre. Ce n'est pas un éditeur de design et cela ne dispense pas de vérifier le résultat, voir Limites.

#Exemples de construction

Copiez l'un de ces exemples dans le champ de saisie. Le premier est le point de départ le plus simple.

Use @Figma to turn my design file into a responsive landing page that matches its layout, colors, and fonts.

Use @Figma to build a component gallery page that lists every component and style in my design system file.

Use @Figma to generate a Tailwind config from my file's design tokens and use it in the app it builds.

Use @Figma to recreate the click-through prototype of my checkout flow as a working multi-page app.

#Préparer et connecter

Il vous faut un compte Figma qui peut déjà ouvrir les fichiers, projets et bibliothèques d'équipe que l'application doit lire. Rien d'autre n'est nécessaire : aucun jeton d'API à créer et aucune application Figma à enregistrer. MeDo utilise sa propre intégration Figma, et ce sont les droits de votre compte qui déterminent les fichiers visibles par l'application.

1. Ouvrez Skills & Connectors dans la barre latérale et recherchez Figma.
2. Ouvrez la carte et cliquez sur Connect.
3. Connectez-vous à Figma et cliquez sur Allow access sur l'écran de consentement.
4. Le bouton devient Connected.

Si vous commencez à construire avant de connecter, MeDo affiche un bouton de connexion Figma sous sa réponse, et la même carte se trouve dans la barre latérale gauche de l'éditeur, sous l'onglet Skill. Les deux entrées mènent au même endroit.

#L'utiliser dans votre application

• L'application utilise le compte que vous avez connecté, pas le compte Figma de chaque visiteur. Toutes les personnes qui ouvrent une page voient les mêmes données de design. Placez les vues de design derrière la connexion de votre application et limitez-les aux personnes prévues.
• Lecture seule, volontairement. L'application peut consulter un fichier, un projet ou une bibliothèque d'équipe, mais elle ne peut rien modifier, déplacer ni supprimer dans Figma. Les changements de design restent une étape manuelle dans Figma.
• Les fichiers sont désignés par un lien ou une clé. Un fichier possède une clé, et un nœud à l'intérieur un identifiant tel que 1:5. L'application convertit un lien Figma en ces adresses, puis lit le nœud ou son sous-arbre.
• Les jetons de design sont une étape de conversion. Couleurs, typographie, espacements, ombres et rayons sont extraits sous forme de jetons, que l'application transforme en configuration Tailwind et en variables CSS. Demandez d'abord la sortie des jetons lorsque vous voulez la relire.
• Les images rendues sont des liens temporaires. Le rendu d'un cadre ou d'un nœud revient sous forme d'URL à durée limitée, et non de fichier stocké dans votre application. Si une page affiche de nombreux aperçus, demandez à l'application de mettre en cache les images rendues dans son propre stockage et de ne relancer le rendu que lorsque la version du fichier change.
• Les interactions de prototype décrivent des flux, pas des comportements. L'application lit les liaisons, les animations et les états de variantes définis dans le fichier. Un fichier sans liaison de prototype renvoie un résultat vide, ce qui est normal pour un fichier utilisé seulement pour la mise en page et les styles.
• Votre formule et votre siège Figma déterminent le budget d'appels. Figma limite la fréquence de lecture de son API, selon votre formule et votre type de siège. Demandez à l'application de mettre en cache les données de design par fichier et par nœud, afin que chaque ouverture de page ne relise pas le même fichier.

#Limites et dépannage

L'application indique « connexion requise ». Demandez au propriétaire de l'application d'ouvrir la carte du connecteur et de cliquer sur Connect, puis rechargez. Le bouton de connexion sous la réponse de MeDo et l'onglet Skill dans la barre latérale gauche de l'éditeur mènent au même endroit.

Un fichier, un nœud ou une équipe est introuvable. Le compte connecté n'y a peut-être pas accès, ou le lien pointe vers un fichier d'une équipe dont le compte n'est pas membre. Ouvrez le fichier dans Figma avec ce compte pour vérifier, puis réessayez.

L'application signale une limite de débit. Figma limite les lectures d'API selon la formule et le siège, et une formule gratuite n'autorise que très peu de lectures par fichier et par mois. Attendez la réinitialisation de la limite, réduisez la fréquence de lecture du même fichier, et demandez à l'application de mettre les données de design en cache au lieu de les relire.

Un aperçu d'image ne se charge plus. Les liens d'image rendue expirent au bout d'un moment. Relancez le rendu du nœud, ou demandez à l'application de conserver sa propre copie des images qu'elle affiche souvent.

Les flux de prototype reviennent vides. Le fichier ne définit aucune liaison de prototype. Les états de variantes des composants sont tout de même renvoyés ; seules les liaisons de flux manquent.

#Voir aussi

• Catalogue des connecteurs — les autres connecteurs et leur usage.
• Skills et connecteurs — comment un Skill est appelé, facturé et limité.
• Gérer l'accès et les rôles — limiter qui peut lire les données connectées.