Construire des widgets Figma interactifs

Figma a toujours encouragé la collaboration entre les développeurs et les concepteurs et a florisé avec son riche buffrant communautaire. Besoin d'éléments 3D? Il y a des plugins! Besoin d'un SVG abstrait? Il y a aussi des plugins!

Cependant, la partie de conception de la FIGMA a toujours été relativement statique - toujours utilisé des rectangles imprégnés, connectés ensemble par des interactions utilisateur prédéfinies. Mais que pensez-vous que si je disais que votre design peut soudainement prendre vie - peut être animé, interactif ou même avec état? Alors, quelle est la différence entre les concepts et les implémentations?

Figma a annoncé en juin qu'il lancerait un widget basé sur JavaScript. Les concepteurs peuvent désormais parcourir et implémenter des composants logiques directement dans FIGMA!

Apprenez ensemble l'API Widgets! Vous voulez savoir ce que c'est et comment l'utiliser? C'est exactement ce que nous explorerons ensemble dans cet article.

Le widget Figma permet des possibilités infinies

imaginez que vous et vos partenaires travaillez jour et nuit pour concevoir une grande application de restaurant. Vous collaborez tous sur le même Figma Artboard; vous partagez exactement le même document et les changements se produisent en temps réel.

Bien sûr, vous savez déjà que la collaboration implique plus que le processus de conception:

• Gestion de projet,
• , tenir un vote,
• Importer et visualiser les données simulées,
• Peut-être même jouer à un jeu multijoueur pour se détendre pendant longtemps.

Une seule personne a besoin de tout gérer et d'envoyer des liens vers le reste du groupe. Mais ce n'est pas efficace, non?

C'est là que le widget entre en jeu. Nous pouvons imaginer faire tout cela - oui, tout cela - sans laisser Figma.

/ li>

Créer des minuteries

ainsi, etc. Comme vous pouvez le voir, il existe déjà un grand nombre de widgets qui sont libres d'être utilisés dans votre documentation. En fait, vous pouvez ajouter des widgets à votre artboard directement à partir du menu Widgets (Shift I).

Mais nous ne sommes pas là pour apprendre à utiliser des widgets, car c'est facile. Faisons ce que nous faisons de mieux: nous créerons nos propres widgets Figma! Ce widget sera inspiré par le site Web de la citation de conception de Chris Coyier. Nous obtiendrons l'API, le nourrirons sur le widget, puis afficherons les citations de conception aléatoires directement dans Figma.

De quoi avons-nous besoin

Je n'aime pas être un épandier de mauvaises nouvelles, mais pour développer des widgets, vous devez être sur Windows ou Mac. Utilisateur Linux, désolé, vous n'êtes pas chanceux. (Si vous souhaitez continuer à apprendre, vous pouvez toujours utiliser la machine virtuelle.)

Nous téléchargerons l'application Figma Desktop. La façon la plus simple de commencer est de générer des modèles de widgets directement à partir de l'application.

Créons un nouvel artboard en ouvrant le menu du widget (Shift I), en passant à l'onglet Development et en créant un nouveau projet.

Après cela, Figma vous invitera à nommer le nouveau widget et à décider s'il est plus adapté à la conception de planches artistiques ou de planches d'arts Figjam. Aux fins de cet article, l'option précédente est suffisante.

La personnalisation ne s'arrête pas là; Nous choisirons l'option simple "vide", mais nous allons éventuellement le modifier nous-mêmes pour utiliser l'API Fetch.

Le système vous invitera ensuite à enregistrer le nouveau projet Widget dans un répertoire spécial du système. Une fois terminé, commencez votre terminal et dirigez-le vers le dossier. N'exécutez aucune commande maintenant - nous le ferons plus tard et nous ferons délibérément une erreur dans le but d'en savoir plus sur l'API Widgets.

Widgets de conception

Nous obtenons la conception directement sur le site Web de la citation de conception de Chris Coyier. Alors, allons-y et creuons plus profondément en lançant Devtools.

Les deux raccourcis clés que j'utilise ici sont Ctrl Shift C (ou CMD Shift C) pour changer l'outil Pick Elements et Shift Clicks pour modifier le format de couleur en code hexadécimal. Nous le faisons pour comprendre les couleurs, les polices, l'épaisseur de police et la taille des polices utilisées dans le site Web de Chris. Toutes ces informations sont cruciales pour construire un widget très similaire sur Figma, et ce sera notre prochaine étape! Vous pouvez saisir les composants conçus et les utiliser sur votre propre toile.

Je n'entrerai pas dans les détails ici, car le sujet de cet article est de créer des widgets en écrivant du code. Mais je dois souligner qu'il est très important de styliser soigneusement vos widgets… CSS-Tricks a déjà beaucoup de tutoriels Figma axés sur le design; vous ne regretterez pas de les ajouter à votre liste de lecture.

Créez des dispositions pour notre widget

Une fois la conception terminée, il est temps de retirer nos doigts de programmation et de commencer à construire les engrenages de nos widgets.

La façon dont Figma convertit ses blocs de construction de conception en composants de type réactif est très intéressant. Par exemple, un élément de framework avec disposition automatique est représenté dans le code du code en tant que <autolayout> autolayout> </autolayout>. De plus, nous utiliserons deux autres composants: <text> </text> et <svg> </svg> .

Regardez mon Figma Artboard ... Je vous demande de faire attention à l'arbre d'objet. C'est la clé de notre besoin de pouvoir convertir notre conception de widgets en code JSX.

Comme vous pouvez le voir, notre widget de devis de conception nécessite l'importation de trois composants. Étant donné que l'API complète ne contient que huit nœuds basés sur des couches, il s'agit d'un nombre considérable de composants. Mais comme vous le verrez bientôt, ces modules sont suffisants pour faire toutes sortes de dispositions.

 <code> // code out> <svg>  svg> <vacon text>  autolayout> <svg> </svg> );} widget.register (QuotesWidget); </vacon></svg></code> 

Ce code est pour le moins déroutant. Maintenant, nous ne pouvons pas faire la distinction entre les couches de conception. Heureusement, nous pouvons facilement résoudre ce problème à l'aide de l'attribut nom .

 <code> <autolayout name="{" quote> <svg name="{" leftquotmark>  svg> <autolayout name="{" quotecontent> <text name="{" quottetex> </text></autolayout></svg>  autolayout>; </autolayout></code> 

Bien sûr, nous ne pouvons toujours pas voir notre Citation SVG, alors commençons à résoudre ce problème. Le composant <svg> </svg> accepte un attribut src qui utilise le code source de l'élément SVG. Il n'y a pas grand-chose à dire à ce sujet, alors gardons les choses simples et revenez directement au code:

 <code> const LeftQuotationsVgsrc = `<svg fill=" non " svg> `; const rightquotationsvgsrc =` <svg fill="non" height="103" viewbox="0 0 118 103" width="118" xmlns="<http://www.w3.org/2000/svg>"> // raccourci pour simplicité </svg> `; } "src =" {RightquotationsVgsrc} "> </svg>);} </code> 

Je pense que nous pouvons tous convenir que tout est beaucoup plus clair maintenant! Lorsque nous nommons des choses, leur objectif devient soudainement plus évident pour les lecteurs de notre code.

Aperçu de notre widget

FIGMA offre une bonne expérience de développement lors de la construction de widgets, y compris (mais sans s'y limiter) un rechargement à chaud. Avec cette fonctionnalité, nous pouvons coder et prévisualiser les modifications des widgets en temps réel.

Ouvrez d'abord le menu du widget (Shift I), passez à l'onglet Development, puis cliquez ou faites glisser votre nouveau widget vers le tableau artistique. Vous ne trouvez pas votre widget? Ne vous inquiétez pas, cliquez simplement sur le menu à trois points et importez le fichier manifeste.json de votre widget. Oui, ce sont toutes les étapes pour le ramener à l'existence!

Attendez, y a-t-il un message d'erreur en bas de votre écran?

Si oui, étudions. Cliquez sur " ouvrir la console " et lisez son contenu. Si le bouton Open Console disparaît, il existe un autre moyen d'ouvrir la console de débogage. Cliquez sur le logo Figma, sautez dans la catégorie des widgets et affichez le menu de développement.

L'erreur peut être parce que nous n'avons pas encore compilé TypeScript en JavaScript. Nous pouvons le faire sur la ligne de commande en exécutant npm install et npm run watch (ou yarn et yarn watch ). Il n'y a pas d'erreurs cette fois!

Un autre obstacle que vous pouvez rencontrer est que le widget ne peut pas être rendu chaque fois que le code change. Nous pouvons facilement forcer les mises à jour du widget en utilisant la commande de menu contextuel suivant: widget → repenser le widget .

Paramètres de style Widget

Pour l'instant, l'apparence de nos widgets est encore loin de notre objectif ultime.

Alors, comment pouvons-nous styliser le composant Figma du code? Peut-être que l'utilisation de CSS comme vous le feriez dans un projet React? erreur. Pour les widgets Figma, tous les styles sont implémentés via un ensemble complet de propriétés. Heureusement, ces projets ont presque le même nom que les projets correspondants de Figma.

Nous allons d'abord configurer nos deux composants <autolayout> autolayout> </autolayout>. Comme le montre la figure ci-dessus, les noms d'attribut décrivent très clairement leur objectif. Cela nous permet de sauter directement au code et de commencer à apporter quelques modifications. Je ne montrerai plus le code entier, alors comptez sur le nom du composant pour vous guider où se trouve l'extrait de code.

 <code> <autolayout direction="{" horizontal horizontal:="" center name="{" quote padding=" " start quotecontent espacement="{10}" vertical:="" verticalalignitems="{" end>  autolayout>  autolayout>; </autolayout></code> 

Nous avons fait de grands progrès! Sauvons et revenons à Figma pour voir à quoi ressemble notre widget. Rappelez-vous comment Figma recharge automatiquement le widget après un nouveau changement?

mais ce n'est pas suffisant. Nous devons également ajouter de la couleur d'arrière-plan au composant racine:

 <code> <autolayout fill="{" ffffff name="{" quote>  autolayout> </autolayout></code> 

De même, regardez votre artboard Figma et remarquez comment les modifications sont réfléchies presque immédiatement dans le widget.

Continuons avec ce guide et stylisez le composant <ext> </ext>.

Après avoir visualisé la documentation de l'API Widgets, vous voyez clairement que le nom de la propriété est presque le même que son élément correspondant dans l'application Figma, comme indiqué dans la figure ci-dessus. Nous utiliserons également les valeurs du site Web de Chris dans la section précédente.

 <code> <text fill="{'# 545454'}" fontfamily="{'lora'}" fontsize="{36}" fontweight="{'Normal'}" name="{'Qutetext'}" width="{700}"> {Quote} Fontfamily = "{'raleway'}" Fontize = "{26}" fontweight = "{'bold'}" name = "{'QuteAuthor'}" TextCase = "{'Upper'}" width = "{700}"> - {auteur}  text> </text></code>  pre> <h3> Ajouter un état au widget </h3> <p> Notre widget affiche actuellement la même citation, mais nous voulons l'extraire au hasard à partir de l'ensemble du pool de devis. Nous devons ajouter un état à notre widget, que tous les développeurs réagissent est une variable dont les modifications déclencheront une reprise de notre composant. </p> <p> Dans FIGMA, l'état est créé à l'aide du <code> usynedState </code> Hook; Cette exigence découle du fait que Figma doit synchroniser les états de nos widgets qui couvrent tous les clients qui peuvent consulter le même plan de conception, mais via différents ordinateurs. </p> <pre class="brush:php;toolbar:false"> <code> const {usynedScystate} = widget; function quoteswidget () {const [quote, setQuote] = usynedScatedState ("Quote-text", ""); Dans la section suivante, nous trouverons comment obtenir des données sur Internet. Avertissement de spoiler: ce n'est pas aussi simple qu'il n'y paraît.  <h3> Obtenez des données du réseau </h3> <p> Rappel Figma nous permet de choisir de commencer avec un widget qui permet Iframe. Bien que nous n'ayons pas choisi cette option, nous avons encore dû implémenter certaines de ses fonctionnalités. Permettez-moi d'expliquer pourquoi nous ne pouvons pas simplement appeler <code> fetch () </code> dans le code du widget. </p> <p> Lorsque vous utilisez des widgets, vous exécutez du code JavaScript écrit par quelqu'un d'autre sur votre ordinateur. Bien que tous les widgets aient été complètement examinés par le personnel de Figma, il s'agit toujours d'une énorme vulnérabilité de sécurité car nous savons tous combien de dégâts, même une ligne de JavaScript peut provoquer. </p> <p> Figma ne peut donc pas simplement <code> eval () </code> anonymement n'importe quel code de widget écrit par un programmeur. Pour faire court, l'équipe a décidé que la meilleure solution était d'exécuter du code tiers dans un environnement de bac à sable étroitement protégé. Comme vous l'avez peut-être deviné, l'API du navigateur n'est pas disponible dans cet environnement. </p> <p> Mais ne vous inquiétez pas, la solution de Figma à ce deuxième problème est <code> <frame> </code>. Tout code HTML que nous écrivons dans un fichier (de préférence appelé <code> ui.html </code>) a accès à toutes les API du navigateur. Vous vous demandez peut-être comment nous pouvons déclencher ce code à partir d'un widget, mais nous examinerons cela plus tard. Revenons maintenant au code:  </p> <pre class="brush:php;toolbar:false"> <code> // manifest.json {"ui": "ui.html"} </code> 

 <code> window.onMessage = async (event) = & gt; The Server Window.parent.postMessage ({PluginMessage: {// todo: renvoie les données récupérées}}, '*')}} </code> 

Il s'agit d'un modèle commun pour la communication Iframe. Utilisons-le pour obtenir des données du serveur: iframe>

 <code> window.onMessage = async (event) = & gt; fetch (`https://quotesonsesign.com/wp-json/wp/v2/posts/?orderby=rand&amp ;per_page=1&amp ;page=$ {randompage} & amp; _Fields = title, yoast_head_json`) Constère de la réponse = Await Res.json () // .redered const quotonContent = data [0] .yoast_head_json.og_description window.parent.posessage ({pluginMessage: {authorname, quotecontent}}, '*')}} </code> 

Pour rester simple et clair, nous omettons la gestion des erreurs. Revenons dans le code du widget et voyons comment nous accédons aux fonctions définies dans <frame> :

 <code> function fetchData () {return new promew <void> (résolve = & gt; {Figma.showui (__ html__, {Visible: faux}) figma. }) Figma.ui.onMessage = Async ({Authorname, quotecontent}) = & gt; } </void> </code>  pre> <p> Comme vous pouvez le voir, nous disons d'abord à Figma d'accéder publiquement à notre cachette <code> <frame> </code> et de déclencher un événement appelé "NetworkRequest". Nous gérons cet événement dans le fichier <code> ui.html </code> en vérifiant <code> event.data.pluginmessage.type === 'NetworkRequest' </code>, puis publions les données vers le widget.  </p> <p> Mais rien ne s'est encore produit ... nous n'avons toujours pas appelé la fonction <code> fetchData () </code>. Si nous l'appelons directement dans la fonction du composant, l'erreur suivante apparaîtra dans la console: </p> <pre class="brush:php;toolbar:false"> <code> showui ne peut pas être utilisée pendant le rendu du widget. </code> 

Figma nous dit de ne pas appeler showui directement dans le corps de la fonction ... alors où devrions-nous le mettre? La réponse est un nouveau crochet et une nouvelle fonction: useEffect et waitfortask . Si vous êtes un développeur React, vous connaissez peut-être déjà useEffect , mais nous l'utiliserons ici pour obtenir des données du serveur lorsque le composant du widget est monté.

 <code> const {useEffecte, waitFortask} = widget; Function QuotesWidget () {useEffected () = & gt; {waitFortask (fetchData ());}); Cela se produit parce que <code> utilise effectif </code> par définition, il se déclenche à nouveau chaque fois que l'état du widget change, ou lorsque nous appelons <code> fetchData </code>. Bien qu'il existe une technique qui ne peut appeler <code> userEEFFECT </code> qu'une fois dans React, cela ne fonctionne pas avec l'implémentation de FIGMA. Depuis la documentation de Figma:  <lockquote> <p> En raison de la façon dont les widgets s'exécutent, l'utilisation d'effet doit gérer plusieurs fois en utilisant le même état. </p> </lockquote> <p> Heureusement, nous pouvons profiter d'une solution de contournement simple qui appelle unique ; Ceci est très courant dans le développement du plug-in et du widget. Redémarrez simplement Figma et il n'apparaît plus. </p> <p> Vous avez peut-être remarqué que le texte de citation contient parfois des caractères étranges. </p> <p> Ce sont des caractères Unicode, nous devons les formater correctement dans le code: </p> <pre class="brush:php;toolbar:false"> <code> window.onMessage = Async (événement) = & gt; odeentities = (function () {// Cela empêche toute surcharge de créer l'objet chaque fois var element = document.createElement ("div"); fonction decodehtmlentities (str) {if (str & amp; & amp; typeof str === "String") {// script strip / html str = str.replace (/] * & gt; ([\\\ \ s \\\\ \ s] *?) & lt; \\\\ \\ \\ \\ \\ \\ \\; \\ w (?: [^ "'& gt;] |" [^ "] *" |' [^ '] *') * & gt; / gim, ""); élément.innerhtml = str; Element.TextContent = "";} Return Str;} RETOUR DECODEHTMLEntités;}) ();  <h3> Ajoutez du menu Propriétés à notre widget </h3> <p> Bien que notre widget obtienne un nouveau devis lorsqu'il est instancié, il sera plus pratique si nous pouvons effectuer à nouveau ce processus sans le supprimer. Cette section sera brièvement introduite car la solution est excellente. À l'aide du menu Propriétés, nous pouvons ajouter une interactivité à notre widget en appelant le <code> usepropertymenu </code> Hook à la fois. </p> <pre class="brush:php;toolbar:false"> <code> const {useProperTyMenu} = widget; function quotesWidget () {useProperTymenu ([{generate ", icon:` <svg fill="nue" hight="15" www.w3.org> "> </svg>`,},], () = & gt; fetchData ());} </code> 

À l'aide d'un crochet simple, nous pouvons créer un bouton qui apparaît près de notre widget lorsque notre widget est sélectionné. C'est la dernière partie que nous devons ajouter pour terminer ce projet.

Publiez notre widget au public

Si personne ne l'utilise , alors la construction d'un widget est peu utile. Bien que Figma autorise les organisations à lancer des widgets privés pour un usage interne, il est plus courant de publier ces applets dans le monde.

Figma a un processus de révision méticuleux qui peut prendre entre 5 et 10 jours ouvrables. Bien que le widget de devis de conception que nous avons construit ensemble soit déjà dans la bibliothèque du widget, je vais toujours montrer comment il y arrive. Veuillez ne pas essayer de publier à nouveau ce widget, car cela ne fera que la suppression . Cependant, si vous apportez des modifications majeures, continuez à partager vos propres widgets avec la communauté!

Cliquez d'abord sur le menu du widget (Shift I), puis passez à l'onglet Development pour afficher notre widget. Cliquez sur le menu à trois points et appuyez sur publier .

Figma vous invitera à saisir certains détails sur votre widget, tels que le titre, la description et quelques balises. Nous avons également besoin d'une image d'icône 128 × 128 et d'une image de bannière 1920 × 960.

Après l'importation de toutes ces ressources, nous avons toujours besoin d'une capture d'écran du widget. Éteignez le mode publication (ne vous inquiétez pas, vous ne perdez pas de données) et cliquez avec le bouton droit sur le widget pour afficher un menu contextuel intéressant. Trouvez la catégorie copier / coller comme et sélectionner copier comme png .

Une fois cela fait, revenons en mode publier et collez la capture d'écran du widget dans:

Faites défiler vers le bas et enfin publiez votre mode. célébrer! ?

Figma vous contactera dans quelques jours pour vous informer de l'état de l'examen du modèle. Si vous êtes rejeté, vous aurez la possibilité d'apporter les modifications et de les soumettre à nouveau.

Conclusion

Nous venons de construire un widget Figma à partir de zéro! Il y a beaucoup de choses qui ne sont pas couvertes ici, telles que des événements de clic, des formulaires d'entrée, etc. Vous pouvez creuser dans le code de widget source complet dans ce référentiel GitHub.

Pour ceux qui sont impatients de faire passer leurs compétences Figma au niveau supérieur, je recommande d'explorer la communauté des widgets et d'utiliser ce qui vous intéresse comme inspiration. Continuez à construire plus de widgets, continuez à perfectionner vos compétences de réaction, et vous m'apprendrez à tout faire avant de vous en rendre compte.

Plus de ressources

J'ai dû faire référence à beaucoup de documentation lors de la fabrication de ce widget. Je pense que je vais partager ce que j'ai trouvé le plus utile.

Créez plus de widgets:

• Best Practices for Building Widgets
• Widget Figma officiel avec code

> Widgets et plugins

• widgets et plugins
• Introduction aux plugins Figma
• Comment les plugins fonctionnent dans les coulisses

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!