Figma har alltid uppmuntrat samarbete mellan utvecklare och designers. Den strävar efter en oändlig skattkammare av communitygjorda plugins. Behöver du 3D-element? Det finns ett plugin för det. Behöver du abstrakta SVG? Det finns ett plugin för detOckså.
Som sagt, designdelen av Figma har alltid varit relativt statisk - alltid arbetat med orörliga rektanglar kopplade till varandra genom fördefinierade användarinteraktioner. Men tänk om jag sa till dig att dina mönster plötsligt kunde komma till liv - att de kunde vara animerade, interaktiva och till och med statistiska? Vad skulle då skilja koncept från implementering?
figma meddelade i juni att det tar med JavaScript-drivna widgets till bordet. Nu kan designers bläddra och implementera logikdrivna komponenter direkt i Figma!
Säg hej till Widgets API! Vill du veta vad det är och hur man använder det? Det är precis vad vi ska göra tillsammans i det här inlägget.
Figma-widgets öppnar upp massor av möjligheter
Föreställ dig att du arbetar dygnet runt med din partner för att designa en stor restaurangapplikation. Ni samarbetar redan båda på samma Figma-kort; båda delar exakt samma dokument med ändringar som sker i farten.
Du vet säkert redan att samarbete involverar mer än bara designprocessen:
- projektledning,
- hålla omröstningar för att samla röster,
- importera och visualisera skendata,
- och kanske till och med spela ett multiplayer-spel för att svalka av efter många timmars arbete.
Vi kräver bara att en person hanterar allt och skickar ut länkar till andra medlemmar i gruppen. Men oj, det är väl inte särskilt effektivt?
Tja, det är där widgets kommer in i bilden. Vi kan tänkas göra allt det - ja, allt - utan att någonsin lämna Figma.
Här är bara några av sätten du kanske vill använda widgets i Figma:
Listan går vi och vi. Som du märker finns det redan en uppsjö av widgets som du fritt kan använda i dina dokument. Faktum är att du kan lägga till Widgets direkt till din tavla från Widgets-menyn (Shift+I).
Men vi är inte här för att lära oss hur man använder widgets, för det är enkelt. Låt oss göra det vi är bäst på: vi ska skapa vår egen Figma-widget! Den här kommer att inspireras av Chris Coyiers webbplats för designcitat. Vi tar API:et, matar in det i widgeten och visar sedan slumpmässiga designcitat direkt i Figma.
Här är vad vi behöver
Jag gillar inte att vara bärare av dåliga nyheter, men för att kunna utveckla widgets måste du vara på Windows eller Mac. Linux-användare, jag är ledsen, men du har ingen tur. (Du kan fortfarande använda en virtuell dator om du vill följa med.)
Vi ska ladda ner Figma Desktop Ansökan. Det enklaste sättet att komma igång är att skapa en widgetmall direkt från appen.
Låt oss skapa en ny tavla genom att öppna widgetmenyn (Shift+ I), byter till Utveckling fliken och skapa ett nytt objekt.
Efter det kommer Figma att uppmana dig att namnge den nya widgeten och bestämma om den är mer skräddarsydd för designbrädor eller FigJam-brädor för. Det förstnämnda alternativet är tillräckligt för denna artikels syften.
Och anpassningen slutar inte här; Figma kommer också att ge dig möjligheten att börja med en förgjord räknarwidget eller ett iFrame-aktiverat alternativ som också ger dig tillgång till Canvas och Fetch API:er (liksom alla andra webbläsares API:er). Vi kommer att använda det enkla alternativet "Tom", men vi kommer så småningom att modifiera det själva för att använda Fetch API.
Du kommer då att uppmanas att spara ditt nya widgetprojekt i en speciell katalog i ditt system. När det är gjort, starta din terminal och dirigera den till den mappen. Kör inga kommandon än – vi gör det senare och får målmedvetet ett fel med målet att lära dig mer om Widgets API.
Designa widgeten
Vi drar designen direkt från Chris Coyiers webbplats för designcitat. Så låt oss gå dit och dyka in genom att starta upp DevTools.
De två kortkommandon som jag använder här är Ctrl+Shift+C (eller Cmd+Shift+C) för att växla mellan verktyget "Välj element", och Shift+Click för att ändra färgformatet till HEX-kod. Vi gör detta för att lära oss mer om färgerna, typsnitten, teckensnittsvikterna och teckenstorlekarna som används på Chris hemsida. All denna information är avgörande för att bygga en widget som liknar Figma, vilket blir vårt nästa steg! Du kan ta tag i den designade komponenten och använd den i din egen duk.
Jag kommer inte att gå in på så mycket detaljer här eftersom den här artikelns huvudämne är att bygga widgets genom att skriva kod. Men jag kan inte nog betona hur viktigt det är att ta väl hand om sin widgets stil… CSS-Tricks har redan en uppsjö av designorienterade Figma-tutorials; du kommer inte ångra att du lagt till dem på din läslista.
Skapar layouten för vår widget
Med design ur vägen är det dags att ta ut våra programmeringsfingrar och börja bygga växlarna för vår widget.
Det är väldigt intressant hur Figma översätter sina designbyggstenar till React-liknande komponenter. Ramelement med funktionen för automatisk layout, till exempel, representeras som <AutoLayout /> komponent i koden. Utöver det kommer vi att använda ytterligare två komponenter: <Text /> och <SVG />.
Ta en titt på min Figma-tavla… Jag ber dig just fokusera på objektträdet. Det är vad vi behöver för att kunna översätta vår widgetdesign till JSX-kod.
Som du kan se kräver vår designcitat-widget att tre komponenter ska importeras. Det är ett anständigt antal komponenter med tanke på att fullständigt API innehåller endast åtta lagerbaserade noder. Men som du snart kommer att se är dessa moduler mer än tillräckliga för att skapa alla typer av layouter.
// code.tsx
const { widget } = figma;
const { AutoLayout, Text, SVG } = widget;Och med detta har vi allt vi behöver för att gå vidare och bygga skelettet till vår widget som vi skulle göra i React:
function QuotesWidget() {
const quote = `...`;
const author = `...`;
return (
<AutoLayout>
<SVG />
<AutoLayout>
<Text>{quote}</Text>
<Text>— {author}</Text>
</AutoLayout>
<SVG />
</AutoLayout>
);
}
widget.register(QuotesWidget);Den här koden är minst sagt väldigt förvirrande. Just nu kan vi inte skilja designskikten åt. Tack och lov kan vi enkelt lösa det här problemet genom att använda name fast egendom.
<AutoLayout name={"Quote"}>
<SVG name={"LeftQuotationMark"} />
<AutoLayout name={"QuoteContent"}>
<Text name={"QuoteText"}>{quote}</Text>
<Text name={"QuoteAuthor"}>— {author}</Text>
</AutoLayout>
<SVG name={"RightQuotationMark"} />
</AutoLayout>;Och naturligtvis kan vi fortfarande inte se våra citattecken SVG, så låt oss jobba på att fixa det. De <SVG/> komponent acceptera a srcegenskap som tar källkoden för ett SVG-element. Det finns inte mycket att säga om den här, så låt oss hålla det enkelt och gå direkt tillbaka till koden:
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} />
);
}Jag tror att vi alla kan vara överens om att allt är mycket klarare nu! När vi namnger saker blir deras syfte plötsligt mycket mer uppenbart för läsarna av vår kod.
Förhandsgranska vår widget i realtid
Figma erbjuder en fantastisk utvecklarupplevelse när du bygger widgets, inklusive (men inte begränsat till) varmladdning. Med den här funktionen kan vi koda och förhandsgranska ändringar i vår widget i realtid.
Kom igång genom att öppna widgetmenyn (Shift+I), växla till utvecklingsfliken och klicka eller dra din nya widget till tavlan. Kan du inte hitta din widget? Oroa dig inte, klicka bara på menyn med tre punkter och importera din widgets manifest.json fil. Ja, det är allt som krävs för att få det tillbaka till existens!
Vänta, fick du ett felmeddelande längst ner på skärmen?
Om så är fallet, låt oss undersöka det. Klicka på "Öppna konsolen” och läs vad den har att säga. Om Öppna konsolen knappen är borta finns det ett alternativt sätt att öppna felsökningskonsolen. Klicka på Figma-logotypen, hoppa till kategorin widgets och visa utvecklingsmenyn.
Det felet beror troligen på att vi inte har kompilerat vårt TypeScript till JavaScript ännu. Vi kan göra det på kommandoraden genom att köra npm install och npm run watch. (eller yarn och yarn watch ). Inga fel den här gången!
Ytterligare ett hinder som du kan stöta på är att widgeten inte kan renderas om varje gång koden ändras. Vi kan enkelt tvinga vår widget att uppdatera med följande snabbmenykommando: widgets → Återrendera widgeten.
Styla widgeten
Som det ser ut för närvarande är utseende av våra widgets är fortfarande ganska långt från vårt slutliga mål.
Så hur stylar vi Figma-komponenter från kod? Kanske med CSS som vi skulle göra i ett React-projekt? Negativ. Med Figma-widgets, alla stylingen sker genom en uppsättning av väldokumenterad rekvisita. Tur för oss, dessa föremål heter nästan identiskt till sina motsvarigheter i Figma.
Vi kommer igång med att konfigurera våra två <AutoLayout /> komponenter. Som du kan se i infografiken ovan är rekvisitanamn ganska beskrivande för deras syfte. Detta gör det enkelt för oss att hoppa rakt in i koden och börja göra några ändringar. Jag kommer inte att visa hela koden igen, så lita på komponentnamnen för att vägleda dig var utdragen hör hemma.
<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>;Vi har precis gjort stora framsteg! Låt oss spara och hoppa tillbaka till Figma för att se hur vår widget ser ut. Kommer du ihåg hur Figma laddar om widgets automatiskt vid nya ändringar?
Men det är inte riktigt där än. Vi måste också lägga till en bakgrundsfärg till rotkomponenten:
<AutoLayout name={"Quote"} fill={"#ffffff"}>Återigen, ta en titt på din Figma-tavla och lägg märke till hur ändringar kan återspeglas nästan omedelbart tillbaka i widgeten.
Låt oss gå längs den här guiden och styla <Text> komponenter.
Efter att ha tittat på Widgets API-dokumentation, det är återigen tydligt att egenskapsnamnen är nästan identiska med sina motsvarigheter i Figma-appen, vilket kan ses i infografiken ovan. Vi kommer också att använda värden från det sista avsnittet där vi inspekterade Chris hemsida.
<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>Lägger till tillstånd till widgeten
Vår widget visar för närvarande samma citat, men vi vill dra från hela poolen av citat på måfå. Vi måste tillägga tillstånd till vår widget, som alla React-utvecklare känner till är en variabel vars förändring utlöser omrenderingen av vår komponent.
Med Figma skapas tillstånd med useSyncedState krok; det är ganska mycket Reageras useState, men det kräver att programmerare anger en unik nyckel. Detta krav härrör från det faktum att Figma måste synkronisera vår widgets tillstånd över alla klienter som kan titta på samma designboard, men via olika datorer.
const { useSyncedState } = widget;
function QuotesWidget() {
const [quote, setQuote] = useSyncedState("quote-text", "");
const [author, setAuthor] = useSyncedState("quote-author", "");
}Det är all förändring som vi behöver just nu. I nästa avsnitt kommer vi att ta reda på hur man hämtar data från Internet. Spoiler Alert: det är inte så enkelt som det verkar.
Hämtar data från nätverket
Minns när Figma gav oss valet att börja med en iFrame-aktiverad widget. Även om vi inte valde det alternativet, måste vi fortfarande implementera några av dess funktioner. Låt mig förklara varför vi inte bara kan ringa fetch() inom vår widgetkod.
När du använder en widget kör du JavaScript-kod på din egen dator som är skriven av någon annan. Även om alla widgets granskas noggrant av Figma-personalen, är det fortfarande ett stort säkerhetshål eftersom vi alla vet hur mycket skada kan skapas av till och med en rad JavaScript.
Som ett resultat kan Figma inte helt enkelt eval() någon widgetkod skriven av anonyma programmerare. Lång historia kort, teamet beslutade att den bästa lösningen var att köra tredjepartskod i en noggrant bevakad sandlådemiljö. Och som du kanske har gissat är webbläsarens API:er inte tillgängliga i en sådan miljö.
Men oroa dig inte, Figmas lösning på detta andra problem är <iframe>s. Vilken HTML-kod som helst som vi skriver i en fil, helst kallad ui.html, kommer att ha tillgång till alla webbläsar-API:er. Du kanske undrar hur vi kan trigga den här koden från widgeten, men vi ska undersöka det senare. Just nu, låt oss hoppa tillbaka till koden:
// 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>Det är den allmänna mallen för widget-till-iframe kommunikation. Låt oss använda den för att hämta data från servern:
<!-- 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>Vi utelämnar felhantering för att hålla detta enkelt och rakt på sak. Låt oss hoppa tillbaka till widgetkoden och se hur vi kommer åt funktioner som definieras i <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()
}
})
}Som du kan se, säger vi först till Figma att avslöja tillgången till våra dolda <iframe> och för att utlösa en händelse med namnet "networkRequest". Vi hanterar denna händelse i ui.html fil genom att kontrollera event.data.pluginMessage.type === 'networkRequest', och sedan skicka tillbaka data till widgeten.
Men ingenting händer än... Vi har fortfarande inte ringt fetchData() fungera. Om vi anropar det direkt i komponentfunktionen uppstår följande fel i konsolen:
Cannot use showUI during widget rendering.Figma säger åt oss att inte ringa showUI direkt i funktionskroppen... Så, var ska vi placera den? Svaret på det är en ny krok och en ny funktion: useEffect och waitForTask. Du kanske redan är bekant med useEffect om du är en React-utvecklare, men vi kommer att använda den här för att hämta data från servern när widgetkomponenten monteras.
const { useEffect, waitForTask } = widget;
function QuotesWidget() {
useEffect(() => {
waitForTask(fetchData());
});
}Men detta kommer att resultera i ännu ett "fel" där vår widget kommer att fortsätta återskapas med ett nytt citat, för alltid. Detta händer pga useEffect, per definition, utlöses igen när widgetens tillstånd ändras, nej när vi anropar fetchData. Och medans det finns en teknik att bara ringa useEffect väl i React fungerar det inte på Figmas implementering. Från Figmas dokument:
På grund av hur widgets körs,
useEffectska hantera att anropas flera gånger med samma tillstånd.
Tack och lov finns det en enkel lösning som vi kan dra nytta av och ringa useEffect endast en gång när komponenten monteras först, och det är genom att kontrollera om tillståndets värden fortfarande är tomma eller inte:
function QuotesWidget() {
useEffect(() => {
if (!author.length & !quote.length) {
waitForTask(fetchData());
}
});
}Du kan stöta på en skrämmande "minnesåtkomst utanför gränserna" fel. Dess ganska vanligt att se i plugin- och widgetutveckling. Bara starta om Figma så finns den inte längre.
Du kanske har märkt att ibland innehåller citattexten konstiga tecken.
Dessa är Unicode-tecken och vi måste formatera dem korrekt i kod:
<!-- 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>Och voilà, hämtade vår widget ett helt nytt designcitat varje gång den läggs till på designtavlan.
Lägga till en egenskapsmeny till vår widget
Medan vår widget hämtar ett nytt citat vid instansiering, skulle det vara mycket mer praktiskt om vi kunde göra den här processen igen men utan att ta bort den. Det här avsnittet blir kort eftersom lösningen är ganska anmärkningsvärd. Med fastighetsmenyer, kan vi lägga till interaktivitet till vår widget med ett enda anrop till usePropertyMenu krok.
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()
);
}Med en enkel krok kan vi skapa en knapp som visas nära vår widget när den är vald. Det var den sista biten som vi behövde lägga till för att slutföra det här projektet.
Publicera vår widget för allmänheten
Det är inte mycket nytta att bygga en widget om, ja, ingen användningar Det. Och medans Figma ger organisationer möjlighet att lansera privat Widgetar för internt bruk är det mycket vanligare att släppa dessa små program till världen.
Figma har en delikat granskningsprocess för widgetar som kan ta upp till 5 till 10 arbetsdagar. Och medan designcitat-widgeten vi byggt ihop är redan i widgetbiblioteket, jag kommer fortfarande att visa hur det kom dit. Försök inte att publicera den här widgeten igen eftersom det bara kommer att leda till borttagning. Men om du gjorde några betydande ändringar, fortsätt och dela din egen widget med communityn!
Kom igång genom att klicka på widgetmenyn (Shift+I) och byter till Utveckling fliken för att se vår widget. Klicka på menyn med tre punkter och tryck Publicera.
Figma kommer att uppmana dig att ange några detaljer om din widget, såsom en titel, beskrivning och några taggar. Vi behöver också en 128×128 ikonbild och en 1920×960 bannerbild.
Efter att ha importerat alla dessa tillgångar behöver vi fortfarande en skärmdump av vår widget. Stäng publiceringsmodalen (oroa dig inte, du kommer inte att förlora din data) och högerklicka på widgeten för att visa en intressant snabbmeny. Hitta Kopiera/klistra in somkategori och välj Kopiera som PNG.
När det är gjort, låt oss gå tillbaka till publiceringsmodalen och klistra in widgetens skärmdump:
Scrolla ner och publicera slutligen din modal. Fira! 🎉
Figma kommer att kontakta dig om ett par dagar om status för din modals granskning. I fallet med ett avslag kommer du att få möjlighet att göra ändringar och skicka in igen.
Slutsats
Vi har precis byggt en Figma-widget från grunden! Det finns många saker som inte tas upp här, som t.ex klicka på händelser, inmatningsformuläroch mycket mer. Du kan gräva i den fullständiga källkoden för widgeten i den här GitHub-repo.
Till dem som strävar efter att ta sina Figma-färdigheter till högre nivåer, föreslår jag att du utforskar Widgets-communityt och använder det som fångar ditt öga som inspiration. Fortsätt bygga fler widgets, fortsätt vässa dina React-färdigheter, och innan du ens inser det kommer du att lära mig hur man gör allt detta.
Ytterligare resurser
Jag var tvungen att hänvisa till massor av dokumentation när jag gjorde den här widgeten. Jag tänkte dela med mig av det jag hittade för att hjälpa mest.
