Figma je vedno spodbujala sodelovanje med razvijalci in oblikovalci. Prizadeva si za neskončno zakladnico vtičnikov, ki jih je ustvarila skupnost. Potrebujete 3D elemente? Za to obstaja vtičnik. Potrebujete abstraktne datoteke SVG? Za to obstaja vtičnikTudi.
Kljub temu je bil oblikovni del Figme vedno razmeroma statičen - vedno je delal z nepremičnimi pravokotniki, ki so med seboj povezani prek vnaprej določenih uporabniških interakcij. Kaj pa, če bi vam rekel, da bi lahko vaši dizajni nenadoma oživeli – da bi bili lahko animirani, interaktivni in celo s stanjem? Kaj bi torej ločilo koncept od izvedbe?
figma napovedal v juniju da na mizo prinaša pripomočke, ki jih poganja JavaScript. Zdaj lahko oblikovalci brskajo in izvajajo logično vodene komponente neposredno v Figmi!
Pozdravi API za pripomočke! Želite vedeti, kaj je to in kako ga uporabljati? Točno to bomo v tem prispevku počeli skupaj.
Pripomočki Figma odpirajo ogromno možnosti
Predstavljajte si, da delate XNUMX ur na dan s svojim partnerjem, da oblikujete veliko restavracijsko aplikacijo. Oba že sodelujeta na isti plošči Figma; oba si delita popolnoma isti dokument s spremembami, ki se dogajajo sproti.
Zagotovo že veste, da sodelovanje vključuje več kot le proces oblikovanja:
- vodenje projektov,
- gostovanje anket za zbiranje glasov,
- uvažanje in vizualizacija lažnih podatkov,
- in morda celo igranje igre za več igralcev, da se ohladite po mnogih urah dela.
Zahtevamo le eno osebo, ki upravlja vse in pošilja povezave drugim članom skupine. Ampak oh, to ni zelo učinkovito, kajne?
No, tu pridejo v poštev pripomočki. Verjetno lahko storimo vse to - da, vse - ne da bi kdaj zapustili Figmo.
Tukaj je le nekaj načinov, kako boste morda želeli uporabiti gradnike v Figmi:
Seznam gre mi in mi. Kot lahko vidite, že obstaja množica pripomočkov, ki jih lahko prosto uporabljate v svojih dokumentih. Pravzaprav lahko dodate pripomočke naravnost na tablo iz menija pripomočkov (Shift+I).
Vendar nismo tukaj, da bi se naučili uporabljati pripomočke, ker je to preprosto. Naredimo to, kar znamo najbolje: ustvarili bomo lasten pripomoček Figma! Ta se bo zgledoval po Spletno mesto Chrisa Coyierja s ponudbami za oblikovanje. Vzeli bomo API, ga vnesli v pripomoček in nato prikazali naključne ponudbe oblikovanja neposredno v Figmi.
Tukaj je tisto, kar potrebujemo
Ne maram biti nosilec slabih novic, a če želite razvijati pripomočke, morate biti v sistemu Windows ali Mac. Uporabniki Linuxa, oprostite, vendar nimate sreče. (Še vedno bi lahko uporabite VM če želite slediti.)
Bomo prenesite namizje Figma aplikacija. Najenostavnejši način za začetek je ustvarjanje predloge pripomočka neposredno iz aplikacije.
Ustvarimo novo tablo tako, da odpremo meni pripomočkov (Shift+ I), preklop na Razvoj in ustvarite nov element.
Po tem vas bo Figma pozvala, da poimenujete novi gradnik in se odločite, ali je bolj prilagojen oblikovalske plošče ali plošče FigJam preveč. Prva možnost zadostuje za namene tega članka.
In prilagajanje se tu ne konča; Figma vam bo dala tudi možnost, da začnete z vnaprej izdelanim gradnikom števca ali alternativo, ki podpira iFrame, ki vam omogoča tudi dostop do API-jev Canvas in Fetch (kot tudi vseh drugih API-jev brskalnika). Izbrali bomo preprosto možnost »Empty«, vendar jo bomo sčasoma sami spremenili, da bo uporabljala Fetch API.
Nato boste pozvani, da shranite nov projekt gradnika v poseben imenik v vašem sistemu. Ko je to končano, zaženite terminal in ga usmerite v to mapo. Ne zaženite še nobenih ukazov — to bomo storili pozneje in namenoma prejeli napako, da bi izvedeli več o API-ju Widgets.
Oblikovanje pripomočka
Dizajn vzamemo naravnost iz Spletno mesto Chrisa Coyierja s ponudbami za oblikovanje. Torej, pojdimo tja in se poglobimo s sprožitvijo DevTools.
Dve ključni bližnjici, ki ju uporabljam tukaj, sta Ctrl+Shift+C (ali Cmd+Shift+C), da preklopite orodje »Izberi element« in Shift+Click da spremenite barvno obliko v HEX kodo. To počnemo, da bi izvedeli več o barvah, pisavah, težah in velikostih pisav, ki se uporabljajo na Chrisovem spletnem mestu. Vse te informacije so ključne za izdelavo zelo podobnega gradnika v Figmi, kar bo naš naslednji korak! Ti lahko zgrabite oblikovano komponento in ga uporabite na svojem platnu.
Tu se ne bom spuščal v podrobnosti, saj je glavna tema tega članka izdelava pripomočkov s pisanjem kode. Vendar ne morem dovolj poudariti, kako pomembno je dobro skrbeti za svoje slog gradnikov… CSS-Tricks jih je že ogromno oblikovalsko usmerjene vadnice Figma; ne bo vam žal, če jih dodate na svoj bralni seznam.
Ustvarjanje postavitve za naš gradnik
Ko smo z oblikovanjem končali, je čas, da programerske prste vzamemo ven in začnemo graditi zobnike našega pripomočka.
Zelo zanimivo je, kako Figma prevaja svoje oblikovalske gradnike v komponente, podobne Reactu. Elementi okvirja s funkcijo samodejne postavitve so na primer predstavljeni kot <AutoLayout /> komponenta v kodi. Poleg tega bomo uporabili še dve komponenti: <Text /> in <SVG />.
Oglejte si mojo ploščo Figma… Natančno vas prosim, da se osredotočite na objektno drevo. To je tisto, kar potrebujemo, da lahko prevedemo našo zasnovo pripomočka v kodo JSX.
Kot lahko vidite, naš pripomoček za oblikovalske ponudbe zahteva uvoz treh komponent. To je spodobno število komponent glede na to, da polni API vsebuje samo osem vozlišč na osnovi plasti. Toda kot boste kmalu videli, ti moduli več kot zadostujejo za izdelavo vseh vrst postavitev.
// code.tsx
const { widget } = figma;
const { AutoLayout, Text, SVG } = widget;In s tem imamo vse, kar potrebujemo za gradnjo okostja našega gradnika, kot bi ga imeli v Reactu:
function QuotesWidget() {
const quote = `...`;
const author = `...`;
return (
<AutoLayout>
<SVG />
<AutoLayout>
<Text>{quote}</Text>
<Text>— {author}</Text>
</AutoLayout>
<SVG />
</AutoLayout>
);
}
widget.register(QuotesWidget);Ta koda je milo rečeno zelo zmedena. Trenutno ne moremo ločiti oblikovalskih plasti. Na srečo lahko to težavo enostavno rešimo z uporabo name nepremičnine.
<AutoLayout name={"Quote"}>
<SVG name={"LeftQuotationMark"} />
<AutoLayout name={"QuoteContent"}>
<Text name={"QuoteText"}>{quote}</Text>
<Text name={"QuoteAuthor"}>— {author}</Text>
</AutoLayout>
<SVG name={"RightQuotationMark"} />
</AutoLayout>;In seveda še vedno ne moremo videti naših SVG-jev v narekovajih, zato si prizadevajmo to popraviti. The <SVG/> komponenta sprejme a srclastnost, ki vzame izvorno kodo za element SVG. O tem ni veliko za povedati, zato bodimo preprosti in skočimo naravnost nazaj k kodi:
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} />
);
}Mislim, da se lahko vsi strinjamo, da je zdaj vse veliko bolj jasno! Ko stvari poimenujemo, njihov namen nenadoma postane veliko bolj očiten bralcem naše kode.
Predogled našega widgeta v realnem času
Figma ponuja odlično razvijalsko izkušnjo pri gradnji gradnikov, vključno (vendar ne omejeno na) vroče ponovno polnjenje. S to funkcijo lahko v realnem času kodiramo in si predogledamo spremembe našega pripomočka.
Začnite tako, da odprete meni pripomočkov (Shift+I), preklopite na zavihek za razvoj in kliknite ali povlečete svoj novi pripomoček na tablo. Ne najdete svojega pripomočka? Ne skrbite, samo kliknite na meni s tremi pikami in uvozite svoje pripomočke manifest.json mapa. Da, to je vse, kar je potrebno, da ga vrnemo v obstoj!
Počakajte, ste prejeli sporočilo o napaki na dnu zaslona?
Če je tako, poglejmo. Kliknite na "Odpri konzolo« in preberite, kaj piše. Če je Odpri konzolo gumba ni več, obstaja alternativni način za odpiranje konzole za odpravljanje napak. Kliknite logotip Figma, skočite v kategorijo pripomočkov in razkrijte razvojni meni.
Ta napaka je verjetno posledica dejstva, da svojega TypeScripta še nismo prevedli v JavaScript. To lahko storimo v ukazni vrstici z zagonom npm install in npm run watch. (oz yarn in yarn watch ). Tokrat brez napak!
Še ena ovira, na katero lahko naletite, je, da gradnik ne uspe znova upodobiti vsakič, ko se koda spremeni. Naš gradnik lahko preprosto prisilimo v posodobitev z naslednjim ukazom kontekstnega menija: Pripomočki → Pripomoček za ponovno upodobitev.
Oblikovanje pripomočka
Kot trenutno stoji, je Izgleda naših pripomočkov še vedno precej daleč od našega končnega cilja.
Kako torej oblikujemo komponente Figma iz kode? Morda s CSS, kot bi to storili v projektu React? Negativno. S pripomočki Figma, vse styling se zgodi skozi niz dobro dokumentirani rekviziti. Na našo srečo so ti predmeti skoraj poimenovani enako svojim kolegom v Figmi.
Začeli bomo s konfiguracijo naših dveh <AutoLayout /> komponente. Kot lahko vidite v zgornji infografiki, imena rekvizitov precej opisujejo njihov namen. To nam olajša, da skočimo naravnost v kodo in začnemo izvajati nekaj sprememb. Ne bom znova pokazal celotne kode, zato se zanašajte na imena komponent, ki vas bodo vodila, kam delčki sodijo.
<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>;Pravkar smo zelo napredovali! Shranimo in skočimo nazaj na Figmo, da vidimo, kako izgleda naš gradnik. Se spomnite, kako Figma samodejno znova naloži pripomočke ob novih spremembah?
Ampak še ni čisto tam. Dodati moramo tudi barvo ozadja korenski komponenti:
<AutoLayout name={"Quote"} fill={"#ffffff"}>Še enkrat si oglejte svojo ploščo Figma in opazite, kako se lahko spremembe skoraj takoj odražajo nazaj v pripomočku.
Pojdimo naprej po tem vodniku in oblikujmo <Text> komponente.
Po ogledu Dokumentacija API-ja za gradnike, je ponovno jasno, da so imena lastnosti skoraj enaka svojim primerkom v aplikaciji Figma, kot je razvidno iz zgornje infografike. Uporabili bomo tudi vrednosti iz zadnjega razdelka, kjer smo pregledali Chrisovo spletno mesto.
<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>Dodajanje stanja v gradnik
Naš pripomoček trenutno prikazuje isti citat, vendar želimo naključno potegniti iz celotne zbirke citatov. Dodati moramo so bili v naš gradnik, za katerega vsi razvijalci Reacta vedo, da je spremenljivka, katere sprememba sproži ponovno upodobitev naše komponente.
S Figmo se stanje ustvari z useSyncedState kavelj; precej je React's useState, vendar zahteva, da programerji določijo edinstven ključ. Ta zahteva izhaja iz dejstva, da mora Figma sinhronizirati stanje našega gradnika vse stranke, ki si morda ogledujejo isto oblikovalsko tablo, vendar prek različnih računalnikov.
const { useSyncedState } = widget;
function QuotesWidget() {
const [quote, setQuote] = useSyncedState("quote-text", "");
const [author, setAuthor] = useSyncedState("quote-author", "");
}To je vsa sprememba, ki jo trenutno potrebujemo. V naslednjem razdelku bomo ugotovili, kako pridobiti podatke iz interneta. Spoiler Alert: ni tako preprosto, kot se zdi.
Pridobivanje podatkov iz omrežja
Spomnite se, ko nam je Figma dala izbiro, da začnemo s pripomočkom, ki podpira iFrame. Čeprav se nismo odločili za to možnost, moramo vseeno implementirati nekatere njene funkcije. Naj pojasnim, zakaj ne moremo preprosto poklicati fetch() znotraj kode našega pripomočka.
Ko uporabljate pripomoček, na svojem računalniku izvajate kodo JavaScript, ki jo je napisal nekdo drug. Čeprav vse pripomočke temeljito pregleda osebje Figme, je to še vedno velika varnostna luknja, saj vsi vemo, koliko škodo lahko povzroči celo ena vrstica JavaScripta.
Posledično Figma ne more preprosto eval() katero koli kodo pripomočka, ki so jo napisali anonimni programerji. Skratka, ekipa se je odločila, da je najboljša rešitev izvajanje kode tretje osebe v skrbno varovanem okolju peskovnika. In kot ste morda uganili, API-ji brskalnika v takem okolju niso na voljo.
Toda ne skrbite, Figmina rešitev za to drugo težavo je <iframe>s. Vsaka koda HTML, ki jo zapišemo v datoteko, po možnosti imenovana ui.html, bodo imeli dostop do vseh API-jev brskalnika. Morda se sprašujete, kako lahko sprožimo to kodo iz pripomočka, vendar bomo to preučili pozneje. Zdaj pa skočimo nazaj na kodo:
// 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>To je splošna predloga za widget-to-iframe komunikacije. Uporabimo ga za pridobivanje podatkov s strežnika:
<!-- 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>Izpuščamo obravnavanje napak, da bi bilo to preprosto in natančno. Skočimo nazaj na kodo gradnika in poglejmo, kako dostopamo do funkcij, definiranih v <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()
}
})
}Kot lahko vidite, Figmi najprej rečemo, naj razkrije dostop do naših skritih <iframe> in za sprožitev dogodka z imenom "networkRequest". Ta dogodek obravnavamo v ui.html datoteko s preverjanjem event.data.pluginMessage.type === 'networkRequest', in nato objavo podatkov nazaj v gradnik.
Ampak še nič se ne dogaja… Še vedno nismo poklicali fetchData() funkcijo. Če jo pokličemo neposredno v funkciji komponente, se v konzoli pojavi naslednja napaka:
Cannot use showUI during widget rendering.Figma nam sporoča, naj ne kličemo showUI neposredno v telesu funkcije ... Torej, kam naj ga postavimo? Odgovor na to je ena nova kljuka in ena nova funkcija: useEffect in waitForTask. Morda že poznate useEffect če ste razvijalec React, vendar ga bomo tukaj uporabili za pridobivanje podatkov s strežnika, ko se komponenta pripomočka namesti.
const { useEffect, waitForTask } = widget;
function QuotesWidget() {
useEffect(() => {
waitForTask(fetchData());
});
}Toda to bo povzročilo še eno »napako«, kjer se bo naš pripomoček vedno znova upodabljal z novim citatom, za vedno. To se zgodi, ker useEffect, se po definiciji znova sproži vsakič, ko se spremeni stanje gradnika, ne, ko pokličemo fetchData. In medtem obstaja tehnika samo poklicati useEffect ko je v Reactu, ne deluje na implementaciji Figme. Iz Figminih dokumentov:
Zaradi Kako Widgets Run,
useEffectobravnavati večkratni klic z istim stanjem.
Na srečo obstaja preprosta rešitev, ki jo lahko izkoristimo in pokličemo useEffect samo enkrat, ko se komponenta prvič namesti, in to s preverjanjem, ali so vrednosti stanja še vedno prazne ali ne:
function QuotesWidget() {
useEffect(() => {
if (!author.length & !quote.length) {
waitForTask(fetchData());
}
});
}Morda boste naleteli na strašljivo "dostop do pomnilnika izven meja" napaka. je kar pogosto opazimo pri razvoju vtičnikov in pripomočkov. Samo znova zaženite Figmo in je ne bo več.
Morda ste opazili, da včasih besedilo citata vsebuje čudne znake.
to so Znaki Unicode in jih moramo pravilno oblikovati v kodi:
<!-- 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>in Voila, je naš pripomoček vsakič, ko je bil dodan na ploščo za oblikovanje, pridobil popolnoma nov predlog za oblikovanje.
Dodajanje menija lastnosti v naš gradnik
Medtem ko naš pripomoček po instanciaciji pridobi novo ponudbo, bi bilo veliko bolj praktično, če bi lahko ta postopek ponovili, vendar brez izbrisa. Ta del bo kratek, saj je rešitev precej izjemna. z meniji lastnosti, lahko našemu gradniku dodamo interaktivnost z enim klicem na usePropertyMenu kavelj.
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()
);
}Z enim preprostim kavljem lahko ustvarimo gumb, ki se prikaže poleg našega pripomočka, ko ga izberemo. To je bil zadnji del, ki smo ga morali dodati, da bi dokončali ta projekt.
Objava našega pripomočka za javnost
Nima smisla ustvarjati pripomočka, če, no, nihče uporablja to. In medtem ko Figma daje organizacijam možnost zagona zasebna pripomočki za notranjo uporabo je veliko pogosteje izdati te majhne programe svetu.
Figma ima občutljiv postopek pregleda gradnikov, ki lahko traja od 5 do 10 delovnih dni. In medtem ko je pripomoček za ponudbe oblikovanja, ki smo ga ustvarili skupaj že v knjižnici gradnikov, še bom pokazal, kako je prišel tja. Ne poskušajte znova objaviti tega pripomočka, saj bo to samo povzročilo odstranitev. Če pa ste ga bistveno spremenili, nadaljujte in delite svoj pripomoček s skupnostjo!
Začnite tako, da kliknete meni pripomočkov (Shift+I) in preklop na Razvoj za ogled našega pripomočka. Kliknite na meni s tremi pikami in pritisnite objavi.
Figma vas bo pozvala, da vnesete nekaj podrobnosti o svojem pripomočku, kot so naslov, opis in nekatere oznake. Potrebovali bomo tudi sliko ikone 128×128 in sliko pasice 1920×960.
Po uvozu vseh teh sredstev še vedno potrebujemo posnetek zaslona našega pripomočka. Zaprite način objave (brez skrbi, ne boste izgubili podatkov) in z desno miškino tipko kliknite gradnik, da se prikaže zanimiv kontekstni meni. Poišči Kopiraj/prilepi kotkategorijo in izberite Kopiraj kot PNG.
Ko je to opravljeno, se vrnimo k načinu objave in prilepimo posnetek zaslona pripomočka:
Pomaknite se navzdol in končno objavite svoj modal. Praznujte! 🎉
Figma vas bo v nekaj dneh obvestila o statusu pregleda vašega načina. V primeru zavrnitve boste prejeli priložnost za spremembe in ponovno oddajo.
zaključek
Gradnik Figma smo pravkar zgradili iz nič! Marsikaj tukaj ni zajeto, npr kliknite dogodke, vnosne obrazcein veliko več. Lahko se poglobite v celotno izvorno kodo pripomočka v ta repo GitHub.
Tistim, ki si želijo svoje znanje Figma dvigniti na višjo raven, predlagam, da raziščejo skupnost Widgets in uporabijo tisto, kar vam pade v oči, kot navdih. Nadaljujte z izgradnjo več pripomočkov, izostrite svoje sposobnosti React in preden se sploh zaveste, me boste učili, kako narediti vse to.
Nadaljnji viri
Med izdelovanjem tega pripomočka sem se moral sklicevati na veliko dokumentacije. Mislil sem, da bom delil tisto, kar sem ugotovil, da najbolj pomaga.
