Notre avis
Interagit avec les fichiers de conception Figma via le navigateur en utilisant l'API Plugin Figma.
Points forts
- Permet de créer et modifier des formes et propriétés dans Figma automatiquement.
- Extraction d'informations depuis les fichiers de conception sans intervention manuelle.
- Utilise l'API officielle Figma pour des actions fiables et précises.
Limites
- Nécessite une connexion et une ouverture manuelle du fichier Figma.
- L'API Plugin n'est accessible qu'après avoir ouvert un plugin dans le fichier au moins une fois.
- Ne fonctionne pas avec l'API REST Figma ; dépend du contexte navigateur.
Lorsque vous avez besoin d'automatiser des tâches répétitives dans Figma comme la création de composants ou l'extraction de données de design.
Si vous cherchez à interagir avec Figma en dehors du navigateur (ex : via API REST) ou si l'utilisateur n'a pas les permissions nécessaires pour exécuter des plugins.
Analyse de sécurité
SûrThe skill uses Chrome DevTools to interact with the Figma Plugin API, but does not perform destructive actions, exfiltrate data, or disable safety features. The evaluate_script calls are restricted to the Figma page context.
Aucun point d'attention détecté
Exemples
Create a 200x300 blue rectangle at position x=100, y=50 in the current Figma design file.Tell me the names, types, and dimensions of all currently selected elements in my Figma file.name: figma-design version: 1.0.0 description: >- Interact with Figma design files via the web browser using the Figma Plugin API. Can create shapes, modify properties, extract information from design files. allowed-tools: chrome-devtools_navigate_page: true chrome-devtools_evaluate_script: true chrome-devtools_take_snapshot: true chrome-devtools_take_screenshot: true chrome-devtools_click: true chrome-devtools_fill: true chrome-devtools_wait_for: true
Figma Design Skill
Interact with Figma design files via the web browser using the Figma Plugin API.
Instructions
-
Use the
chrome-devtools_navigate_pagetool to go to Figma's website. Then, prompt the user to log in to their Figma account if they are not already logged in and open a specific design file. -
Once the user has opened the design file, use
chrome-devtools_evaluate_scriptto confirm that you have access to thefigmaglobal object, which indicates that you are within the Figma environment. If you do not have access, inform the user that they need to open a Figma design file or see the Troubleshooting section below. -
After confirming access, execute the user's query using
chrome-devtools_evaluate_scriptto run JavaScript code that interacts with the Figma Plugin API. You can perform tasks such as creating shapes, modifying properties, or extracting information from the design file.
Rules of Engagement
- Always explain in plain English what you are about to do. Assume that the user cannot read code.
- Do not try alternative solutions like using the REST API or manually interacting with the Figma UI.
Troubleshooting
If figma is not defined:
- Make sure that the user has appropriate permissions to edit the file and run plugins
- If the user doesn't have permissions, suggest creating a new branch on the file
- If the
figmaglobal is still not accessible, instruct the user to manually open any plugin and close it, then try again
Note: There is a known bug where the
figmaglobal is not available until a plugin has been opened at least once in the file.
Additional Documentation
The full reference to the Figma Plugin API can be found here: Figma Plugin API Documentation
Expert Next.js App Router
Developpement
Un skill qui transforme Claude en expert Next.js App Router.
Générateur de README
Developpement
Crée des README.md professionnels et complets pour vos projets.
Rédacteur de Documentation API
Developpement
Génère de la documentation API complète au format OpenAPI/Swagger.