Figma a toujours encouragé la collaboration entre développeurs et designers. Il s'efforce sur un trésor sans fin de plugins créés par la communauté. Besoin d'éléments 3D ? Il y a un plugin pour ça. Besoin de SVG abstraits ? Il y a un plugin pour ça, Aussi.
Cela dit, la partie conception de Figma a toujours été relativement statique - travaillant toujours avec des rectangles fixes connectés les uns aux autres via des interactions utilisateur prédéfinies. Mais que se passerait-il si je vous disais que vos conceptions pourraient soudainement prendre vie, qu'elles pourraient être animées, interactives et même avec état ? Alors, qu'est-ce qui séparerait le concept de la mise en œuvre ?
Figma annoncé en juin qu'il apporte des widgets alimentés par JavaScript à la table. Désormais, les concepteurs peuvent parcourir et implémenter des composants logiques directement dans Figma !
Dites bonjour à l'API Widget! Vous voulez savoir ce que c'est et comment l'utiliser ? C'est exactement ce que nous allons faire ensemble dans cet article.
Les widgets Figma ouvrent des tonnes de possibilités
Imaginez que vous travaillez XNUMX heures sur XNUMX avec votre partenaire pour concevoir une grande application de restaurant. Vous collaborez déjà tous les deux sur le même tableau Figma; vous partagez tous les deux exactement le même document, les modifications étant apportées à la volée.
Vous savez sûrement déjà que la collaboration implique plus que le simple processus de conception :
- gestion de projet,
- organiser des sondages pour recueillir des votes,
- importer et visualiser des données factices,
- et peut-être même jouer à un jeu multijoueur pour se rafraîchir après de nombreuses heures de travail.
Nous avons juste besoin d'une personne pour tout gérer et envoyer des liens aux autres membres du groupe. Mais oh, ce n'est pas très efficace, n'est-ce pas ?
Eh bien, c'est là que les widgets entrent en jeu. Nous pouvons concevablement faire tout cela - oui, tout - sans jamais quitter Figma.
Voici quelques-unes des façons dont vous pourriez vouloir utiliser des widgets dans Figma :
La liste va encore et encore. Comme vous pouvez le constater, il existe déjà une pléthore de widgets que vous pouvez utiliser librement dans vos documents. En fait, vous pouvez ajouter des Widgets directement à votre tableau depuis le menu Widgets (Shift+I).
Mais nous ne sommes pas là pour apprendre à utiliser les widgets, car c'est facile. Faisons ce que nous faisons le mieux : nous allons créer notre propre widget Figma ! Celui-ci s'inspirera de Site de citations de design de Chris Coyier. Nous allons prendre l'API, l'introduire dans le widget, puis afficher des devis de conception aléatoires directement dans Figma.
Voici ce dont nous avons besoin
Je n'aime pas être porteur de mauvaises nouvelles, mais pour développer des widgets, il faut être sur Windows ou Mac. Utilisateurs de Linux, je suis désolé, mais vous n'avez pas de chance. (Vous pourriez toujours utiliser une machine virtuelle si vous voulez suivre.)
Nous allons télécharger le bureau Figma application. La façon la plus simple de commencer est de générer un modèle de widget, directement depuis l'application.
Créons un nouveau tableau en ouvrant le menu des widgets (Shift+ I), en passant au Développement onglet et création d'un nouvel élément.
Ensuite, Figma vous demandera de nommer le nouveau widget et de décider s'il est plus adapté à planches design ou planches FigJam aussi. La première option est suffisante pour les besoins de cet article.
Et la personnalisation ne s'arrête pas là ; Figma vous donnera également la possibilité de commencer avec un widget de compteur prédéfini ou une alternative compatible iFrame qui vous donne également accès aux API Canvas et Fetch (ainsi qu'à toutes les autres API de navigateur). Nous allons utiliser la simple option "Vide", mais nous finirons par la modifier nous-mêmes pour utiliser l'API Fetch.
Vous serez ensuite invité à enregistrer votre nouveau projet de widget dans un répertoire spécial de votre système. Une fois cela fait, lancez votre terminal et dirigez-le vers ce dossier. N'exécutez pas encore de commandes - nous le ferons plus tard et obtiendrons délibérément une erreur dans le but d'en savoir plus sur l'API Widgets.
Conception du widget
Nous tirons le design directement de Site de citations de design de Chris Coyier. Alors, allons-y et plongeons-y en lançant DevTools.
Les deux raccourcis clavier que j'utilise ici sont Ctrl+Shift+C (ou Cmd+Shift+C) pour basculer l'outil "Choisir un élément", et Shift+Click pour changer le format de couleur en code HEX. Nous faisons cela pour en savoir plus sur les couleurs, les polices, les poids et les tailles de police utilisés sur le site Web de Chris. Toutes ces informations sont essentielles pour créer un widget très ressemblant dans Figma, qui sera notre prochaine étape ! Tu peux saisir le composant conçu et utilisez-le dans votre propre toile.
Je n'entrerai pas dans les détails ici car le sujet principal de cet article est la construction de widgets en écrivant du code. Mais je ne saurais trop insister sur l'importance de bien prendre soin de votre style des widgets… CSS-Tricks a déjà une pléthore de tutoriels Figma orientés design; vous ne regretterez pas de les ajouter à votre liste de lecture.
Création de la mise en page de notre widget
Avec la conception à l'écart, il est temps de sortir nos doigts de la programmation et de commencer à construire les engrenages de notre widget.
Il est très intéressant de voir comment Figma traduit ses blocs de construction de conception en composants de type React. Les éléments de cadre avec la fonction de mise en page automatique, par exemple, sont représentés comme le <AutoLayout /> composant dans le code. En plus de cela, nous utiliserons deux autres composants : <Text /> ainsi que <SVG />.
Jetez un oeil à mon tableau Figma… Je vous demande justement de vous concentrer sur l'arbre d'objets. C'est ce dont nous avons besoin pour pouvoir traduire la conception de notre widget en code JSX.
Comme vous pouvez le voir, notre widget de devis de conception nécessite l'importation de trois composants. C'est un nombre décent de composants étant donné que le API complète ne contient que huit nœuds basés sur des couches. Mais comme vous le verrez bientôt, ces modules sont plus que suffisants pour créer toutes sortes de mises en page.
// code.tsx
const { widget } = figma;
const { AutoLayout, Text, SVG } = widget;Et avec cela, nous avons tout ce dont nous avons besoin pour continuer et construire le squelette de notre widget comme nous le ferions dans React :
function QuotesWidget() {
const quote = `...`;
const author = `...`;
return (
<AutoLayout>
<SVG />
<AutoLayout>
<Text>{quote}</Text>
<Text>— {author}</Text>
</AutoLayout>
<SVG />
</AutoLayout>
);
}
widget.register(QuotesWidget);Ce code est très déroutant, c'est le moins qu'on puisse dire. À l'heure actuelle, nous ne pouvons pas distinguer les couches de conception. Heureusement, nous sommes en mesure de résoudre facilement ce problème grâce à l'utilisation de name propriété.
<AutoLayout name={"Quote"}>
<SVG name={"LeftQuotationMark"} />
<AutoLayout name={"QuoteContent"}>
<Text name={"QuoteText"}>{quote}</Text>
<Text name={"QuoteAuthor"}>— {author}</Text>
</AutoLayout>
<SVG name={"RightQuotationMark"} />
</AutoLayout>;Et, bien sûr, nous ne pouvons toujours pas voir nos SVG entre guillemets, alors travaillons à résoudre ce problème. La <SVG/> composant accepter un srcpropriété qui prend le code source d'un élément SVG. Il n'y a pas grand-chose à dire sur celui-ci, alors restons simples et revenons directement au code :
const leftQuotationSvgSrc = `<svg width="117" height="103" viewBox="0 0 117 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
// shortened for brevity
</svg>`;
const rightQuotationSvgSrc = `<svg width="118" height="103" viewBox="0 0 118 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
// shortened for brevity
</svg>`;
function QuotesWidget() {
return (
<SVG name={"LeftQuotationMark"} src={leftQuotationSvgSrc} />
<SVG name={"RightQuotationMark"} src={rightQuotationSvgSrc} />
);
}Je pense que nous pouvons tous convenir que tout est beaucoup plus clair maintenant ! Lorsque nous nommons les choses, leur but devient soudainement beaucoup plus évident pour les lecteurs de notre code.
Aperçu de notre widget en temps réel
Figma offre une excellente expérience de développeur lors de la création de widgets, y compris (mais sans s'y limiter) rechargement à chaud. Grâce à cette fonctionnalité, nous sommes en mesure de coder et de prévisualiser les modifications apportées à notre widget en temps réel.
Commencez par ouvrir le menu des widgets (Shift+I), en passant à l'onglet de développement et en cliquant ou en faisant glisser votre nouveau widget sur le tableau. Impossible de localiser votre widget ? Ne vous inquiétez pas, cliquez simplement sur le menu à trois points et importez votre widget manifest.json dossier. Oui, c'est tout ce qu'il faut pour le ramener à l'existence !
Attendez, avez-vous reçu un message d'erreur en bas de votre écran ?
Si oui, enquêtons. Cliquer sur "Ouvrir la console” et lisez ce qu'il a à dire. Si la Ouvrir la console a disparu, il existe un autre moyen d'ouvrir la console de débogage. Cliquez sur le logo Figma, passez à la catégorie widgets et affichez le menu de développement.
Cette erreur est probablement due au fait que nous n'avons pas encore compilé notre TypeScript en JavaScript. Nous pouvons le faire dans la ligne de commande en exécutant npm install ainsi que npm run watch. (ou alors yarn ainsi que yarn watch ). Pas d'erreur cette fois !
Un autre obstacle que vous pourriez rencontrer est que le widget ne parvient pas à se restituer chaque fois que le code est modifié. Nous pouvons facilement forcer notre widget à se mettre à jour en utilisant la commande de menu contextuel suivante : Widgets → Widget de nouveau rendu.
Styliser le widget
Dans son état actuel, le regards de nos widgets sont encore assez loin de notre objectif final.
Alors, comment stylisons-nous les composants Figma à partir du code ? Peut-être avec CSS comme on le ferait dans un projet React ? Négatif. Avec les widgets Figma, TOUTE le style passe par un ensemble de accessoires bien documentés. Heureusement pour nous, ces articles sont nommés presque à l'identique à leurs homologues de Figma.
Nous allons commencer par configurer nos deux <AutoLayout /> Composants. Comme vous pouvez le voir dans l'infographie ci-dessus, les noms d'accessoires sont assez descriptifs de leur objectif. Cela nous permet de sauter directement dans le code et de commencer à apporter des modifications. Je ne montrerai plus l'intégralité du code, veuillez donc vous fier aux noms des composants pour vous guider à l'endroit où appartiennent les extraits.
<AutoLayout
name={"Quote"}
direction={"horizontal"}
verticalAlignItems={"start"}
horizontalAlignItems={"center"}
spacing={54}
padding={{
horizontal: 61,
vertical: 47,
}}
>
<AutoLayout
name={"QuoteContent"}
direction={"vertical"}
verticalAlignItems={"end"}
horizontalAlignItems={"start"}
spacing={10}
padding={{
horizontal: 0,
vertical: 0,
}}
></AutoLayout>
</AutoLayout>;Nous venons de faire beaucoup de progrès ! Sauvons et revenons à Figma pour voir à quoi ressemble notre widget. Rappelez-vous comment Figma recharge automatiquement les widgets lors de nouvelles modifications ?
Mais ce n'est pas encore tout à fait ça. Il faut aussi ajouter une couleur de fond au composant racine :
<AutoLayout name={"Quote"} fill={"#ffffff"}>Encore une fois, jetez un coup d'œil à votre tableau Figma et remarquez comment les modifications peuvent être répercutées presque immédiatement dans le widget.
Avançons le long de ce guide et stylisons le <Text> composants.
Après avoir jeté un coup d'œil à la Documentation de l'API des widgets, il est à nouveau clair que les noms de propriété sont presque identiques à leurs homologues dans l'application Figma, comme on peut le voir dans l'infographie ci-dessus. Nous utiliserons également les valeurs de la dernière section où nous avons inspecté le site Web de Chris.
<Text name={'QuoteText'}
fontFamily={'Lora'}
fontSize={36}
width={700}
fill={'#545454'}
fontWeight={'normal'}
>{quote}</Text>
<Text name={'QuoteAuthor'}
fontFamily={'Raleway'}
fontSize={26}
width={700}
fill={'#16B6DF'}
fontWeight={'bold'}
textCase={'upper'}
>— {author}</Text>Ajouter un état au widget
Notre widget affiche actuellement la même citation, mais nous voulons tirer de l'ensemble des citations au hasard. Nous devons ajouter Etat à notre widget, dont tous les développeurs React savent qu'il s'agit d'une variable dont le changement déclenche le nouveau rendu de notre composant.
Avec Figma, l'état est créé avec le useSyncedState accrocher; c'est à peu près Réagir useState, mais les programmeurs doivent spécifier une clé unique. Cette exigence découle du fait que Figma doit synchroniser l'état de notre widget à travers TOUTE clients qui peuvent afficher le même tableau de conception, mais via des ordinateurs différents.
const { useSyncedState } = widget;
function QuotesWidget() {
const [quote, setQuote] = useSyncedState("quote-text", "");
const [author, setAuthor] = useSyncedState("quote-author", "");
}C'est tout le changement dont nous avons besoin pour l'instant. Dans la section suivante, nous verrons comment récupérer des données sur Internet. Spoiler Alert : ce n'est pas aussi simple qu'il n'y paraît.
Récupération des données du réseau
Rappelez-vous quand Figma nous a donné le choix de commencer avec un widget compatible iFrame. Bien que nous n'ayons pas opté pour cette option, nous devons encore implémenter certaines de ses fonctionnalités. Laissez-moi vous expliquer pourquoi nous ne pouvons pas simplement appeler fetch() dans notre code de widget.
Lorsque vous utilisez un widget, vous exécutez sur votre propre ordinateur du code JavaScript écrit par quelqu'un d'autre. Bien que tous les widgets soient soigneusement examinés par le personnel de Figma, il s'agit toujours d'une énorme faille de sécurité, car nous savons tous à quel point des dommages peuvent être créés par une seule ligne de JavaScript.
En conséquence, Figma ne peut pas simplement eval() tout code de widget écrit par des programmeurs anonymes. Pour faire court, l'équipe a décidé que la meilleure solution consistait à exécuter du code tiers dans un environnement sandbox étroitement surveillé. Et comme vous l'avez peut-être deviné, les API de navigateur ne sont pas disponibles dans un tel environnement.
Mais ne vous inquiétez pas, la solution de Figma à ce deuxième problème est <iframe>s. Tout code HTML que nous écrivons dans un fichier, de préférence appelé ui.html, aura accès à toutes les API du navigateur. Vous vous demandez peut-être comment nous pouvons déclencher ce code à partir du widget, mais nous y reviendrons plus tard. Revenons maintenant au code :
// manifest.json
{
"ui": "ui.html"
}<!-- ui.html -->
<script>
window.onmessage = async (event) => {
if (event.data.pluginMessage.type === 'networkRequest') {
// TODO: fetch data from the server
window.parent.postMessage({
pluginMessage: {
// TODO: return fetched data
}
}, '*')
}
}
</script>C'est le modèle général pour widget-to-iframe la communication. Utilisons-le pour récupérer les données du serveur :
<!-- ui.html -->
<script>
window.onmessage = async (event) => {
if (event.data.pluginMessage.type === 'networkRequest') {
// Get random number from 0 to 100
const randomPage = Math.round(Math.random() * 100)
// Get a random quote from the Design Quotes API
const res = await fetch(`https://quotesondesign.com/wp-json/wp/v2/posts/?orderby=rand&per_page=1&page=${randomPage}&_fields=title,yoast_head_json`)
const data = await res.json()
// Extract author name and quote content from response
const authorName = data[0].title.rendered
const quoteContent = data[0].yoast_head_json.og_description
window.parent.postMessage({
pluginMessage: {
authorName,
quoteContent
}
}, '*')
}
}
</script>Nous laissons de côté la gestion des erreurs pour que cela reste simple et précis. Revenons au code du widget et voyons comment nous accédons aux fonctions définies dans le <iframe>:
function fetchData() {
return new Promise<void>(resolve => {
figma.showUI(__html__, {visible: false})
figma.ui.postMessage({type: 'networkRequest'})
figma.ui.onmessage = async ({authorName, quoteContent}) => {
setAuthor(authorName)
setQuote(quoteContent)
resolve()
}
})
}Comme vous pouvez le voir, nous disons d'abord à Figma d'exposer l'accès à notre caché <iframe> et de déclencher un événement avec le nom "networkRequest". Nous gérons cet événement dans le ui.html fichier en vérifiant event.data.pluginMessage.type === 'networkRequest', puis en publiant les données dans le widget.
Mais rien ne se passe encore… Nous n'avons toujours pas appelé le fetchData() fonction. Si nous l'appelons directement dans la fonction du composant, l'erreur suivante se produit dans la console :
Cannot use showUI during widget rendering.Figma nous dit de ne pas appeler showUI directement dans le corps de la fonction… Alors, où faut-il le mettre ? La réponse à cela est un nouveau crochet et une nouvelle fonction : useEffect ainsi que waitForTask. Vous connaissez peut-être déjà useEffect si vous êtes un développeur React, mais nous allons l'utiliser ici pour récupérer les données du serveur lors du montage du composant widget.
const { useEffect, waitForTask } = widget;
function QuotesWidget() {
useEffect(() => {
waitForTask(fetchData());
});
}Mais cela se traduira par une autre "erreur" où notre widget continuera à se restituer avec une nouvelle citation, pour toujours. Cela arrive parce que useEffect, par définition, se déclenche à nouveau chaque fois que l'état du widget change, voire lorsque nous appelons fetchData. Et tandis que il y a une technique appeler seulement useEffect une fois dans React, cela ne fonctionne pas sur l'implémentation de Figma. De la documentation de Figma :
En raison du fonctionnement des widgets,
useEffectdevrait gérer le fait d'être appelé plusieurs fois avec le même état.
Heureusement, il existe une solution de contournement simple dont nous pouvons tirer parti et appeler useEffect une seule fois lors du premier montage du composant, et c'est en vérifiant si les valeurs de l'état sont toujours vides :
function QuotesWidget() {
useEffect(() => {
if (!author.length & !quote.length) {
waitForTask(fetchData());
}
});
}Vous pourriez rencontrer un effrayant "accès à la mémoire hors limites » Erreur. C'est assez courant à voir dans le développement de plugins et de widgets. Redémarrez simplement Figma et il ne sera plus là.
Vous avez peut-être remarqué que parfois, le texte de la citation contient des caractères étranges.
Ceux-ci sont Caractères Unicode et il faut bien les formater en code :
<!-- ui.html -->
<script>
window.onmessage = async (event) => {
// ...
const quoteContent = decodeEntities(data[0].yoast_head_json.og_description);
};
// <https://stackoverflow.com/a/9609450>
var decodeEntities = (function () {
// this prevents any overhead from creating the object each time
var element = document.createElement("div");
function decodeHTMLEntities(str) {
if (str && typeof str === "string") {
// strip script/html tags
str = str.replace(/<script[^>]*>([Ss]*?)</script>/gim, "");
str = str.replace(/</?w(?:[^"'>]|"[^"]*"|'[^']*')*>/gim, "");
element.innerHTML = str;
str = element.textContent;
element.textContent = "";
}
return str;
}
return decodeHTMLEntities;
})();
</script>Et voilà, notre widget récupère un tout nouveau devis de conception à chaque fois qu'il est ajouté au tableau de conception.
Ajout d'un menu de propriétés à notre widget
Bien que notre widget récupère une nouvelle citation lors de l'instanciation, il serait beaucoup plus pratique de pouvoir refaire ce processus mais sans le supprimer. Cette section sera courte car la solution est assez remarquable. Avec menus de propriétés, nous pouvons ajouter de l'interactivité à notre widget avec un seul appel au usePropertyMenu crochet.
const { usePropertyMenu } = widget;
function QuotesWidget() {
usePropertyMenu(
[
{
itemType: "action",
propertyName: "generate",
tooltip: "Generate",
icon: `<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<!-- Shortened for brevity -->
</svg>`,
},
],
() => fetchData()
);
}Avec un crochet simple, nous pouvons créer un bouton qui apparaît près de notre widget lorsqu'il est sélectionné. C'était la dernière pièce que nous devions ajouter pour mener à bien ce projet.
Publier notre widget au public
Il n'est pas très utile de créer un widget si, eh bien, personne Usages ce. Et tandis que Figma accorde aux organisations la possibilité de lancer Privé widgets pour un usage interne, il est beaucoup plus courant de diffuser ces petits programmes dans le monde.
Figma a un processus délicat de révision des widgets qui peut prendre jusqu'à 5 à 10 jours ouvrables. Et tandis que le widget de citations de conception que nous avons construit ensemble est déjà dans la bibliothèque de widgets, je vais encore démontrer comment il en est arrivé là. Veuillez ne pas essayer de republier ce widget car cela n'entraînera que sa suppression. Mais si vous lui avez apporté des modifications importantes, n'hésitez pas à partager votre propre widget avec la communauté !
Commencez en cliquant sur le menu des widgets (Shift+I) et en passant au Développement onglet pour afficher notre widget. Cliquez sur le menu à trois points et appuyez sur Publier.
Figma vous demandera d'entrer quelques détails sur votre widget, comme un titre, une description et quelques balises. Nous aurons également besoin d'une image d'icône 128 × 128 et d'une image de bannière 1920 × 960.
Après avoir importé tous ces actifs, nous avons encore besoin d'une capture d'écran de notre widget. Fermez le modal de publication (ne vous inquiétez pas, vous ne perdrez pas vos données) et faites un clic droit sur le widget pour faire apparaître un menu contextuel intéressant. Trouvez le Copier/Coller commecatégorie et sélectionnez Copier au format PNG.
Cela fait, revenons au modal de publication et collons la capture d'écran du widget :
Faites défiler vers le bas et publiez enfin votre modal. Célébrer! 🎉
Figma vous contactera dans quelques jours pour vous informer de l'état de l'examen de votre modal. En cas de refus, vous recevrez le possibilité d'apporter des modifications et de soumettre à nouveau.
Conclusion
Nous venons de créer un widget Figma à partir de rien ! Il y a beaucoup de choses qui ne sont pas couvertes ici, comme cliquez sur les événements, formulaires de saisieet beaucoup plus. Vous pouvez creuser dans le code source complet du widget dans ce dépôt GitHub.
À ceux qui aspirent à porter leurs compétences Figma à des niveaux supérieurs, je suggère d'explorer la communauté Widgets et d'utiliser ce qui attire votre attention comme source d'inspiration. Continuez à créer plus de widgets, continuez à affiner vos compétences en réaction, et avant même que vous ne vous en rendiez compte, vous m'apprendrez à faire tout cela.
Ressources supplémentaires
J'ai dû me référer à beaucoup de documentation pendant que je faisais ce widget. J'ai pensé partager ce que j'ai trouvé pour aider le plus.
