Figma

Avec la source Figma, tu colles le lien d’une frame dans ton message et l’agent la reproduit dans ton app. Il lit ses calques, ses textes, ses couleurs, ses polices et ses espacements, et il la voit en image pour coller au plus près du rendu.

Figma se connecte avec un jeton d’accès personnel en lecture seule : l’agent ne peut jamais modifier tes fichiers.

Ce que l’agent peut lire

• Une frame (lien avec node-id) : l’arbre de ses calques avec leurs tailles, l’auto-layout, les couleurs (avec le nom de leurs styles), les textes et les polices, plus un rendu en image de la frame.
• Un fichier entier (lien sans node-id) : la liste de ses pages et de ses frames. L’agent lit ensuite les frames à construire, une par une.
• Les liens acceptés : figma.com/design/…, figma.com/file/…, figma.com/proto/…, figma.com/board/…, y compris un lien vers une branche.

Il ne lit que les fichiers auxquels ton compte Figma a accès, et seulement quand tu colles leur lien.

Connecter Figma

Figma se connecte avec un jeton que tu crées dans ton compte Figma.

1. Dans Figma, ouvre les Paramètres de ton compte → onglet Sécurité → Jetons d’accès personnels (Personal access tokens), puis crée un nouveau jeton.

2. Donne-lui un nom (par exemple « Highwind ») et choisis ces droits, en lecture seule :

   • File content ;
   • Current user.

   Aucun autre droit n’est nécessaire.

3. Copie le jeton (il commence par figd_). Figma ne l’affiche qu’une fois.

4. Dans Highwind, ouvre la page Connecteurs, repère la carte Figma (catégorie Contexte pour l’agent) et ouvre sa fiche. Le lien Créer un jeton mène à l’aide de Figma si besoin.

5. Colle le jeton dans le champ Jeton d’accès personnel, puis clique sur Connecter. Highwind vérifie le jeton auprès de Figma.

6. La carte affiche Connecté : « colle le lien d’une frame dans ton message pour que l’agent la reproduise ».

Pourquoi un jeton et pas une connexion en un clic ?

Le serveur MCP de Figma n’accepte que les applications qu’il a approuvées. Highwind passe donc par l’API de Figma avec ton jeton personnel, en lecture seule. Le jeton est chiffré dans Highwind et n’est jamais montré à l’agent.

Copier le lien d’une frame

Dans Figma, sélectionne la frame (l’écran entier, pas un calque à l’intérieur), puis clic droit → Copy/Paste as → Copy link to selection. Le lien contient alors node-id=…, et l’agent sait exactement quel écran reproduire.

Exemples de demandes

Construis cette page : https://www.figma.com/design/AbCdEf123/Site-vitrine?node-id=12-345

Reprends les couleurs et les polices de cette maquette dans le thème du site, sans changer la mise en page : https://www.figma.com/design/AbCdEf123/Site-vitrine?node-id=12-345

Voici mon fichier Figma : https://www.figma.com/design/AbCdEf123/App-mobile. Liste les écrans, puis construis l'écran « Accueil ».

Ajoute la section Tarifs de cette frame sous la section Témoignages existante : https://www.figma.com/design/AbCdEf123/Site-vitrine?node-id=40-12

Comment l’agent reproduit une maquette

• Il commence par placer les couleurs principales et les polices de la maquette dans le thème du site, pour que tout le reste en découle.
• Il reproduit la mise en page, les textes et les espacements fidèlement, avec l’image de la frame comme référence visuelle.
• Les noms de calques Figma ne deviennent pas des noms de composants, et les dessins vectoriels sont refaits en icônes ou en formes simples.
• Pour un fichier entier, il travaille frame par frame.

Des maquettes propres donnent de meilleurs résultats

Des frames en auto-layout, des styles de couleur et de texte nommés et des textes réels (pas du « Lorem ipsum ») aident beaucoup l’agent. Pour les images de la maquette, envoie tes vrais fichiers dans le projet (menu + → Joindre) : l’agent pourra les placer.

Limites

• Lecture seule : le jeton demandé ne permet que la lecture. L’agent ne modifie jamais tes fichiers.
• Accès : si ton compte n’a pas accès au fichier, ou si le jeton a expiré ou a été révoqué, Figma refuse la lecture. Vérifie le partage du fichier, ou reconnecte Figma avec un nouveau jeton.
• Limite d’appels de Figma : si Figma répond qu’il reçoit trop de demandes, réessaie une minute plus tard.
• Très grandes frames : le détail transmis à l’agent est limité (environ 20 000 caractères de structure, image réduite). Pour une très longue page, envoie-la section par section.
• Interactions et animations : l’agent reproduit les écrans ; décris-lui en mots les animations ou les parcours d’un prototype.

Déconnecter ou changer de jeton

Page Connecteurs → fiche Figma → Déconnecter : le jeton est effacé de Highwind. Pour le désactiver aussi chez Figma, supprime-le dans Paramètres → Sécurité → Jetons d’accès personnels. Pour utiliser un nouveau jeton, déconnecte Figma puis connecte-le de nouveau avec le nouveau jeton.

Voir aussi

Sources de contexteComment l'agent lit tes outils, et la confidentialité.

Design et thèmeComment l'agent range couleurs et polices dans le thème.

Le mode DesignRetoucher le résultat sans l'agent, gratuitement.

Images du projetEnvoyer tes visuels pour que l'agent les place.