Guide pour débuter dans la création de plugins Framer

D’aussi loin que je me souvienne, j’ai toujours été obsédé par la recherche d’outils qui me simplifient le travail (et la vie).

Imaginez la scène : je suis en plein flow, en train de construire un site qui va en mettre plein la vue, quand je réalise que je dois vérifier le contraste des couleurs pour l’accessibilité. Et que dois-je faire ? Sortir de Framer juste pour ça, ouvrir un outil random sur le web, vérifier les couleurs, puis revenir dans Framer. Rincer et répéter une bonne treize fois.

C’est là que ça m’a frappé — pourquoi ne pas construire mon propre plugin ? Et ainsi réduire le nombre de fois où je dois changer d’onglet.

Honnêtement, ça s’est avéré plus simple que je ne le pensais.

Voici donc mon guide honnête et direct pour créer votre premier plugin Framer, basé directement sur mon expérience. Croyez-moi : si j’ai pu le faire, vous le pouvez aussi.

1. Définir le problème

Avant toute chose. Qu’est-ce qui vous rend complètement fou dans votre workflow Framer ?

Le bonus, c’est si c’est quelque chose avec lequel vous avez personnellement galéré. Cette frustration profonde et personnelle vous donne tout le contexte dont vous avez besoin pour comprendre pourquoi ça vaut le coup de le résoudre.

Pour moi, c’était le contraste des couleurs. J’en avais assez de passer d’un onglet à l’autre juste pour vérifier si mes designs étaient accessibles. Ce va-et-vient constant me tapait sur le système.

Une fois le problème identifié, discutez avec un LLM comme ChatGPT ou Claude. Déversez simplement toutes vos pensées sur :

- Pourquoi ce problème vous agace

- À quoi ressemble votre solution de rêve

- Comment elle s’intégrerait dans votre workflow

Demandez au LLM de rédiger un product requirements document (PRD) qui capture votre vision. C’est comme avoir un ami product manager dans la poche.

(Pas que je recommande de mettre vos amis dans de petits espaces).

A large question mark illuminated by a spotlight against a dark background, creating a mysterious atmosphere.

2. Mettre en place une documentation

Maintenant, organisons-nous. Je sais, je sais — la documentation a l’air ennuyeuse, mais croyez-moi, votre vous du futur vous remerciera.

Les LLM ont tendance à beaucoup halluciner, donc vous voudrez mettre des garde-fous en place.

Demandez à votre assistant IA de créer ces fichiers pour vous :

- `implementation-plan.md` – Votre roadmap pour construire

- `prd.md` – Les requirements détaillés

- `project-status.md` – Votre checklist de progression.

Mettez tout ça dans un dossier appelé « documentation ». On y reviendra plus tard.

3. Initialiser votre plugin Framer

Il est temps de lancer la fête ! Allez sur la doc des plugins Framer et suivez leurs commandes pour créer votre dossier de plugin.

Vous vous souvenez de ces fichiers de documentation que vous venez de créer ? Déposez-les dans la structure de votre nouveau dossier de plugin, qui devrait ressembler à quelque chose comme ça :

text

your-amazing-plugin/
├── documentation/
│   ├── implementation-plan.md
│   ├── prd.md
│   └── project-status.md
├── src/
│   ├── app.css
│   ├── app.tsx
├── package.json
└── README.md

Vous voyez ces fichiers de documentation, hein ? Ils jouent le rôle le plus crucial de ce puzzle.

A collection of colorful game pieces in red, yellow, orange, green, and blue arranged around a blank white space.

4. Commencer à construire

C’est là que la magie opère ! Lancez votre IDE assisté par l’IA préféré (je suis fan de Cursor moi-même) et c’est parti pour coder.

D’abord, faites lire le `prd.md` à l’IA et demandez-lui de vous expliquer ce qu’elle a compris du plugin. Corrigez immédiatement tout malentendu — ça évite des maux de tête plus tard.

Demandez à l’agent de consulter le `implementation-plan.md` avant de démarrer chaque feature majeure. Il devrait le suivre étape par étape, en mettant à jour automatiquement votre fichier `project-status.md` au fur et à mesure.

J’ai constaté qu’en déposant un lien vers la doc de l’API des plugins Framer dans mon chat Cursor, l’agent arrivait mieux à s’y référer et à écrire du code plus conforme.

5. Tester et déboguer

Après quelques heures d’échanges avec votre pote IA, vous devriez avoir quelque chose qui… eh bien, fonctionne à peu près ! Ce n’est peut-être pas joli, mais la fonctionnalité d’abord, non ?

Démarrez le serveur local du plugin dans votre terminal :

bash

npm run dev

Puis ouvrez le plugin de développement dans Framer pour voir ce que vous avez créé.

Prenez des captures d’écran de chaque bug que vous trouvez et décrivez-les à votre agent. Itérez jusqu’à ce que ça se sente juste.

6. Redesigner l’interface

Maintenant que votre plugin marche, rendons-le agréable visuellement. Capturez votre UI actuelle, composez un mood board, et affinez le look dans votre outil de design préféré (Figma marche très bien ici, car ça s’enchaîne avec l’étape suivante). Visez quelque chose de fiable, utilisable, et finalement plaisant.

7. Mettre à jour l’UI de votre plugin

Arrive maintenant la partie fun — faire en sorte que votre plugin soit aussi beau qu’il fonctionne !

Vous pouvez uploader des captures de votre redesign à votre agent, ou si vous vous sentez fancy, essayez le Figma MCP Server qui laisse Cursor interagir directement avec vos designs Figma. Copiez juste un lien vers votre frame, collez-le dans Cursor, et regardez la magie opérer.

8. Polish final et debug

Votre plugin a fière allure ! Prenez le temps de chipoter et d’ajuster.

Assurez-vous qu’il s’adapte au thème actif du canvas Framer — quand le canvas est en thème clair, votre plugin devrait l’être aussi, et vice versa. Ces petits détails comptent.

J’ai passé beaucoup de temps à faire marcher correctement le changement de thème, mais je n’ai vraiment avancé qu’en collant les instructions exactes de la doc Plugin.

9. Tester et déployer

Il est temps de lâcher votre création dans le monde ! Relancez tous vos tests une dernière fois et vérifiez que votre plugin respecte toutes les guidelines de soumission des plugins Framer.

Lancez `npm run pack` pour créer un fichier `plugin.zip` à la racine. C’est ce zip que vous uploaderrez sur le marketplace Framer.

Le process de review prend généralement environ 21 jours. L’équipe Framer vous contactera s’ils ont besoin de changements avant de lister votre plugin.

Pièges courants

Même si l’IA rend tout ce process relativement plus simple, il reste des choses qui peuvent vous faire arracher les cheveux si vous n’êtes pas prudent :

1. Sauvegarder la progression

Le version control est votre meilleur ami. Configurez Git et poussez régulièrement votre code vers un dépôt distant.

Faites des commits avant de commencer une nouvelle feature et après avoir fait marcher chaque feature. Croyez-moi — j’en ai été reconnaissant quand mon agent Cursor s’est coincé dans une boucle en essayant de fixer un bug.

Épargnez-vous de perdre des jours, voire des mois de travail.

2. Limites de l’IA

Votre assistant IA écrira parfois du code complètement incorrect avec une confiance totale. Double-checkez tout, surtout les appels API et les imports, et rappelez-lui régulièrement de se référer à la documentation.

3. Scope creep

Vous serez tenté d’ajouter « juste une feature de plus » — résistez ! Faites d’abord marcher votre MVP, puis itérez.

A visual companion to the common pitfalls of building with AI.

Conclusion

Construire un plugin Framer peut sembler intimidant au début, mais avec la bonne approche, c’est tout à fait faisable. Voir votre plugin sur le marketplace Framer fait un bien fou.

Et le meilleur ? Chaque fois que vous utilisez votre propre plugin, vous ressentez ce petit élan de fierté. « C’est moi qui l’ai fait ! »

Alors qu’attendez-vous ? Cette idée de plugin Framer pourrait devenir réalité en quelques semaines seulement.

Santé, et bon build !