Lin lors de sa conférence à la Config 2024 – capture d’écran YouTube
Lin, un développeur passionné, nous raconte sa création de plugins Figma. En partageant son parcours et ses réflexions, il met l’accent sur les aspects techniques de deux de ses créations populaires : “Curved Text” et “Cutout”, lors d’une conférence donnée à la Config 2024, “Plugins like whoa: Craft secrets behind” et insiste sur l’importance de la formation à Figma.
Curved Text, plugin Figma créé par Lin
La naissance de “Curved Text”, plugin Figma
L’idée de “Curved Text”, qui permet de plier le texte en différentes formes, comme des cercles complets ou des demi-cercles, a germé lors d’un projet personnel où Lin lorsqu’il était en train de manipuler des éléments SVG et des calculs de trajectoire sur Figma. Inspiré par les possibilités qu’il entrevoit, il s’est lancé dans le développement du plugin.
Fonctionnement technique de “Curved Text”
Pour concrétiser la fonctionnalité de “Curved Text”, Lin a combiné des APIs natives HTML et Figma :
- Récupération des positions et dimensions des caractères : l’API “getBoundingClientRect” est utilisée pour obtenir les positions de chaque caractère du texte.
- Création de formes Figma : les positions et dimensions des caractères sont ensuite exploitées pour créer des formes Figma individuelles, représentant chaque caractère sur la trajectoire.
- Personnalisation : le plugin offre des options pour ajuster la couleur, le style de police et l’espacement des caractères.
“Parfois, il ne faut pas trop réfléchir à la manière de créer des plugins Figma. Une solution simple peut parfaitement fonctionner et être juste ce qu’il faut pour résoudre un problème.” conclut Lin.
Fonctionnement technique de Curved Text, plugin Figma – capture d’écran Figma
“Cutout”, la suppression de l’arrière-plan et l’isolation des objets
“Cutout” permet aux designers de supprimer l’arrière-plan ou d’isoler un objet spécifique d’une image en quelques secondes. Ce plugin s’inspire des modèles de segmentation de Meta et utilise Transformer JS pour exécuter le processus d’IA côté client.
Fonctionnement technique de “Cutout”
- Exécution du modèle d’IA côté client : transformer JS est utilisé pour charger et exécuter le modèle d’IA dans le navigateur, éliminant ainsi le besoin d’un serveur cloud et préservant la confidentialité des données.
- Web workers : les web workers sont utilisés pour isoler les calculs lourds du thread principal, garantissant ainsi une expérience fluide dans l’application Figma.
- GPU web : le plugin tire parti du GPU web pour accélérer considérablement le processus de segmentation, offrant des performances jusqu’à 100 fois plus rapides que le CPU.
Fonctionnement technique de Cutout, plugin Figma – capture d’écran Figma
Le message de Lin, au-delà des plugins
Lin encourage vivement les créateurs à explorer le monde des plugins Figma et met en avant des ressources utiles pour débuter. Il souligne le potentiel de l’IA côté client pour réduire les coûts, améliorer la confidentialité et augmenter l’efficacité des produits. Son enthousiasme pour le développement web et les produits du futur est palpable, inspirant les lecteurs à explorer leurs propres idées créatives.
Ce qu’il faut retenir de l’intervention de Lin
- L’expérimentation et la curiosité sont des moteurs essentiels dans la création de plugins Figma.
- Des ressources précieuses pour les développeurs de plugins Figma incluent la chaîne YouTube officielle de Figma, la documentation Figma, le plugin Figlet et le projet GitHub “Create Figma Plugins”.
- L’IA côté client offre des opportunités innovantes pour le développement web, avec des avantages en termes de coûts, de confidentialité et d’efficacité.
Lire aussi :