Figma heeft samenwerking tussen ontwikkelaars en ontwerpers altijd aangemoedigd. Het streeft naar een eindeloze schat aan door de gemeenschap gemaakte plug-ins. 3D elementen nodig? Daar is een plug-in voor. Abstracte SVG's nodig? Daar is een plug-in voorOok.
Dat gezegd hebbende, het ontwerpgedeelte van Figma is altijd relatief statisch geweest - altijd werkend met niet-verplaatsbare rechthoeken die met elkaar zijn verbonden via vooraf gedefinieerde gebruikersinteracties. Maar wat als ik je zou vertellen dat je ontwerpen plotseling tot leven kunnen komen - dat ze geanimeerd, interactief en zelfs stateful kunnen zijn? Wat zou dan het concept scheiden van de implementatie?
Figma aangekondigd in juni dat het JavaScript-aangedreven widgets naar de tafel brengt. Nu kunnen ontwerpers door logica gestuurde componenten bladeren en deze rechtstreeks in Figma implementeren!
Zeg hallo tegen de Widgets-API! Wil je weten wat het is en hoe je het moet gebruiken? Dat is precies wat we in deze post samen gaan doen.
Figma-widgets bieden talloze mogelijkheden
Stel je voor dat je de klok rond werkt met je partner om een grote restaurantapplicatie te ontwerpen. Jullie werken allebei al samen op hetzelfde Figma-bord; jullie delen allebei exact hetzelfde document met veranderingen die on-the-fly plaatsvinden.
Je weet toch al dat samenwerking meer inhoudt dan alleen het ontwerpproces:
- project management,
- peilingen houden om stemmen te verzamelen,
- het importeren en visualiseren van nepgegevens,
- en misschien zelfs een multiplayer-game spelen om af te koelen na vele uren werk.
We hebben slechts één persoon nodig om alles te beheren en links naar andere leden van de groep te verzenden. Maar oh, dat is niet erg efficiënt, toch?
Welnu, dat is waar widgets in het spel komen. Het is denkbaar dat we dat allemaal - ja, alles - kunnen doen zonder Figma ooit te verlaten.
Hier zijn slechts enkele manieren waarop u widgets in Figma wilt gebruiken:
De lijst gaat wij en wij. Zoals u kunt zien, is er al een overvloed aan widgets die u vrijelijk in uw documenten kunt gebruiken. In feite kun je Widgets rechtstreeks aan je bord toevoegen vanuit het Widgets-menu (Shift+I).
Maar we zijn hier niet om widgets te leren gebruiken, want dat is eenvoudig. Laten we doen waar we goed in zijn: we gaan onze eigen Figma-widget maken! Deze zal worden geïnspireerd door De website met ontwerpcitaten van Chris Coyier. We nemen de API, voeren deze in de widget en tonen vervolgens willekeurige ontwerpcitaten rechtstreeks in Figma.
Dit is wat we nodig hebben
Ik hou er niet van om de brenger van slecht nieuws te zijn, maar om widgets te ontwikkelen, moet je op Windows of Mac zijn. Linux-gebruikers, het spijt me, maar jullie hebben pech. (Je zou nog steeds kunnen) gebruik een VM als je wilt volgen.)
We gaan download de Figma Desktop sollicitatie. De eenvoudigste manier om aan de slag te gaan, is door een widgetsjabloon rechtstreeks vanuit de app te genereren.
Laten we een nieuw bord maken door het widgets-menu te openen (Shift+ I), overschakelen naar de Ontwikkeling tabblad en maak een nieuw item aan.
Hierna zal Figma u vragen om de nieuwe widget een naam te geven en te beslissen of deze meer is afgestemd op: designborden of FigJam-borden te. De eerste optie is voldoende voor de doeleinden van dit artikel.
En het maatwerk houdt hier niet op; Figma geeft je ook de mogelijkheid om te beginnen met een vooraf gemaakte teller-widget of een iFrame-enabled alternatief dat je ook toegang geeft tot de Canvas- en Fetch-API's (evenals alle andere browser-API's). We gaan voor de eenvoudige optie "Leeg", maar we zullen deze uiteindelijk zelf aanpassen om gebruik te maken van de Fetch API.
U wordt dan gevraagd om uw nieuwe widgetproject op te slaan in een speciale map in uw systeem. Zodra dat is gebeurd, start u uw terminal en leidt u deze naar die map. Voer nog geen opdrachten uit - we doen dat later en krijgen opzettelijk een foutmelding met als doel meer te leren over de Widgets-API.
De widget ontwerpen
We trekken het ontwerp rechtstreeks uit De website met ontwerpcitaten van Chris Coyier. Dus laten we daarheen gaan en erin duiken door DevTools op te starten.
De twee sneltoetsen die ik hier gebruik zijn: Ctrl+Shift+C (of Cmd+Shift+C) om het gereedschap "Kies element" te wisselen, en Shift+Click om het kleurformaat te wijzigen in HEX-code. We doen dit om meer te weten te komen over de kleuren, lettertypen, lettergewichten en lettergroottes die op de website van Chris worden gebruikt. Al deze informatie is van cruciaal belang om een sterk gelijkende widget in Figma te bouwen, wat onze volgende stap zal zijn! Jij kan pak het ontworpen onderdeel en gebruik het in je eigen canvas.
Ik zal hier niet veel in detail treden, aangezien het hoofdonderwerp van dit artikel het bouwen van widgets is door code te schrijven. Maar ik kan niet genoeg benadrukken hoe belangrijk het is om goed voor je te zorgen stijl van widgets… CSS-Tricks heeft al een overvloed aan ontwerpgerichte Figma-zelfstudies; u zult er geen spijt van krijgen ze aan uw leeslijst toe te voegen.
De lay-out voor onze widget maken
Nu het ontwerp uit de weg is, is het tijd om onze programmeervingers te gebruiken en te beginnen met het bouwen van de tandwielen van onze widget.
Het is heel interessant hoe Figma zijn ontwerpbouwstenen vertaalt naar React-achtige componenten. Frame-elementen met de functie voor automatische opmaak worden bijvoorbeeld weergegeven als de <AutoLayout /> onderdeel in code. Daarnaast gebruiken we nog twee componenten: <Text /> en <SVG />.
Neem een kijkje op mijn Figma bord… Ik vraag je precies om je te concentreren op de objectboom. Het is wat we nodig hebben om ons widgetontwerp naar JSX-code te kunnen vertalen.
Zoals u kunt zien, vereist onze widget voor ontwerpcitaten dat drie componenten moeten worden geïmporteerd. Dat is een behoorlijk aantal componenten, aangezien de volledige API bevat slechts acht op lagen gebaseerde knooppunten. Maar zoals je snel zult zien, zijn deze modules meer dan voldoende om allerlei lay-outs te maken.
// code.tsx
const { widget } = figma;
const { AutoLayout, Text, SVG } = widget;En hiermee hebben we alles wat we nodig hebben om door te gaan en het skelet van onze widget te bouwen zoals we zouden doen in React:
function QuotesWidget() {
const quote = `...`;
const author = `...`;
return (
<AutoLayout>
<SVG />
<AutoLayout>
<Text>{quote}</Text>
<Text>— {author}</Text>
</AutoLayout>
<SVG />
</AutoLayout>
);
}
widget.register(QuotesWidget);Deze code is op zijn zachtst gezegd erg verwarrend. Op dit moment kunnen we de ontwerplagen niet uit elkaar houden. Gelukkig kunnen we dit probleem eenvoudig oplossen door gebruik te maken van de name eigendom.
<AutoLayout name={"Quote"}>
<SVG name={"LeftQuotationMark"} />
<AutoLayout name={"QuoteContent"}>
<Text name={"QuoteText"}>{quote}</Text>
<Text name={"QuoteAuthor"}>— {author}</Text>
</AutoLayout>
<SVG name={"RightQuotationMark"} />
</AutoLayout>;En natuurlijk kunnen we onze aanhalingstekens-SVG's nog steeds niet zien, dus laten we eraan werken om dat op te lossen. De <SVG/> component accepteren a srceigenschap die de broncode voor een SVG-element nodig heeft. Hier valt niet veel over te zeggen, dus laten we het simpel houden en meteen teruggaan naar de 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} />
);
}Ik denk dat we het er allemaal over eens zijn dat alles nu veel duidelijker is! Als we dingen een naam geven, wordt hun doel plotseling veel duidelijker voor de lezers van onze code.
Onze widget in realtime bekijken
Figma biedt een geweldige ontwikkelaarservaring bij het bouwen van widgets, inclusief (maar niet beperkt tot) hot-herladen. Met deze functie kunnen we wijzigingen in onze widget in realtime coderen en bekijken.
Ga aan de slag door het widgetmenu te openen (Shift+I), overschakelen naar het tabblad Ontwikkeling en klikken of slepen van uw nieuwe widget naar het bord. Kunt u uw widget niet vinden? Maak je geen zorgen, klik gewoon op het menu met drie stippen en importeer die van je widget manifest.json het dossier. Ja, dat is alles wat nodig is om het weer tot leven te brengen!
Wacht, kreeg je een foutmelding onderaan je scherm?
Als dat zo is, laten we het dan onderzoeken. Klik op "console openen” en lees wat het te zeggen heeft. Als de console openen knop is verdwenen, is er een alternatieve manier om de foutopsporingsconsole te openen. Klik op het Figma-logo, spring naar de categorie widgets en open het ontwikkelingsmenu.
Die fout is waarschijnlijk te wijten aan het feit dat we onze TypeScript nog niet naar JavaScript hebben gecompileerd. We kunnen dat doen in de opdrachtregel door te rennen npm install en npm run watch. (of yarn en yarn watch ). Geen fouten deze keer!
Nog een obstakel dat u kunt tegenkomen, is dat de widget niet opnieuw wordt weergegeven wanneer de code wordt gewijzigd. We kunnen onze widget gemakkelijk dwingen om bij te werken met behulp van de volgende contextmenuopdracht: widgets → Widget opnieuw weergeven.
De widget stylen
Zoals het er nu uitziet, er gezonder uitzien van onze widgets zijn nog vrij ver verwijderd van ons uiteindelijke doel.
Dus hoe stylen we Figma-componenten uit code? Misschien met CSS zoals we zouden doen in een React-project? Negatief. Met Figma-widgets, allen de styling gebeurt door middel van een set van goed gedocumenteerde rekwisieten. Gelukkig voor ons worden deze items bijna genoemd identiek aan hun tegenhangers in Figma.
We beginnen met het configureren van onze twee <AutoLayout /> componenten. Zoals je in de bovenstaande infographic kunt zien, zijn propnamen behoorlijk beschrijvend voor hun doel. Dit maakt het voor ons gemakkelijk om direct in de code te springen en enkele wijzigingen aan te brengen. Ik zal niet de hele code opnieuw laten zien, dus vertrouw op de namen van de componenten om u te helpen waar de fragmenten thuishoren.
<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>;We hebben zojuist veel vooruitgang geboekt! Laten we opslaan en teruggaan naar Figma om te zien hoe onze widget eruit ziet. Weet je nog hoe Figma widgets automatisch herlaadt bij nieuwe wijzigingen?
Maar het is er nog niet helemaal. We moeten ook een achtergrondkleur toevoegen aan de hoofdcomponent:
<AutoLayout name={"Quote"} fill={"#ffffff"}>Nogmaals, kijk eens naar je Figma-bord en merk op hoe veranderingen bijna onmiddellijk terug in de widget kunnen worden weergegeven.
Laten we verder gaan met deze gids en de stijl van de <Text> componenten.
Na het bekijken van het Widgets API-documentatie, is het opnieuw duidelijk dat eigendomsnamen bijna identiek zijn aan hun tegenhangers in de Figma-app, zoals te zien is in de bovenstaande infographic. We zullen ook waarden gebruiken uit het laatste gedeelte waar we de website van Chris hebben geïnspecteerd.
<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>Status toevoegen aan de widget
Onze widget geeft momenteel hetzelfde citaat weer, maar we willen willekeurig uit de hele verzameling aanhalingstekens halen. We moeten toevoegen staat naar onze widget, waarvan alle React-ontwikkelaars weten dat het een variabele is waarvan de wijziging het opnieuw weergeven van onze component activeert.
Met Figma wordt een toestand gecreëerd met de useSyncedState haak; het is vrij veel Reageer useState, maar het vereist dat programmeurs een unieke sleutel specificeren. Deze vereiste komt voort uit het feit dat Figma de status van onze widget moet synchroniseren allen clients die mogelijk hetzelfde ontwerpbord bekijken, maar via verschillende computers.
const { useSyncedState } = widget;
function QuotesWidget() {
const [quote, setQuote] = useSyncedState("quote-text", "");
const [author, setAuthor] = useSyncedState("quote-author", "");
}Dat is alle verandering die we nu nodig hebben. In het volgende gedeelte zullen we uitzoeken hoe u gegevens van internet kunt ophalen. Spoiler Alert: het is niet zo eenvoudig als het lijkt.
Gegevens ophalen van het netwerk
Weet je nog toen Figma ons de keuze gaf om te beginnen met een iFrame-enabled widget. Hoewel we niet voor die optie hebben gekozen, moeten we nog enkele van zijn functies implementeren. Laat me uitleggen waarom we niet gewoon kunnen bellen fetch() binnen onze widgetcode.
Wanneer u een widget gebruikt, voert u JavaScript-code uit op uw eigen computer die door iemand anders is geschreven. Hoewel alle widgets grondig worden beoordeeld door het personeel van Figma, is het nog steeds een enorm beveiligingslek, omdat we allemaal weten hoeveel schade kan worden veroorzaakt door zelfs maar één regel JavaScript.
Als gevolg hiervan kan Figma niet zomaar eval() elke widgetcode geschreven door anonieme programmeurs. Om een lang verhaal kort te maken, het team besloot dat de beste oplossing was om code van derden uit te voeren in een streng bewaakte sandbox-omgeving. En zoals je misschien al geraden hebt, zijn browser-API's niet beschikbaar in een dergelijke omgeving.
Maar maak je geen zorgen, Figma's oplossing voor dit tweede probleem is: <iframe>s. Elke HTML-code die we in een bestand schrijven, bij voorkeur met de naam ui.html, heeft toegang tot alle browser-API's. Je vraagt je misschien af hoe we deze code kunnen activeren vanuit de widget, maar daar zullen we later naar kijken. Laten we nu teruggaan naar de 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>Dat is de algemene sjabloon voor widget-naar-iframe communicatie. Laten we het gebruiken om gegevens van de server op te halen:
<!-- 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>We laten foutafhandeling achterwege om het simpel en to-the-point te houden. Laten we teruggaan naar de widgetcode en kijken hoe we toegang krijgen tot functies die zijn gedefinieerd in de <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()
}
})
}Zoals je kunt zien, vertellen we Figma eerst om de toegang tot onze verborgen <iframe> en om een gebeurtenis met de naam te activeren "networkRequest". We behandelen dit evenement in de ui.html bestand door te controleren event.data.pluginMessage.type === 'networkRequest', en vervolgens gegevens terug naar de widget te posten.
Maar er gebeurt nog niets... We hebben nog steeds niet gebeld met de fetchData() functie. Als we het rechtstreeks in de componentfunctie aanroepen, treedt de volgende fout op in de console:
Cannot use showUI during widget rendering.Figma zegt dat we niet moeten bellen showUI direct in de functie body... Dus, waar moeten we het plaatsen? Het antwoord daarop is een nieuwe haak en een nieuwe functie: useEffect en waitForTask. Misschien ben je al bekend met useEffect als je een React-ontwikkelaar bent, maar we gaan het hier gebruiken om gegevens van de server op te halen wanneer de widgetcomponent wordt geactiveerd.
const { useEffect, waitForTask } = widget;
function QuotesWidget() {
useEffect(() => {
waitForTask(fetchData());
});
}Maar dit zal resulteren in nog een andere "fout" waarbij onze widget voor altijd opnieuw zal worden weergegeven met een nieuw citaat. Dit gebeurt omdat useEffect, wordt per definitie opnieuw geactiveerd wanneer de status van de widget verandert, zelfs niet wanneer we bellen fetchData. En terwijl er is een techniek alleen bellen useEffect eenmaal in React werkt het niet op de implementatie van Figma. Uit de documenten van Figma:
Vanwege de manier waarop widgets worden uitgevoerd,
useEffectmoet omgaan met meerdere keren aanroepen met dezelfde status.
Gelukkig is er een eenvoudige oplossing waar we gebruik van kunnen maken en kunnen bellen useEffect slechts één keer wanneer de component voor het eerst wordt geactiveerd, en dit is door te controleren of de waarden van de status nog steeds leeg zijn:
function QuotesWidget() {
useEffect(() => {
if (!author.length & !quote.length) {
waitForTask(fetchData());
}
});
}Je kunt een enge “geheugentoegang buiten de grenzen” fout. Zijn vrij gebruikelijk om te zien in de ontwikkeling van plug-ins en widgets. Start Figma gewoon opnieuw op en het zal er niet meer zijn.
Het is je misschien opgevallen dat de aanhalingstekens soms rare tekens bevatten.
Dit zijn Unicode-tekens en we moeten ze correct opmaken in 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>En voilà, haalde onze widget elke keer dat deze aan het ontwerpbord werd toegevoegd een gloednieuwe ontwerpcitaat op.
Een eigenschappenmenu toevoegen aan onze widget
Hoewel onze widget een nieuw citaat ophaalt bij het maken van een instantie, zou het veel praktischer zijn als we dit proces opnieuw zouden kunnen doen, maar zonder het te verwijderen. Dit gedeelte zal kort zijn omdat de oplossing nogal opmerkelijk is. Met eigenschappenmenu's, kunnen we interactiviteit aan onze widget toevoegen met een enkele oproep naar de usePropertyMenu haak.
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()
);
}Met één simpele haak kunnen we een knop maken die in de buurt van onze widget verschijnt wanneer deze is geselecteerd. Dat was het laatste stuk dat we moesten toevoegen om dit project te voltooien.
Onze widget publiceren voor het publiek
Het heeft niet veel zin om een widget te bouwen als, nou ja, niemand toepassingen het. En terwijl Figma geeft organisaties de mogelijkheid om te starten privaat widgets voor intern gebruik is het veel gebruikelijker om deze kleine programma's aan de wereld vrij te geven.
Figma heeft een delicaat beoordelingsproces voor widgets dat 5 tot 10 werkdagen kan duren. En hoewel de widget voor ontwerpcitaten die we samen hebben gebouwd, is al in de widgetbibliotheek, Ik zal nog demonstreren hoe het daar is gekomen. Probeer deze widget niet opnieuw te publiceren, want dat leidt alleen maar tot verwijdering. Maar als je het een aantal belangrijke wijzigingen hebt aangebracht, ga je gang en deel je eigen widget met de community!
Ga aan de slag door op het widgetmenu te klikken (Shift+I) en overschakelen naar de Ontwikkeling tabblad om onze widget te bekijken. Klik op het menu met drie stippen en druk op Publiceer.
Figma zal u vragen om enkele details over uw widget in te voeren, zoals een titel, beschrijving en enkele tags. We hebben ook een pictogramafbeelding van 128 × 128 en een bannerafbeelding van 1920 × 960 nodig.
Na het importeren van al deze assets hebben we nog steeds een screenshot van onze widget nodig. Sluit de publicatiemodule (maak u geen zorgen, u verliest uw gegevens niet) en klik met de rechtermuisknop op de widget om een interessant contextmenu weer te geven. Vind de Kopieer/plak alscategorie en selecteer Kopieer als PNG.
Als dat klaar is, gaan we terug naar de publicatiemodaliteit en plakken we de schermafbeelding van de widget:
Scroll naar beneden en publiceer tenslotte je modal. Vieren!
Figma neemt binnen een paar dagen contact met u op over de status van de beoordeling van uw modaal. In het geval van een afwijzing, krijgt u de mogelijkheid om wijzigingen aan te brengen en opnieuw in te dienen.
Conclusie
We hebben zojuist een Figma-widget helemaal opnieuw gebouwd! Er zijn veel dingen die hier niet worden behandeld, zoals: klik op evenementen, invoerformulieren en meer. Je kunt in de volledige broncode voor de widget graven in deze GitHub-opslagplaats.
Voor degenen die ernaar streven hun Figma-vaardigheden naar een hoger niveau te tillen, raad ik aan de Widgets-gemeenschap te verkennen en te gebruiken wat je opvalt als inspiratie. Blijf meer widgets bouwen, blijf je React-vaardigheden aanscherpen, en voordat je het zelfs maar door hebt, leer je me hoe ik dit allemaal moet doen.
Verdere middelen
Ik moest veel documentatie raadplegen terwijl ik deze widget aan het maken was. Ik dacht dat ik zou delen wat ik vond om het meest te helpen.
