Figma har alltid oppmuntret til samarbeid mellom utviklere og designere. Den streber etter en endeløs skattkammer av fellesskapsskapte plugins. Trenger du 3D-elementer? Det er en plugin for det. Trenger du abstrakte SVG-er? Det er en plugin for det, Også.
Når det er sagt, har designdelen av Figma alltid vært relativt statisk - alltid med ubevegelige rektangler koblet til hverandre gjennom forhåndsdefinerte brukerinteraksjoner. Men hva om jeg fortalte deg at designene dine plutselig kunne komme til live - at de kunne være animerte, interaktive og til og med statelige? Så, hva vil skille konsept fra implementering?
figma annonsert i juni at det bringer JavaScript-drevne widgets til bordet. Nå kan designere bla gjennom og implementere logikkdrevne komponenter rett i Figma!
Si hei til Widgets API! Vil du vite hva det er og hvordan du bruker det? Det er akkurat det vi skal gjøre sammen i dette innlegget.
Figma-widgets åpner for mange muligheter
Tenk deg at du jobber døgnet rundt med partneren din for å designe en stor restaurantapplikasjon. Dere samarbeider allerede om samme Figma-brett; begge deler nøyaktig det samme dokumentet med endringer som skjer umiddelbart.
Du vet sikkert allerede at samarbeid involverer mer enn bare designprosessen:
- prosjektledelse,
- arrangere meningsmålinger for å samle stemmer,
- importere og visualisere falske data,
- og kanskje til og med spille et flerspillerspill for å kjøle seg ned etter mange timers arbeid.
Vi krever bare at én person administrerer alt og sender ut linker til andre medlemmer av gruppen. Men åh, det er ikke veldig effektivt, er det?
Vel, det er her widgets kommer inn i bildet. Vi kan tenkes å gjøre alt det - ja, alt - uten noen gang å forlate Figma.
Her er bare noen av måtene du kanskje vil bruke widgets i Figma:
Listen går igjen og igjen. Som du kan se, er det allerede en mengde widgets som du fritt kan bruke i dokumentene dine. Faktisk kan du legge til widgets rett til tavlen fra widgets-menyen (Shift+I).
Men vi er ikke her for å lære hvordan du bruker widgets, fordi det er enkelt. La oss gjøre det vi kan best: vi skal lage vår egen Figma-widget! Denne vil bli inspirert av Chris Coyiers nettsted for designsitater. Vi tar API-en, mater den inn i widgeten, og viser deretter tilfeldige designsitater direkte i Figma.
Her er det vi trenger
Jeg liker ikke å være bæreren av dårlige nyheter, men for å utvikle widgets må du være på Windows eller Mac. Linux-brukere, beklager, men du har ikke flaks. (Du kan fortsatt bruk en VM hvis du vil følge med.)
Vi skal Last ned Figma Desktop applikasjon. Den enkleste måten å komme i gang på er ved å generere en widgetmal rett fra appen.
La oss lage et nytt brett ved å åpne widgetmenyen (Shift+ I), bytter til Utvikling fanen, og opprette et nytt element.
Etter det vil Figma be deg om å navngi den nye widgeten og bestemme om den er mer skreddersydd for designplater eller FigJam-plater også. Det førstnevnte alternativet er tilstrekkelig for formålet med denne artikkelen.
Og tilpasningen slutter ikke her; Figma vil også gi deg muligheten til å starte med en forhåndsdefinert tellerwidget eller et iFrame-aktivert alternativ som også gir deg tilgang til Canvas og Fetch APIer (så vel som alle andre nettleser-APIer). Vi går med det enkle alternativet "Empty", men vi vil til slutt endre det selv for å bruke Fetch API.
Du vil da bli bedt om å lagre det nye widgetprosjektet i en spesiell katalog i systemet ditt. Når det er gjort, start terminalen og diriger den til den mappen. Ikke kjør noen kommandoer ennå - vi gjør det senere og får målrettet en feilmelding med mål om å lære mer om Widgets API.
Designe widgeten
Vi trekker designet rett fra Chris Coyiers nettsted for designsitater. Så la oss gå dit og dykke inn ved å starte opp DevTools.
De to nøkkelsnarveiene jeg bruker her er Ctrl+Shift+C (eller Cmd+Shift+C) for å veksle mellom "Velg element"-verktøyet, og Shift+Click for å endre fargeformatet til HEX-kode. Vi gjør dette for å lære om fargene, skriftene, skriftvektene og skriftstørrelsene som brukes på Chris sin nettside. All denne informasjonen er avgjørende for å bygge en widget som ligner mye på Figma, som vil være vårt neste steg! Du kan ta tak i den utformede komponenten og bruk den i ditt eget lerret.
Jeg vil ikke gå i detalj her, siden hovedemnet i denne artikkelen er å bygge widgets ved å skrive kode. Men jeg kan ikke understreke nok hvor viktig det er å ta godt vare på deg widgets stil… CSS-Tricks har allerede en mengde designorienterte Figma-opplæringer; du vil ikke angre på at du la dem til leselisten din.
Lage oppsettet for widgeten vår
Med design ute av veien, er det på tide å ta programmeringsfingrene ut og begynne å bygge girene til widgeten vår.
Det er veldig interessant hvordan Figma oversetter sine designbyggesteiner til React-lignende komponenter. Rammeelementer med auto-layout-funksjonen, for eksempel, er representert som <AutoLayout /> komponent i kode. I tillegg kommer vi til å bruke ytterligere to komponenter: <Text /> og <SVG />.
Ta en titt på Figma-tavlen min… Jeg ber deg nettopp om å fokusere på objekttreet. Det er det vi trenger for å kunne oversette widgetdesignet vårt til JSX-kode.
Som du kan se, krever vår designsitatwidget at tre komponenter skal importeres. Det er et anstendig antall komponenter tatt i betraktning at full API inneholder kun åtte lagbaserte noder. Men som du snart vil se, er disse modulene mer enn tilstrekkelige til å lage alle slags oppsett.
// code.tsx
const { widget } = figma;
const { AutoLayout, Text, SVG } = widget;Og med dette har vi alt vi trenger for å gå videre og bygge skjelettet til widgeten vår slik vi ville gjort i React:
function QuotesWidget() {
const quote = `...`;
const author = `...`;
return (
<AutoLayout>
<SVG />
<AutoLayout>
<Text>{quote}</Text>
<Text>— {author}</Text>
</AutoLayout>
<SVG />
</AutoLayout>
);
}
widget.register(QuotesWidget);Denne koden er veldig forvirrende, for å si det mildt. Akkurat nå kan vi ikke skille designlagene fra hverandre. Heldigvis kan vi enkelt løse dette problemet ved å bruke name eiendom.
<AutoLayout name={"Quote"}>
<SVG name={"LeftQuotationMark"} />
<AutoLayout name={"QuoteContent"}>
<Text name={"QuoteText"}>{quote}</Text>
<Text name={"QuoteAuthor"}>— {author}</Text>
</AutoLayout>
<SVG name={"RightQuotationMark"} />
</AutoLayout>;Og selvfølgelig kan vi fortsatt ikke se anførselstegn SVG-ene våre, så la oss jobbe med å fikse det. De <SVG/> komponent godta en srcegenskap som tar kildekoden for et SVG-element. Det er ikke mye å si om denne, så la oss holde det enkelt og hoppe rett tilbake til 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} />
);
}Jeg tror vi alle kan være enige om at alt er mye klarere nå! Når vi navngir ting, blir hensikten deres plutselig mye mer åpenbar for leserne av koden vår.
Forhåndsvisning av widgeten vår i sanntid
Figma tilbyr en flott utvikleropplevelse når du bygger widgets, inkludert (men ikke begrenset til) varm-omlasting. Med denne funksjonen er vi i stand til å kode og forhåndsvise endringer i widgeten vår i sanntid.
Kom i gang ved å åpne widgetmenyen (Shift+I), bytte til utviklingsfanen og klikke eller dra den nye widgeten til tavlen. Klarer du ikke å finne widgeten din? Ikke bekymre deg, bare klikk på menyen med tre prikker og importer widgeten din manifest.json fil. Ja, det er alt som skal til for å få det tilbake til eksistensen!
Vent, fikk du en feilmelding nederst på skjermen?
I så fall, la oss undersøke. Klikk på "Åpne konsollen” og les hva den har å si. Hvis Åpne konsollen knappen er borte, er det en alternativ måte å åpne feilsøkingskonsollen på. Klikk på Figma-logoen, hopp til widgetkategorien og avslør utviklingsmenyen.
Denne feilen skyldes sannsynligvis det faktum at vi ikke har kompilert TypeScript til JavaScript ennå. Vi kan gjøre det på kommandolinjen ved å kjøre npm install og npm run watch. (eller yarn og yarn watch ). Ingen feil denne gangen!
En annen hindring du kan treffe er at widgeten ikke klarer å gjengi hver gang koden endres. Vi kan enkelt tvinge widgeten vår til å oppdatere ved å bruke følgende kontekstmenykommando: widgets → Gjengi widget på nytt.
Styler widgeten
Slik det er nå, er utseende av widgetene våre er fortsatt ganske langt unna vårt endelige mål.
Så hvordan styler vi Figma-komponenter fra kode? Kanskje med CSS slik vi ville gjort i et React-prosjekt? Negativ. Med Figma-widgets, alle stylingen skjer gjennom et sett med veldokumenterte rekvisitter. Heldig for oss er disse gjenstandene nesten navngitt identisk til sine kolleger i Figma.
Vi kommer i gang med å konfigurere våre to <AutoLayout /> komponenter. Som du kan se i infografikken ovenfor, er rekvisittnavn ganske beskrivende for formålet. Dette gjør det enkelt for oss å hoppe rett inn i kode og begynne å gjøre noen endringer. Jeg kommer ikke til å vise hele koden igjen, så stol på komponentnavnene for å veilede deg hvor kodebitene hører hjemme.
<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 nettopp gjort store fremskritt! La oss lagre og hoppe tilbake til Figma for å se hvordan widgeten vår ser ut. Husker du hvordan Figma laster inn widgets automatisk ved nye endringer?
Men det er ikke helt der ennå. Vi må også legge til en bakgrunnsfarge til rotkomponenten:
<AutoLayout name={"Quote"} fill={"#ffffff"}>Igjen, ta en titt på Figma-tavlen og legg merke til hvordan endringer kan reflekteres nesten umiddelbart tilbake i widgeten.
La oss gå langs denne veiledningen og style <Text> komponenter.
Etter å ha tatt en titt på Widgets API-dokumentasjon, er det igjen tydelig at eiendomsnavn er nesten identiske med sine motparter i Figma-appen, som kan sees i infografikken ovenfor. Vi vil også bruke verdier fra den siste delen der vi inspiserte Chris' nettsted.
<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>Legger til tilstand til widgeten
Vår widget viser for øyeblikket det samme sitatet, men vi ønsker å trekke fra hele utvalget av sitater tilfeldig. Vi må legge til stat til widgeten vår, som alle React-utviklere vet er en variabel hvis endring utløser re-gjengivelse av komponenten vår.
Med Figma opprettes staten med useSyncedState krok; det er ganske mye Reager useState, men det krever at programmerere spesifiserer en unik nøkkel. Dette kravet stammer fra det faktum at Figma må synkronisere widgetens tilstand på tvers alle klienter som kan se på samme designbrett, men via forskjellige datamaskiner.
const { useSyncedState } = widget;
function QuotesWidget() {
const [quote, setQuote] = useSyncedState("quote-text", "");
const [author, setAuthor] = useSyncedState("quote-author", "");
}Det er all endringen vi trenger for nå. I den neste delen finner vi ut hvordan du henter data fra Internett. Spoiler Alert: det er ikke så enkelt som det ser ut til.
Henter data fra nettverket
Husk da Figma ga oss valget om å starte med en iFrame-aktivert widget. Selv om vi ikke valgte det alternativet, må vi fortsatt implementere noen av funksjonene. La meg forklare hvorfor vi ikke bare kan ringe fetch() i widgetkoden vår.
Når du bruker en widget, kjører du JavaScript-kode på din egen datamaskin som er skrevet av noen andre. Selv om alle widgeter blir grundig gjennomgått av Figma-staben, er det fortsatt et stort sikkerhetshull, siden vi alle vet hvor mye skade kan opprettes av enda en linje med JavaScript.
Som et resultat kan Figma ikke bare eval() hvilken som helst widget-kode skrevet av anonyme programmerere. Lang historie kort, teamet bestemte at den beste løsningen var å kjøre tredjepartskode i et tett bevoktet sandkassemiljø. Og som du kanskje har gjettet, er nettleser-API-er ikke tilgjengelige i et slikt miljø.
Men ikke bekymre deg, Figmas løsning på dette andre problemet er <iframe>s. Enhver HTML-kode som vi skriver i en fil, fortrinnsvis kalt ui.html, vil ha tilgang til alle nettleser-APIer. Du lurer kanskje på hvordan vi kan utløse denne koden fra widgeten, men vi skal se nærmere på det senere. Akkurat nå, la oss hoppe tilbake til 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 er den generelle malen for widget-til-iframe kommunikasjon. La oss bruke den til å hente data fra serveren:
<!-- 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 utelater feilhåndtering for å holde dette enkelt og rett på sak. La oss hoppe tilbake til widgetkoden og se hvordan vi får tilgang til funksjoner definert 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, ber vi først Figma om å avsløre tilgang til vår skjulte <iframe> og for å utløse en hendelse med navnet "networkRequest". Vi håndterer denne hendelsen i ui.html fil ved å sjekke event.data.pluginMessage.type === 'networkRequest', og deretter legge data tilbake til widgeten.
Men ingenting skjer ennå... Vi har fortsatt ikke ringt fetchData() funksjon. Hvis vi kaller det direkte i komponentfunksjonen, oppstår følgende feil i konsollen:
Cannot use showUI during widget rendering.Figma ber oss ikke ringe showUI direkte i funksjonskroppen... Så, hvor skal vi plassere den? Svaret på det er én ny krok og én ny funksjon: useEffect og waitForTask. Du har kanskje allerede kjennskap til useEffect hvis du er en React-utvikler, men vi skal bruke den her for å hente data fra serveren når widget-komponenten monteres.
const { useEffect, waitForTask } = widget;
function QuotesWidget() {
useEffect(() => {
waitForTask(fetchData());
});
}Men dette vil resultere i nok en "feil" der widgeten vår vil fortsette å gjengi med et nytt sitat, for alltid. Dette skjer pga useEffect, per definisjon, utløses igjen hver gang widgetens tilstand endres, nei når vi ringer fetchData. Og mens det er en teknikk å bare ringe useEffect en gang i React, fungerer det ikke på Figmas implementering. Fra Figmas dokumenter:
På grunn av hvordan widgets kjører,
useEffectskal håndtere å bli oppringt flere ganger med samme tilstand.
Heldigvis finnes det en enkel løsning som vi kan dra nytte av og ringe useEffect bare én gang når komponenten først monteres, og det er ved å sjekke om statens verdier fortsatt er tomme:
function QuotesWidget() {
useEffect(() => {
if (!author.length & !quote.length) {
waitForTask(fetchData());
}
});
}Du kan støte på en skummel "minnetilgang utenfor grensene" feil. Det er ganske vanlig å se i plugin- og widgetutvikling. Bare start Figma på nytt, så vil den ikke være der lenger.
Du har kanskje lagt merke til at noen ganger inneholder sitatteksten rare tegn.
Disse er Unicode-tegn og vi må formatere dem riktig i kode:
<!-- 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>Og voilà, hentet widgeten vår et helt nytt designtilbud hver gang den legges til designtavlen.
Legger til en eiendomsmeny i widgeten vår
Mens widgeten vår henter et nytt tilbud ved instansiering, ville det være mye mer praktisk om vi kunne gjøre denne prosessen på nytt, men uten å slette den. Denne delen vil være kort da løsningen er ganske bemerkelsesverdig. Med eiendommenyer, kan vi legge til interaktivitet til widgeten vår med et enkelt anrop til 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 lage en knapp som vises nær widgeten vår når den er valgt. Det var den siste delen vi trengte å legge til for å fullføre dette prosjektet.
Publiserer widgeten vår for publikum
Det er ikke mye bruk for å bygge en widget hvis, vel, ingen bruker den. Og mens Figma gir organisasjoner muligheten til å lansere privat widgets for intern bruk er det mye mer vanlig å gi ut disse små programmene til verden.
Figma har en delikat widget-gjennomgangsprosess som kan ta opptil 5 til 10 virkedager. Og mens designsitat-widgeten vi bygget sammen er allerede i widgetbiblioteket, Jeg vil fortsatt demonstrere hvordan den kom dit. Ikke prøv å publisere denne modulen på nytt, da det bare vil resultere i fjerning. Men hvis du ga den noen betydelige endringer, fortsett og del din egen widget med fellesskapet!
Kom i gang ved å klikke på widgets-menyen (Shift+I) og bytter til Utvikling fanen for å se widgeten vår. Klikk på menyen med tre prikker og trykk Publiser.
Figma vil be deg om å angi noen detaljer om widgeten din, for eksempel en tittel, beskrivelse og noen tagger. Vi trenger også et 128×128 ikonbilde og et 1920×960 bannerbilde.
Etter å ha importert alle disse eiendelene, trenger vi fortsatt et skjermbilde av widgeten vår. Lukk publiseringsmodalen (ikke bekymre deg, du vil ikke miste dataene dine) og høyreklikk på widgeten for å avsløre en interessant kontekstmeny. Finn Kopier/lim inn somkategori og velg Kopier som PNG.
Når det er gjort, la oss gå tilbake til publiseringsmodalen og lime inn skjermbildet til widgeten:
Rull ned og publiser til slutt din modal. Feire! 🎉
Figma vil kontakte deg om et par dager om statusen for din modals gjennomgang. Ved avslag vil du bli gitt mulighet til å gjøre endringer og sende inn på nytt.
konklusjonen
Vi har nettopp bygget en Figma-widget fra bunnen av! Det er mange ting som ikke er dekket her, som f.eks klikk hendelser, inndataskjemaerog mye mer. Du kan grave i hele kildekoden for widgeten i denne GitHub-repoen.
Til de som ønsker å ta Figma-ferdighetene sine til høyere nivåer, foreslår jeg å utforske Widgets-fellesskapet og bruke det som fanger oppmerksomheten som inspirasjon. Fortsett å bygge flere widgets, fortsett å skjerpe React-ferdighetene dine, og før du i det hele tatt innser det, vil du lære meg hvordan du gjør alt dette.
Ytterligere ressurser
Jeg måtte referere til mye dokumentasjon mens jeg laget denne widgeten. Jeg tenkte jeg skulle dele det jeg fant for å hjelpe mest.
